前端入门学习之css基础篇——day02

语义化

1. 定义:用合理的标签和属性去格式化文档(组合文档结构)
2. 语义化的好处:
   1. 在CSS样式丢失的情况下,依然能保证基本文档结构;
   2. 增强代码的可读性,有利于后期维护,团队协作;
   3. 有利于搜索引擎优化(机器读懂)
   4. 有利于用户体验(alt,title)

css基础

1. Cascading style sheet级联样式表,负责表现层,用于定义样式结构,图片和文字样式;

2. 语法:选择器(样式声明组);

3. 引入样式的方式:

   1. 行间(内联,内嵌):

      1. 位置:放于开始标签的内部;
      2. 语法格式:style=“具体样式”;
      3. 适用于:处理单个元素用于的特殊样式,需要几个就复制几次;
      4. 特点:结构表现不分离

   2. 内部:

      1. 位置:放于head标签内部;
      2. 语法格式:

字体样式

1. 字体,字体系列: font-family
   1. 语法格式->font-family: “宋体”;
   2. 常用字体:
      1. 微软雅黑(Microsoft YaHei);
      2. 宋体(simsun);
      3. Arial
   3. 字体名称包含汉子,空格,特殊符号,用引号包含;
   4. 回退机制:多种字体用逗号隔开,如果第一个字体系统未安装,将显示第二个字体
2. 字号:font-size
   1. 单位为像素px或者是百分比(继承父元素的字号)->font-size: 30px;
   2. 谷歌浏览器默认最小字号12px,大部分浏览器默认字号为16px;
   3. 不允许赋值;
   4. em父元素字号的几倍:2em表示父元素的2倍字号 2em=200%;
3. 字体风格:font-style
   1. normal正常;
   2. litalic斜体;
4. 字体加粗:font-weight
   1. nomal正常;
   2. bold粗体显示;
   3. 100-900 9级自重
      1. 400对应nomal正常
      2. 700对应bold粗体

文本样式

1. line-height行高:
   1. 定义:文字行基线直接的距离;
   2. 作用:用来控制文字行之间距离;
   3. 不允许负值;
   4. 取值可以是px,百分比(相对于当前元素的字号),数字(无单位,理解为倍数),em->相对于元素font-size计算;
   5. 测量:行高:文字高度+行间距;
   6. 行高的特性:行高可以实现我们单行文字的垂直居中;

字体简写

1. font:+各项属性
2. 顺序:字体风格,字体加粗,字号/行高,字体
3. 只有当字号和字体同时存在才有效

文本属性

1. line-height;
2. color文本颜色:
   1. 颜色名称:red,yellow…
   2. 十六进制颜色表示:
      1. rrggbb
      2. 红,绿,蓝
      3. 000000-黑色,ffffff白色,ff0000-红色,00ff00-绿,0000ff-蓝
   3. rgb(r,g,b)
      1. 取值0-255;
      2. rgb(255,0,0)-红,rgb(0,255,0)绿,rgb(0,0,255)蓝
   4. rgba(r,g,b,0~1)
      1. a代表透明,取值0~1.
3. text-decoration文本装饰:
   1. none无;
   2. underline下划线;
   3. line-through中划线;
   4. overline上划线;
4. text-indent首行缩进:
   1. 取值最好设置为2em;
5. text-align文本水平对齐方式:
   1. left左对齐(默认值);
   2. center居中对齐;
   3. right右对齐;
   4. justify两端对齐;

默认值修改

1. ul: ul {

   ​ padding: 0;

   ​ margin: 0;

   ​ list-style: none;

   ​ }

2. i: i {

   ​ font-style: normal;

   ​ }