CSS：层叠样式表

���谓层叠 即叠加的意思，表示样式可以一层一层的层叠覆盖

css写在style标签中，style标签一般写在head标签里面，title标签下面

            Document            p{            /*  */            color: white;            /*  */            font-size: 30px;            /*  */            background-color: black;            /*  */            width: 300px;            height: 400;        }        
这是一个p标签

CSS的引入方式：

内嵌式：CSS写在style标签中

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

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

需要通过link标签在网页中引入

            Document//stylesheet 样式表        
        活在当下     

p{    color: aquamarine;}

 行内式：CSS写在标签的style属性中 配合js使用

            行内式    
This is yellowgreen.

CSS常见三种引入方式的特点区别有哪些？

引入方式	书写位置	作用范围	使用场景
内嵌式	CSS写在style标签中	当前页面	小案例
外联式	CSS写在单独的css文件中，通过link标签引入	多个页面	项目中
行内式	CSS写在标签的style属性中	当前标签	配合js使用

 基础选择器：

1.标签选择器

结构：标签名{ css 属性名：属性值；}

作用：通过标签名，找到页面中所有这类的标签，设置样式

注意点：

1.标签选择器选择的是一类标签，而不是单独某一个

2.标签选择器无论嵌套关系有多深，都能找到对应的标签

            Document        /* 选择器{} */    /* 标签选择器就是以标签名命名的选择器 */    /* 标签选择器选中的所有的这个标签都生效 */        p{            color: chocolate;            background-color: bisque;            font-size: 30px;        }        
这是一个p标签
    
这也是一个p标签

2.类选择器

结构：.类名{ css属性名：属性值；}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：

1.所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

2.类名可以由数字 字母 下划线 中划线组成，但是不能以数字或者中划线开头

3.一个标签可以同时有多个类名，类名之间以空格隔开

4.类名可以重复，一个类选择器可以同时选中多个标签

            类选择器            .color{            color: lightcoral;                    }        .size{            font-size: 20px;        }        
这是一个p标签
    这是一个p标签

3.id选择器

结构：#id属性值{ css属性名：属性值；}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

1.所有标签上都有id属性

2.id属性值类似于身份证号，在一个页面 中是唯一的，不可重复

3.一个标签上只能有一个id属性值

4.一个id选择器只能选择一个标签

4.通配符选择器

结构：*{css 属性名：属性值；}

作用：找到页面中所有的标签，设置样式

注意点：

1.开发中使用极少，只会在极特殊情况下才会用到

2.在小页面中可能会用于去除标签默认的margin和padding

字体和文本样式

1.字体大小

属性名：font-size

取值：数字+px

注意点：

谷歌浏览器默认文字大小是16px

单位需要设置，否则无效

2.字体粗细

属性名：font-weignt

关键字:

正常	normal
加粗	bold

纯数字：

正常	400
加粗	700

注意点：

不是所有字体都提供了九种粗细，因此部分取值页面中无变化

实际开发中：正常加粗两种取值使用最多

3.字体样式（是否倾斜）

属性名：font-style

取值：

正常（默认）：normal

倾斜：italic

字体系列 font-family

样式的层叠问题

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

字体font相关属性的连写

属性名：font（复合属性）

取值：font：style weight size family；

省略要求：只能省略前两个，如果省略了相当于

设置了默认值

注意点：如果需要同时设置单独和连写形式

要么把单独的样式写在连写的下面

要么把单独的样式写在连写的里面

文本缩进

属性名：text-indent

取值：

*数字+px

*数字+em（推荐：1em=当前标签的font-size的大小）

            Document            p{            text-indent: 2em;        }        
神舟十七号航天员汤洪波、唐胜杰、江新林密切协同，在空间站机械臂和地面科研人员的配合支持下，完成全部既定任务，航天员汤洪波、江新林安全返回问天实验舱，出舱活动取得圆满成功

文本水平对齐方式

属性名：text-align

取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意点：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

            Document            h1{            text-align: center;        }        p{            text-align: right;        }        p{            text-align: left;        }        
新闻标题
    
这是一个p标签
    这是一个p标签

文本修饰

属性名：text-decoration

取值：

属性值	效果
underline	下划线（常用）
line-through	删除线（不常用）
overline	上划线
none	无装饰线（常用）

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

            Document            p{            text-decoration: underline;        }        p{            text-decoration: line-through;        }        h2{            text-decoration: overline;        }        a{            text-decoration: none;        }        
ppppp
    ppp    
h2h2h2
    我是超链接 点点看

水平居中的方法总结 text-align：center

text-align：center能让哪些元素水平居中？

1.文本

2.span标签 a标签

3.input标签 img标签

注意点：

如果需要让以上元素水平居中，text-align：center需要给以上元素的父元素设置

            Document      p{        text-align: center;    }    body{        text-align: center;    }      
图片
    

行高

作用：控制一行的上下间距

属性名：line-height

取值：

*数字+px

*倍数

应用：1.让单行文本垂直居中可以设置line-height：文字父元素高度

2.网页精准布局时，会设置line-height：1可以取消上下间距

行高与font连写的注意点：

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

*font：style weight size/line-height family；

            Document            p{           font: italic bold 32px/1.5 宋体;        }        
没错。原子弹爆炸的条件既不是铀的“临界质量”，也不是铀的“临界密度”，而是基于“碰撞截面”和铀块形状、反射层 / 反射率等等共同决定的一个复杂参数。        什么叫“碰撞截面”呢？                还记得高中学过的卢瑟福实验吗？                没错，用α粒子轰击金箔，这才发现金箔对α粒子几乎是透明的——然后，揭示了一个事实：原子核是一个极小极小的核，原子之间是极其空旷的。                换句话说，固体中，原子和原子并不是像这样，一堆实心小球堆叠起来的我们知道，想要引起铀核裂变，就需要让中子击中原子核。    

标签水平居中方法总结 margin ：0 auto

如果需要让p p h（大盒子）水平居中？

可以通过margin ：0 auto；实现

注意点：

1.需要让p p h （大盒子）水平居中，直接给当前元素本身设置即可

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

            Document            p{           background-color: brown;           width: 600px;           height: 400px;           margin: 0 auto;        }