CSS知识点汇总 (全是干货O(∩

一、CSS选择器

【选择器的命名规则】
1、只能有字母数字下划线组成，不能有其他任何特殊字符
2、开头不能是数字

【通用选择器】
1、写法：*{}
2、作用：选中页面中的所有标签(大范围修改)
3、优先级：最低，，低于所有选择器
eg：
{
font-size: 20px;
}

【标签选择器】
1、写法：HTML标签名{样式属性：样式属性值;....}
2、作用：选中页面中所有的对应标签
eg：
li{
color: red;
}

【类选择器class选择器】
1、写法：.选择器名称{}
调用：在需要改变样式的标签上，使用class"选择器名称"挑用对应选择器
2、作用：修改所有调用选择器的标签
3、优先级高于标签选择器
.li{
color: blue;
}
【ID选择器】
1、写法：#选择器名称{}
调用：在需要改变样式的标签上，使用id='选择器名称'调用对应选择器
2、注意事项：id是唯一的，同一页面，只能有一个ID
3、优先级：大于class选择器
#li{
color: yellow;
}
【后代选择器】常用
1、写法：选择器1 选择器2 选择器3...{}
例如：div .li{}需满足，div里面的class="li"的元素，class="li"的元素可以是div的子代，
也可以是div的后代(孙代往后。。。)

div .li{
color: red;
}
【子代选择器】不常用
1、写法：选择器1> 选择器2 >选择器3...{}
例如：div .ul{}则，ul必须是div的直接子代，孙代以后不选中
div .ul{
color: black;
}
【交集选择器】
1、写法：选择器1选择器2...{}
例如：.li#li{}元素必须同时具备class="li"并且id="li"才能生效
.li#li{
color: red;
}
【并集选择器】
1、写法：选择器1选择器2,...{}
例如：.li，#li{}元素只要具备class="li"或者id="li"就能生效
.li,#li{
color: red;
}

【选择器的优先级】
1、第一原则：近着优先，最内存选择器永远比外层优先
例：div ul li>div #ul ,li在ul内层,所以li标签选择器,能覆盖外层id选择器
2、当作用在同一层时，ID选择器>class选择器>标签选择器
例:div #li>div ul .li>div ul li只要最后一个选择器，都作用在li上，
那无论之前有多少层选择器嵌套均没有远近关系
3、当作用于同一层，且最后一层为同等选择器(均为class或id或标签)
例：div ul .li>div .li作用范围选的越精准，则优先级越高
4、当优先级完全相同时，写在后面的选择器，会覆盖前面的选择器

【伪类选择器】

1、写法：选择器名称：伪类状态{}

常见的伪类状态：

link-未访问状态visited-已访问状态hover-鼠标指上状态

active-激活选定状态（鼠标点下去未松开）focus-获得焦点时（input常用）

2、超链接多种伪类共存的顺序：link（visited）-hover-active

<head>

</head?

<body>

<a href="QQ图片20170301140846.gif">这是一个超链接 </a>

<body>

/*当li有hover事件时，li的后代元素div样式发生变化*/

eg:

二、CSS文本属性：

00%=16px（浏览器）

长度单位：px，像素

颜色单位：

1、十六进制：#ff红色ff绿色ff蓝色0-9 a-f #FFFFFF #FFF分别对应红绿蓝比例最常用

2、直接写颜色英文名字：red

3、RGB颜色:RGB（0-255，0-255，0-255)三原色

RGBA(0-255，0-255，0-255，0-1)四位数表示透明度，0全透明1不透明

尺寸属性：

width，min-width，max-width height

【常用的文本属性】

1、字体、字号：

font（缩写形式）

font-weight（粗细）字体的粗细可选属性值：bold加粗lighter细体100-900数值（400正常，700bold）

font-size（大小） **px **%（浏览器默认字体大小的百分比，绝大部分默认16px）

font-family（字体系列）字体族，设置字体。

>>多个字体样式之间用逗号分隔，浏览器解析时，会从左往右依次解析，选择可用字体

>>一般前面使用具体字体名称，最后一个使用字体族类名称

（常用字体族名称：衬线体serif 非衬线体san-serif（常用）等宽体monospace）

例如：font-family：Arial，"Microsoft Yahei"，sans-serif；

font-style（字体样式）正常normal斜体italic

（以下了解）

font-varient:small-caps;将字母转为小型大写字体

font缩写形式:font-style，font-variant，font-weight，font-size，line-height，font-family

>>>注意事项

①顺序必须按照上述顺序

②多个样式之间用空格分隔，而且font-size/line-height必须作为一对用/分割

③font-size和font-family必须指定，其他样式不指定将采用默认样式显示

>>>例如：font:italic bold 75%/1.8 "Microsoft Yahei"，sans-serif；

斜体加粗字号/行高字体族（微软雅黑，非衬线）

2、字体颜色：

color

opacity 需要配合color(透明度 css3)0-1之间的数字调整时,控件以及子控件均会透明，

而使用rgba调整时，只会使本控件透明，子控件不会发生透明变化

3、行距、对齐等：

line-height （行高）①像素单位48px②不带px正常行高的倍数③百分数同2

>>典型应用，调整控件中文字垂直居中的方式：控件的height=控件的line-height

text-align （对齐）块级元素控件中文字的水平对齐方式left center right

letter-spacing （字符间距）字与字之间的间距

text-decoration （文本修饰）下划线下划线overline

line-through删除线

overflow 控制超出范围文本的显示方式（auto根据文字多少自动选择滚动条scroll始终显示滚动条hedden超出范围文本隐藏）可以通过overflow-x/设置水平垂直方向

text-overflow：设置多余文字的显示方式clip裁剪掉ellipsis省略号

【重点】让每行多余文字显示省略号：三步

①white-space: nowrap;如果是中文，需设置行末不断行

②overflow:hidden;设置控件超出范围隐藏

③text-overflow:ellipsis;设置多余文本显示省略号

white-space: nowrap; 修改中文行末不断行显示

word-break：设置英文行末断行：浏览器默认在空格处断行，break-all允许在单词内换行。

（上记住下会用）

text-shadow（文本阴影）四个属性值：

①水平阴影距离必选，数值越大，阴影右移

②垂直阴影距离必选，数值越大，阴影下移

③阴影模糊距离可选，数值越大，阴影越模糊。默认为0，不模糊

④阴影颜色可选，默认为黑色

2px水平5px垂直 5px阴影的模糊距离green

text-indent：首行缩进，可用像素值调整缩进大小

text-stroke：描边的粗细，描边的颜色

三、背景属性

【CSS常用背景属性】

background （缩写形式）

1、background-color（背景色）

2、background-image: （背景图）

url（图片地址相对路径）；背景图与背景色同时存在时，背景图会覆盖背景色

3、background-repeat（背景图重复方式）：

repeat平铺（默认）no-repeat不平铺repeat-x水平平铺y垂直平铺

4、background-size（背景图大小）

【指定宽度、高度】

>>>宽高的写法：第一个属性值为宽度，第二个属性值为高度

可以直接①写像素②写百分比（父容器宽高的百分比）cover覆盖contain

>>>当只有一个属性值时，默认为宽度、高度等比缩放

当有两个属性值时，会按照指定的宽度高度进行压缩/拉伸显示

【其他属性值】

>>>contain：图片等比缩放，缩放到宽或高的某一边等于父容器的宽高，另一边按照图片大小缩放（可能导致空余部分区域无法覆盖）

>>>cover：图片等比缩放，使背景图像完全覆盖背景区域（可能导致背景图部分区域无法显示）

5、background-position（位置坐标、偏移量）

>>>指定位置：left/center/right top/center/bottom

当只写一个属性值时，另一个默认居中

>>>填写坐标像素：水平位置垂直位置（像素或百分比形式）

① 当只写一个属性值时，默认写的是水平方向垂直居中

②当使用像素时：图片的左上角往各个方向移动的实际距离（左负右正，上负下正）

水平方向：正数右移，负数左移垂直方向：正数下移，负数上移

③当使用百分数时，一般只能是正数。代表去掉图片后剩余空白距离的分布比例

例如：background-position：30%；水平方向去掉图片后，剩余区域3:7分

（6，7了解）

6、background-origin设置背景图的定位方式。

border-box从边框外缘开始显示，padding-box从边框内缘开始，content从文字内容开始

从背景图哪个位置开始裁切

7、background-clip裁切背景图和背景色显示区域。

border-box从边框外缘开始，padding-box从边框内缘开始显示，content-box从文字内容区开始显示。不在显示区域内的背景图或背景色，会被裁切不显示

background-origin不改变背景图显示区域大小，只是决定左上角定位位置

background-clip不改变定位位置，只是通过裁切显示部分区域

添加边框：

border: 30px green dotted;

四、盒子模型

[margin ]外边距

1、写一个值：上下左右四个方向均为指定数值

2、写两个数值：第一个数=上下margin，第二个数=左右margin

3、写三个数值：上右下左边默认等于右边

4、写四个数值：上右下左四个方向顺时针

5.margin：0 auto；块级盒子，在父容器中水平居中

[border 边框]

1、三个属性值：宽度、样式、颜色，原则上不能少。顺序可随意安排

solid 实线框

dashed虚线框

2、可以用top right left bottom修改四个方向

[padding 内边框]

1、padding为内边距，会使盒模型的整个可视区域变大，使用时需要注意盒模型实际显示的区间大小

2、其他使用同margin

【Border-radius】

1、可以接受8个属性值：X轴（左上、右上、右下、左下）/Y轴同X

例如：border-radius：50px 50px 50px 50px/50px 50px 50px 50px；

2、只写X轴时Y轴默认=X轴，只写左上角，默认=右下角。只写一个角默认对角相等

例如 border-radius：50px 0px 50px 0px/=border-radius：50px 0px 50px 0px/50px 0px 50px 0px

3、只写一个数，默认八个数默认相等

【box-shadow】盒子阴影

六个属性值，空格分割：

X轴阴影距离：（必选）可正可负，正——右移，负——左移

Y轴阴影距离：（必选）可正可负，正——下移，负——上移

阴影模糊距离：（可选）只能为正，默认为0，数值越大，阴影越模糊

阴影扩展半径：（可选）可正可负，默认为0，数值增大，阴影扩大，数值减少，阴影缩小

阴影颜色：（可选）默认为黑色

内外阴影：（可选）可选值，inset（内阴影）默认为外阴影

[border-image]图片边框

十个属性：

①图片路径：url()

②图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角（不会进行任何拉伸），四个边分别对应边框的四边（根据设置进行拉伸/平铺/铺满）

写的时候不能带像素单位

③图片边框的宽度：4个值，分别代表上右下左四条边框，可以省略，默认等于切片宽度

写的时候必须带像素单位

④边框背景重复方式：stretch（拉伸）、round（铺满）、repeat（平铺）

【铺满和平铺区别】

平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标，

巴特西

CSS知识点汇总 (全是干货O(∩_∩)O~ )

最新文章

热门文章