CSS知识点汇总 (全是干货O(∩_∩)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~ )的更多相关文章
- 前端开发 JavaScript 干货知识点汇总
很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...
- python全栈开发 * 10知识点汇总 * 180612
10 函数进阶 知识点汇总 一.动态参数 形参的第三种1.动态接收位置传参 表达:*args (在参数位置编写 * 表⽰接收任意内容) (1)动态位置参数def eat(*args): print(a ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No5-No7
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No8-No9
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No10-No11
系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...
- CSS hack 汇总
1, IE条件注释法,微软官方推荐的hack方式. <!]> IE6以及IE6以上版本可识别 <![endif]--> <!]> 仅IE7可识别 <![end ...
- nginx几个知识点汇总
WHY? 为什么用Nginx而不用LVS? 7点理由足以说明一切:1 .高并发连接: 官方测试能够支撑 5 万并发连接,在实际生产环境中跑到 2 - 3 万并发连接数.?2 .内存消耗少: 在 3 万 ...
- 清华大学OS操作系统实验lab1练习知识点汇总
lab1知识点汇总 还是有很多问题,但是我觉得我需要在查看更多资料后回来再理解,学这个也学了一周了,看了大量的资料...还是它们自己的80386手册和lab的指导手册觉得最准确,现在我就把这部分知识做 ...
随机推荐
- Prolog 外部不能有 DOCTYPE 声明。处理资源 'http://192.168.115.152:8082/api/EmpApi.aspx' 时出错。第 3 行，位置: 11
在Default.aspx代码中删除以下代码(其他窗口也是这样删除): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- jdbc数据连接池dbcp要导入的jar包
jdbc数据连接池dbcp要导入的jar包 只用导入commons-dbcp-x.y.z.jarcommons-pool-a.b.jar
- Java的IO操作中有面向字节(Byte)和面向字符(Character)两种方式
解析:Java的IO操作中有面向字节(Byte)和面向字符(Character)两种方式.面向字节的操作为以8位为单位对二进制的数据进行操作,对数据不进行转换,这些类都是InputStream和Out ...
- ER图，以及转化成关系模式
1.找出条件中的实体(矩形),属性(椭圆),关系(菱形)关系分为1:1,1:N,M:N,列出ER图 2. -1:1联系的转换方法 -两个实体分别转化为一个关系模式,属性即是本来的属性 -关系可以与任意 ...
- puppet来管理文件和软件包
puppet来管理文件和软件包 1 exec的使用,可以运行shell命令 为配置文件添加配置,指示写了关键部分,其他配置省略没写 代码示例如下: [root@pup manifests]# cat ...
- 在ubuntu linux 中编写一个自己的python脚本
在ubuntu linux 中编写一个自己的简单的bash脚本. 实现功能:终端中输入简单的命令(以pmpy为例(play music python),为了区别之前说的bash脚本添加了py后缀),来 ...
- 在C++中反射调用.NET（三）
在.NET与C++之间传输集合数据 上一篇<在C++中反射调用.NET(二)>中,我们尝试了反射调用一个返回DTO对象的.NET方法,今天来看看如何在.NET与C++之间传输集合数据. 使 ...
- Codeforce 712A Memory and Crow
A. Memory and Crow time limit per test:2 seconds memory limit per test:256 megabytes input:standard ...
- 源码(03) -- java.util.Collection<E>
java.util.Collection<E> 源码分析(JDK1.7) -------------------------------------------------------- ...
- 使用阿里云的Maven仓库加速Spark编译过程
前言 在国内编译Spark项目需要从Maven源下载很多依赖包,官方源在国内大环境下的下载速度大家都懂得,那个煎熬啊,简直是浪费生命. 如果你的下载速度很快,你现在就可以无视这篇文章了. 阿里云给国内 ...