css
宽高样式
html标签的分类:
块: 在默认样式下: 当前的标签自己独占一行 ;可以设置宽高。 例如: div p h1~h6 nav header footer section ul li ol
行内块:在默认样式下:多个标签供占一行 ;可以设置宽高。 例如: img input
行内:在默认样式下:多个标签供占一行 大小仅仅包裹内容区域 ;不可以设置宽高(不生效)。 例如: strong span u i s b del em ...
通过样式的方式设置: 标签的宽高特点
任然是:
块 行内块 可以设置宽高样式
行内 不可以设置宽高样式
宽度width:
高度height:
单位问题:
px 像素点 最常用的
mm 毫米 cm
em 移动端适配使用 h1
% 百分比 当前的元素依赖于父元素的大小 (基于父元素)
友情提示:
块元素 默认有宽度 没有高度 (100% 父元素)
字体样式
font 家族
font-size: 字体大小 单位 px em %
字体的默认大小是16px
font-style: 字体的样式(斜体/默认) i标签的由来
italic 斜体
normal 默认(不倾斜)
font-family: 字体的笔锋 宋体 楷体 。。。。
微软雅黑 默认字体
font-weight: 字体加粗 b标签的由来
bold 加粗
normal 默认(不加粗)
字体的连写:
字体综合属性(font)写法顺序为:字体风格(font-style)、字体浓淡(font-weight)、字体大小(font-size)、字体名称(font-family)、
要注意顺序的问题, 默认问题
友情提示:
在设置font-family 你要设置的字体 在你的计算机中要有这个字体才能生效,若没有这个字体则使用默认
win系统 所以默认的就是 微软雅黑
延展: 加粗 可以用数值100~900的整数值 600 + 加粗 600- 不加粗
文本的样式
text 家族
text-align: 文本的对齐方式 注意(块元素使用)
center:居中对齐
right: 右对齐
left: 左对齐 默认
text-decoration: 下划线
underline; 下滑线
none 去掉下滑线
text-indent: 首行缩进
50px;
color: 文本的颜色
常见的颜色效果都行 颜色单词 #fff #ffffff rgb rgba
line-height: 行高 一行的高度 :当文本设置行高后会自动让文本在行高中上下居中
letter-spacing 字间距
颜色使用
背景色
字体色
颜色的表现方式:
1使用颜色单词:
如: red yellow cyan green pink hotpink 。。。。 webstrom 会有提示
三原色:红 绿 蓝
2 单16三原色
如: #f(红)f(绿)f(蓝)
3 双16三原色
入 #ff(红)ff(绿)ff(蓝)
4rgb(0~255,0~255,0~255) 等同于 双16三原色
5rgba(0~255,0~255,0~255,0~1)
a表示透明度 0全透明
1不透明
特殊原色
f00 红 0f0 绿 00f 蓝
ff0 黄 0ff 天蓝 f0f 紫
fff 白 000 黑 0到f 灰色的递变 颜色越来越浅