CSS知识点汇总 (全是干货O(∩_∩)O~ )
2018-06-24 01:02:11来源：未知 阅读 ()
一、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（平铺）
【铺满和平铺区别】
平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标，
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
