1、CSS：层叠样式表（Cascading style sheets）。

2、CSS写在style标签中，style标签一般写在head标签里面，title标签下面。

3、体验CSS:

                     p {     color: yellow;     background-color: aqua;     font-size: 30px;     width: 300px;     height: 300px; }        
这是一个p标签

4、CSS引入方式：

▽  内嵌式    CSS写在style标签中

•   提示:  style标签虽然可以写在页面任意位置，但是通常约定写在 head标签中

                     p {     color: yellow;     background-color: aqua;     font-size: 30px;     width: 300px;     height: 300px; }    

▽  外联式: CSS写在一个单独的.css文件中

•   提示:需要通过link标签在网页中引入

/*my.css*/p {    color: red;    background-color: aqua;    font-size: 30px;    width: 300px;    height: 300px;}

                        
这是p标签

▽  行内式:  CSS写在标签的style属性中

这是div标签

5、基础选择器：

        1）标签选择器：

    p { color: blue;    }

        2）类选择器：

                     .red {     color: red; } .size {     font-size: 66px; }        
111111
        
222222

注意：一个标签可以使用多个类名，需要空格隔开即可。

        3）id选择器：

                     #blue {     color: blue; }        
这是一个div标签

注意：id属性值不可重复。

        4）通配符选择器： 

                     * {     margin: 0;     padding: 0;     color: red; }        
这是一个标题
    
这是一个p标签
    
这是一个div标签
    这是一个span标签

6、文字样式：

        1）字体大小（font-size）：浏览器默认字号是16。

        2）字体粗细（font-weight）:

                正常：normal  /  400；    加粗： bold   /  700

        3）字体样式（font-style）：

                正常（默认值）：normal；   倾斜：italic

        4）字体系列（font-family）：

    div { /* 如果用户电脑没有安装微软雅黑，就按黑体显示文字 */ /* 如果电脑没有安装黑体，就按任意一种非衬线字体系列显示 */ font-family: 微软雅黑,黑体,sans-serif;    }

        5）样式的层叠问题：

                如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效。

        6）font复合属性（font字体相关属性的连写）：

•         一个属性冒号后面书写多个值的写法。
  •  取值： font: style weight size family;
  • 省略要求：只能省略前两个，省略了相当于设置了默认值。

    p { /* font-style: italic;    font-weight: 700;    font-size: 66px;    font-family: 宋体;  */      /* font: style weight size family; */ font: italic 700 66px 宋体; /* 省略 */ font: 66px 微软雅黑;    }

7、文本样式：

        1）文本缩进（text-indent）：

                取值：① 数字 + px ;    ② 数字 + em (推荐： 1 em = 当前标签的 font-size 的大小)

    p { /*  首行缩进2个字 em：一个字的大小  */ text-indent: 2em;    }

        2）文本水平对齐方式（text-align）：

•   text-align: center; 能让哪些元素水平居中？
  • 文本
  • span标签、a标签
  • input标签、img标签

    h1 { text-align: left;    }    h2 { text-align: right;    }    h3 { text-align: center;    }

        3）文本修饰（text-decoration）：

 注意：开发中会使用text-decoration：none；清除a标签默认的下划线。

    div { text-decoration: underline;    }    p { text-decoration: line-through;    }    h2 { text-decoration: overline;    }    a { text-decoration: none;    }

8、行高（line-height）：

    p { text-indent: 2em; /* line-height: 50px; */ /* 自己字号的1.5倍 */ line-height: 1.5; /* 可取消上下间距 */ line-height: 1;    }

注意：如果同时设置了行高和font连写，注意覆盖问题。

font: style weight size/line-height family;

/* font: style weight size/line-height family; *//* 66px 宋体 倾斜 加粗 行高是2倍 */font: italic 700 66px/2 宋体;

拓展

1、颜色的拓展取值（color、backgroud-color）（了解）：

 2、标签水平居中方法总结: margin: 0 auto;

▽   如果需要让div、p、h (大盒子)水平居中?

•   可以通过margin : 0 auto;实现。

▽  注意点:

        1. 如果需要让div、p、h (大盒子)水平居中，直接给当前元素本身设置即可。

        2. margin: 0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度。