关于CSS（详细篇）

CSS：英文全名，cascading style sheets层叠样式表

WEB标准中的表现标准语言

简单说就是如何修饰网页信息的显示样

CSS的语法：

        选择器（选择符）{属性：属性值；属性：属性值；}

        选择器（选择符）：如果你想用CSS样式应用于特定的HTML元素，首先需要找到该目标元素，在CSS中，执行这一任务的样式规则部分被称为选择器，有的地方也会叫选择符。

        声明： {属性：属性值；}，声明分为属性和属性值；属性是指想要修饰的样式属性，比如宽度、高度、颜色等；每一个属性都有一个值，这个值就是属性值，例如200px、red等。 

CSS的引入样式：

    内部样式：适合案例或者短小的页面开发

        第1步：创建对象

        第2步：在head里面书写标签style，type属性可加可不加

        第3步：在style标签中，直接书写CSS代码，进行修饰

    外部样式：适合整站或者比较长的页面开发

        第1步：创建对象

        第2步：新建一个CSS文件，在CSS文件中不再需要style标签

        第3步：利用link：<link rel="stylesheet" href="css文件的路径" />   relation定义关联性，读文档格式；stylesheet样式表   推荐使用

                    或者   

                    利用import：<style>@import url("css文件的路径")</style>   import导入引入

行内样式、内联样式、嵌入式样式

        创建对象，style作为属性加入标签后：<div style="width:200px;height:200px;"></div>

同时使用内部、外部、行内样式表修饰同一个标签的时候，优先级最高的是行内样式表

当外部和内部样式表同时使用时，按就近原则，哪个CSS样式距离标签近显示哪个样式

CSS选择器的分类

    选择器整体分为5大类：基本选择器、层次选择器、伪类选择器、属性选择器、伪对象（伪元素）选择器......总计20个选择器

基本选择器：

    1、类型选择器（标签选择器）

            以html中的标签作为选择符

            什么时候用：想改变某个元素的默认样式时或者统一文档某个元素的显示效果时

            语法：标签{属性：属性值；}

    2、Class选择器（类选择器）

            什么时候用：想要区分某个或者某个标签时，如想区分两个div

            语法：.class名字{属性：属性值；}  如 ： . box{width : 200px ; }

            Class可以给多个属性值，多个属性值之间用空格隔开。 如 ： <div class="box a1 a3"><div>

                    Class属性值注意点

                            1、不能纯数字开头

                            2、不建议使用中文，容易乱码

                            3、如果需要符号配合，可以使用 -或者_ ，其他符号不可以

                            4、建议命名时，采用语义化命名

    3、Id选择器

            什么时候用：想要区分某个或者某个标签时，如想区分两个div

            语法：# id名字{属性：属性值；}

            注意点：ID有唯一性，有且仅有唯一，属性值只能是一个

    4、通配符

            什么时候用：想让所有标签同时改变样式的时候

            语法：* {属性：属性值；}

    5、子级选择器

            获取父级  获取子级 { }

    6、直属子级选择器

            获取父级 > 获取子级 { }

    7、群组选择器

            什么时候用：当几个元素样式一样时，可以共同调用一个声明，元素之间用逗号分隔

            语法：选择器1，选择器2，选择器3....{属性：属性值；}  如：. box , p , #a2{width : 300px ; }

    8、伪类选择器（变色龙）

            注意：href路径不为空

            link未访问

            visited已访问

            hover滑进/悬停

            active鼠标按住

CSS权重（特殊性）

        什么是权重：权重类似人的体重，是用来衡量CSS代码优先级的一个参考值，权重值越大，代表优先级越高，权重值越小，优先级越低

        表达方式：CSS中四位数字表示权重，权重的表达方式如：0，0，0，0

        权重值比较：id选择器100 > class选择器(类选择器)10 > 类型选择器(标签选择器)1 > 通配符选择器0

                    行内样式>内部样式>外部样式

                    ! important ：权重最高

        规则1：权重不同时，由高到低覆盖

        规则2：权重相同时，就近原则

                    从父级继承过来的样式，是没有权重值的，通配符的权重值都比它要高一些

层次选择器：

    1、后代选择器（包含选择器）

            语法：选择符1  选择符2  {属性：属性值；}

            说明：含义就是选择符1中包含的所有后代选择符2；

    2、子选择器

    3、相邻兄弟选择器

    4、通用兄弟选择器

属性

单一属性

background-color：背景颜色

background-image：背景图片

        background-image：url（）；背景图不占位且是平铺显示

background-repeat：背景图片的平铺

        background-repeat：no-repeat（不平铺） /  repeat（平铺，默认值）  /  repeat-x （横向平铺，水平） /  repeat-y（纵向平铺，垂直）；

background-size：背景图大小

        直接写数值  /    写百分比（占所在盒子宽高的百分比）

background-position：背景图片的定位

        bgckground-pasition：水平位置、垂直位置，可以给负值

        第一个数值是沿X轴移动，正数为图片往右移动，负数为图片往左移动。

        第二个数值是沿Y轴移动，正数为图片往下移动，负数为图片往上移动。

background-attachment：背景图片的固定

        background-attachment：scroll（滚动） /  fixed（固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了）

background-origin：背景图原点

        属性值

            padding-box：背景图从内填充位置开始、

            border-box：背景图从边框位置开始

            content-box：背景图从内容位置开始

        前提：bgckground-attachment的属性值为fixed时，背景图原点没有任何效果

复合属性

一张图片：background：图片  是否平铺   位置/大小  固定  颜色

多张图片：background：图片  是否平铺   位置/大小  固定，图片  是否平铺   位置/大小  固定，图片  是否平铺   位置/大小  固定   颜色

 图片作为行内块元素，相对机械对齐，所以垂直之间会有一个缝隙

  解决方法是vertival-align：top   或者   转为块级

图片溢出属性：

    overflow：visible默认值，会溢出，显示溢出部分

    overflow：hidden，溢出部分隐藏

    overflow：scroll，滚动，显示滚动条

    overflow：auto，自动，内容溢出显示滚动条，内容不溢出没有滚动条

    overflow：inherit：继承父级

    可以调整单个方向：overflow-x  /   overflow-y

    剩余空间：white-space：normal默认值    /     nowrap文本不会换行，直到遇到br标签为止

（补充）

文本设置省略号：

    1、设置宽度

    2、设置文本不换行：white-space：nowrap

    3、溢出部分隐藏：overflow：hidden

    4、溢出文本显示省略号text-overflow：ellipsis；