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的指导手册觉得最准确,现在我就把这部分知识做 ...
随机推荐
- 国产数据库-KingbaseES在linux下的安装
将KingbaseES软件从windows中传至Linux中并解压 [root@localhost ~]# ls anaconda-ks.cfg install.log.syslog Desktop ...
- ORA-01555经典错误
--创建undo表空间时固定表空间的大小 sys@TDB112>create undo tablespace undo_small 2 datafile'/u01/app/oracle/ora ...
- MyEclipse 2014去除derby
在MyEclipse安装目录下打开configuration\org.eclipse.equinox.simpleconfigurator\bundles.info 搜索derby找到com.genu ...
- Flex移动应用程序开发的技巧和窍门(四)
范例文件 flex-mobile-dev-tips-tricks-pt4.zip 这是本系列文章的第四部分,该系列文章涵盖Flex移动开发的秘诀与窍门. 第一部分关注切换视图以及切换执行应用时的数据处 ...
- 走进React
走进React React是一个构建用户界面的JavaScript库,是Facebook公司在2013年5月在github上开源的.其特点如下: 高效--React通过对DOM的模拟,最大程度地减少和 ...
- 穷举 迭代 while
for循环拥有两类: 穷举: 把所有可能的情况都走一遍,使用if条件筛选出来满足条件的情况. 例:1.单位给发了一张150元购物卡,拿着到超市买三类洗化用品.洗发水15元,香皂2元,牙刷5元.求刚好花 ...
- ThreadLocal模式的原理
在JDK的早期版本中,提供了一种解决多线程并发问题的方案:java.lang.ThreadLocal类.ThreadLocal类在维护变量时,实际使用了当前线程(Thread)中的一个叫做Thread ...
- C++编程练习(1)----“实现简单的线性表的顺序存储结构“
线性表的顺序存储结构,指的是用一段地址连续的存储单元依次存储线性表的数据元素. 故可以用数组来实现顺序存储结构. 用C++编写的利用数组实现简单的读取.插入和删除功能的线性表. #include< ...
- C++ 头文件系列(iosfwd)
简介 输入输出历来都是语言的重要部分,在C++中,该库也是占据了相当大的一部分. C++的输入输出库是其遵循面向对象设计的结果,并结合了泛型编程. 以下是这些库类的关系图(箭头标示继承,白框表示摸板, ...
- 基于 GCDAsyncSocket，简单实现类似《你猜我画》的 socket 数据传输
一.前言 Socket Socket 是对 TCP/IP 协议的封装,其中IP协议对应为网络层,TCP 协议对应为传输层,而我们常用的HTTP协议,是位于应用层,在七层模型中HTTP协议是基于 TCP ...