css基础——常见样式以及行标签、行块标签、行块标签的特点

目录

1.css的常见样式

（1）. 背景样式

（2）. 文本的有关样式内容：

（2）. 常用选择器：

2.行块标签的特点：

3. 块标签特点：                                                       

4. 行标签/内联标签：            

---

1.css的常见样式

（1）. 背景样式

      1）.背景的颜色：background-color；

      2）.背景图的设置：background-image；

             背景图的位置：bcakground-position；

             背景图的大小：background-size; 其中contain是指背景图的长边占满父级，cover是指短边占满父级；

       3）.背景透明度：opacity 是指整体透明度（包括背景以及文本内容）；

             设置背景的透明：background-color: rgba(颜色，颜色，颜色，透明度)；

（2）. 文本的有关样式内容：

       1）. 字体颜色：在标签中直接设置： color，是对标签内的文本的颜色进行设置；

       2）. 字体大小：font-size;

       3）. 字体样式：font-family（在设置文本的字体时通常写入多个字体样式，以便有适用的字体样式显示在页面上）；

       4）. 字体加粗：font-weight; 包括：lighter normal 以及默认值为400；

       5）. 对齐方式：首行缩进：text-indent

       6）. 行高：行高默认是字体大小的1.2倍数；

字体是相对于行高来居中的，当标签没有高度时，是行高撑开了高度，而不是内容；

当标签的高度和行高相等时文本垂直居中；

       7）. 字体间距：

       8）.文本装饰线：例如a标签本身具有文本装饰线，如果不需要文本装饰线的话，可以使用text-decoration:underline；在取消文本装饰线；

       9）. 文本大小写字母

      10）.空白符的处理：with-space; 其中有: normal; pre（保留格式）; nowpre（不换行）; wrap（换行）

（2）. 常用选择器：

       1）. 通配选择器：*{}；

       2）. id选择器； class选择器；

选择器的权重：内联样式>id>class>div;

       3)  . 后代选择器；

       4）. 群组选择器；

       5）. 子代选择器；

2.行块标签的特点：

      1）. 同排列显示，遇到父级边框时换行，没有宽高时子级内容撑起宽高；换行是被解析

      2）. 只给宽度或高度，会等比例变化

3. 块标签特点：

快标签：div,  h1~h6,   p,  ul li, ol li, article, aside,  nav,  header,  footer

特点：独占一行：默认宽度占满整行，高度为0时，子级美容撑开高度

4. 行标签/内联标签：

特点：同排列显示，遇到父级边界换行；不支持宽高，内容撑开高度；不支持上下外边距，不正常显示上下内边距；换行解析。