语义化
- 定义:用合理的标签和属性去格式化文档(组合文档结构)
- 语义化的好处:
- 在CSS样式丢失的情况下,依然能保证基本文档结构;
- 增强代码的可读性,有利于后期维护,团队协作;
- 有利于搜索引擎优化(机器读懂)
- 有利于用户体验(alt,title)
css基础
-
Cascading style sheet级联样式表,负责表现层,用于定义样式结构,图片和文字样式;
-
语法:选择器(样式声明组);
-
引入样式的方式:
-
行间(内联,内嵌):
- 位置:放于开始标签的内部;
- 语法格式:style=“具体样式”;
- 适用于:处理单个元素用于的特殊样式,需要几个就复制几次;
- 特点:结构表现不分离
-
内部:
- 位置:放于head标签内部;
- 语法格式:
-
字体样式
- 字体,字体系列: font-family
- 语法格式->font-family: “宋体”;
- 常用字体:
- 微软雅黑(Microsoft YaHei);
- 宋体(simsun);
- Arial
- 字体名称包含汉子,空格,特殊符号,用引号包含;
- 回退机制:多种字体用逗号隔开,如果第一个字体系统未安装,将显示第二个字体
- 字号:font-size
- 单位为像素px或者是百分比(继承父元素的字号)->font-size: 30px;
- 谷歌浏览器默认最小字号12px,大部分浏览器默认字号为16px;
- 不允许赋值;
- em父元素字号的几倍:2em表示父元素的2倍字号 2em=200%;
- 字体风格:font-style
- normal正常;
- litalic斜体;
- 字体加粗:font-weight
- nomal正常;
- bold粗体显示;
- 100-900 9级自重
- 400对应nomal正常
- 700对应bold粗体
文本样式
- line-height行高:
- 定义:文字行基线直接的距离;
- 作用:用来控制文字行之间距离;
- 不允许负值;
- 取值可以是px,百分比(相对于当前元素的字号),数字(无单位,理解为倍数),em->相对于元素font-size计算;
- 测量:行高:文字高度+行间距;
- 行高的特性:行高可以实现我们单行文字的垂直居中;
字体简写
- font:+各项属性
- 顺序:字体风格,字体加粗,字号/行高,字体
- 只有当字号和字体同时存在才有效
文本属性
- line-height;
- color文本颜色:
- 颜色名称:red,yellow…
- 十六进制颜色表示:
- rrggbb
- 红,绿,蓝
- 000000-黑色,ffffff白色,ff0000-红色,00ff00-绿,0000ff-蓝
- rgb(r,g,b)
- 取值0-255;
- rgb(255,0,0)-红,rgb(0,255,0)绿,rgb(0,0,255)蓝
- rgba(r,g,b,0~1)
- a代表透明,取值0~1.
- text-decoration文本装饰:
- none无;
- underline下划线;
- line-through中划线;
- overline上划线;
- text-indent首行缩进:
- 取值最好设置为2em;
- text-align文本水平对齐方式:
- left左对齐(默认值);
- center居中对齐;
- right右对齐;
- justify两端对齐;
默认值修改
-
ul: ul {
padding: 0;
margin: 0;
list-style: none;
}
-
i: i {
font-style: normal;
}