Css常用样式归纳总结

CSS概述

CSS(层叠样式表)：在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

CSS书写规则

1.选择器通常是需要改变样式的HTML 元素

2.声明组以大括号（{}）括起来

3.每条声明都由一个属性和一个值组成

4.CSS声明总是以分号（;）结束

CSS三大特性

1.继承性：子元素有默认继承父元素样式的效果

2.层叠性：给同一个标签设置了相同的属性，此时样式会覆盖，最后写在下面的会生效；给同一个标签设置了不同的样式，此时样式会叠加，最后会共同作用在标签上

3.优先级：标签选择器有优先级，继承<通配符选择器<标签选择器<类选择器<id选择器<!important（!important写在属性值的后面，分号的前面，!important不能提升继承的优先级，只要是继承，优先级最低。）

CSS引入方式

样式优先级：行内样式>内嵌样式>外联样式        ——就近原则

1.内嵌样式：css写在style标签中，style标签写在head标签里，title标签的下面

<style type="text/css">
        样式
</style>

---

2.外联样式：css写在一个单独的xxx.css文件中，此时需要通过link标签引入

<link rel="stylesheet" type="text/css" href=" "/>

---

3.行内样式：css写在标签的style属性中

<p style=" ">xxx</p>

---

CSS基础选择器

选择器的作用：选中页面中对应的标签，才能设置它的样式

css选择器优先级：id选择器>类选择器>标签选择器

1.标签选择器：通过标签名找到页面中所有这一类标签设置样式，找的是一类标签，不能单独找到某一个，标签选择器无论嵌套关系有多深，都能找到对应的标签。

2.类（class）选择器：找到页面中所有带有该类名的标签设置样式，所有标签都有class标签，class属性的属性值就叫类名，一个标签可以有多个类名，类名之间通过空格隔开，一个类选择器可以同时选中多个标签。

3.id选择器：找到页面中带有该id属性值的标签设置样式，id属性值相当于是身份证号码，在一个页面中是唯一的，不可重复的，一个标签上只能有一个id属性值，一个id选择器只能选中一个标签。

4.通配符选择器（*）：找到页面中的所有标签

选择器进阶

1.复合选择器：

（1）后代选择器，结构：选择器1 选择器2 {css}，先通过选择器1找到一堆标签，再一堆标签的后代（儿子、孙子、重孙子......）中找到满足选择器2的标签，设置样式

（2）子代选择器，结构：选择器1>选择器2 {css}，先通过选择器1找到一堆标签，再一堆标签的子代（儿子）中找到满足选择器2的标签，设置样式

2.并集选择器，结构：选择器1,选择器2 {css}，找到选择器1和选择器2中所有对应的标签设置样式

3.交集选择器，结构：选择器1选择器2 {css}，找到页面中既满足选择器1又满足选择器2的标签设置样式，多个选择器中间不能有空格，如果交集选择器中有标签选择器，此时标签选择器必须写在第一个。

4.hover伪类选择器：鼠标悬停的状态，书写顺序不可以改变！

（1）单击访问前 link：格式：a:link{};        link可以省略；

（2）单击访问后 visited：格式：a:visited{};        可以改变颜色，其他功能被限制；

（3）鼠标悬浮其上 hover：格式：a:hover{};        使用多；

（4）单击未释放 active：格式：a:active{};        使用少，无意义；

字体样式

（1）font-size：设置字体大小，取值：数字+px

（2）font-weight：设置字体粗细，取值：normal（正常）、bold（加粗）、纯数字400（正常）、700（加粗）

（3）font-style：字体样式，取值：normal（正常）、italic（倾斜）

（4）font-family：设置字体类型，取值：黑体、宋体、楷体等

文本样式

（1）text-indent：文本缩进，取值：数字+px、数字+em（1em=当前font-size的大小）

（2）text-align：文本水平对齐方式，取值：left（左对齐）、center（居中对齐）、right（右对齐）

（3）text-decoration：文本修饰，取值：underline（下划线）、line-through（删除线）、none（没有效果，也可以用来清除a标签默认的下划线）、overline（上划线）

（4）line-height：设置行高，取值：数字+px、倍数（当前文字大小的倍数）

（5）color：设置颜色，取值：RGB表示法、RGBA表示法、十六进制表示法、red、yellow等

背景样式

（1）background-color：背景颜色，取值：RGB表示法、RGBA表示法、十六进制表示法、red等

（2）background-image：背景图片，取值：url（图片的路径）

（3）background-repeat：背景平铺，取值：repeat（平铺）、no-repeat（不平铺）、repeat-x（沿着水平方向平铺）、repeat-y（沿着垂直方向平铺）

（4）background-position：背景位置，取值：west等方位名词、数字+px（坐标，坐标原点为盒子左上角）

元素显示模式

（1）display：block，块级元素，独占一行，宽度默认占满一行，高度默认由内容撑开，可以设置宽高。

（2）display：inline，行内元素，一行可以显示多个，宽度和高度默认都是内容撑开，不可以设置宽高。

（3）display：inline-block：行内块元素，一行可以显示多个，可以设置宽高。

盒子模型

1.content 内容设置，width和height默认设置的是内容部分的宽高

2.border 边框设置，属性连写 border：width style color ，单方向属性设置，border-方位名词（top、right、bottom、left）：width style color

（1）border-style：边框的样式，取值：solid（实线）、dashed（虚线）、dotted（点线）

（2）border-width：边框的粗细

（3）border-color：边框的颜色

3.padding 内边距设置，控制边框与内容之间的距离，单方向属性设置，padding-方位名词

4.margin 外边距设置，控制边框外盒子与盒子之间的距离，单方向属性设置，margin-方位名词

对于行内元素，水平方向的margin和padding布局有效果，垂直方向的布局是无效的！

---

网页标准流

又称网页文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。

---

常见排版规则：

1.块级元素：从上往下，垂直布局，独占一行。

2.行内元素和行内块元素：从左往右，水平布局，空间不够自动折行。

CSS浮动

float：浮动属性，取值：left（左浮动）、right（右浮动）

---

1.浮动的特点：

（1）浮动的元素会脱离标准流，相当于飘到了空中，在标准流中就不占位置

（2）浮动的元素比标准流高出半个级别，可以覆盖标准流中的元素

（3）浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

（4）浮动的元素有特殊的显示效果，一行可以显示多个，可以设置宽高

（5）浮动会受到上面元素边界的影响

（6）浮动的元素不能通过 text-align：center 或者 margin：0 auto 让浮动的元素水平居中

2.清除浮动带来的影响（影响：如果子元素浮动，此时子元素不能撑开标准流的块级父元素）

（1）直接设置父元素的高度

（2）额外标签法，在父元素的最后添加一个块级元素，给添加的块级元素设置清除浮动的核心代码：clear：both，缺点是会在页面中添加额外的标签，会让页面的HTML结构变得复杂。

（3）单伪元素消除法：用伪元素替代了额外标签

.clearfix::after {

        content: '';

        display: block;

        clear: both;

}

---

（4）双伪元素清除法：

.clearfix::before,

.clearfix::after {

        content: "";

        display: table;

}

.clearfix::after {

        clear: both;

}

---

（5）给父元素设置一个属性 overflow：hidden

3.clear：clear属性规定了在元素哪一侧不允许有浮动，取值：none（默认值，允许浮动元素出现在两侧）、left（在左侧不允许浮动元素出现）、right（在右侧不允许浮动元素出现）、both（在左右两侧都不允许浮动元素出现）

CSS定位

（1）position：static

静态定位，标准流中的元素默认就是静态定位，不能配合方位属性实现移动。

（2）position：relative

相对定位，需要配合方位属性实现移动；相对于自己原来的位置进行移动；还占位置，没有脱离标准流。

（3）position：absolute

绝对定位，需要配合方位属性实现移动；如果祖先元素中没有定位，此时相对于浏览器可视区进行移动，如果祖先元素中有定位元素，此时相对于最近有定位的祖先元素进行移动；不占位置，已经脱离了标准流，宽度默认由内容撑开

（4）position：fixed

固定定位，需要配合方位属性实现移动；永远相对于浏览器进行移动；不占位置，已经脱离了标准流，宽度默认由内容撑开

元素的层级关系

标准流元素<浮动元素<定位元素，如果是同种元素，在html结构中写在下面的，层级更高

z-index：z-index属性可以设置定位元素的层级，取值：数字，数字越大，层级越高

装饰

（1）vertical-align：垂直对齐方式，取值：baseline（基线对齐）、top（顶部对齐）、middle（中部对齐）、bottom（底部对齐），注意点：给行内元素或者行内块元素设置

（2）cursor：设置光标类型，取值：default（默认箭头）、pointer（小手，用户可以点击）、text（工字型，用于选择文本）、move（十字光标，用户可以拖拽）

（3）border-radius：设置边框圆角，取值：数字或者百分数

（4）overflow：设置内容超出部分的显示效果，取值：visible（超出部分可见）、hidden（超出部分隐藏）、scroll（显示滚动条）、auto（自动根据内容的多少显示或者隐藏滚动条）

（5）visibility：hidden        元素本身的隐藏属性，虽然隐藏但还占位置

         displa：none        元素隐藏并且不然位置了，相当于消除了

（6）opacity：元素整体透明度，取值0~1（0是完全透明，1完全不透明）