一、什么是CSS
W3C标准中，倡导有3：其一为内容与表现分离，其二为内容与行为分离，其三为内容结构的语义化。其倡导中第一条的“表现”指的便可以说是CSS。CSS全称Cascading Style Sheets，中文名为层叠样式表，是一种用来表现HTML等文件样式的计算机语言。
二、CSS应用的三种方式
1. 行内样式表
行内样式表将CSS样式与HTML代码完全杂糅在一起，不符合W3C关于内容与表现分离的的基本规则，且不利于网站的维护。但是行内样式表在样式测试方面提供了便利，且优先级最高。不推荐使用。
2. 内部样式表
内部样式表在一定程度上将CSS样式与HTML代码分离，但是分离不够彻底，无法实现样式复用。（样式复用：多个网页共享同一样式。）内部样式表的优先级要低于行内样式表。
3. 外部样式表
外部样式表实现了CSS样式与HTML代码的彻底分离，方便样式复用和网站的维护，符合W3C规范。外部样式表的优先级低于内部样式表。在后续开发中，首推外部样式表。
4. 注意
①除行内样式表，内部样式表与外部样式表的链接均写于HTML的HEAD部分中。
②导入外部样式表时，除type属性可选写外，rel与href属性必须出现。
三、CSS常用选择器
1. 选择器的命名规则
①只能由字母、数字、下划线组成，不能有任何特殊字符；
②开头不能是数字，只能由下划线或者字母开头。
2. 常用选择器
2.1 标签选择器
写法：HTML标签名{}
作用：选中页面中所有的对应标签。
2.3 Class选择器
写法：.选择器名称{}
作用：需要改变样式的标签上使用class="选择器名称"来调用对应选择器。
2.4 Id选择器
写法：#选择器名称{}
作用：需要改变样式的标签上使用id="选择器名称"来调用对应选择器。
2.5 通用选择器
写法：*{}
作用：选中页面中所有标签。
2.6 后代选择器
写法：选择器1 选择器2 选择器3...{}
作用：比如说 div .li{}就表示满足div里面的class="li"的元素样式，其中选择器之间允许隔代。
2.7 子代选择器
写法：选择器1>选择器2>选择器3...{}
作用：用法大致与后代选择器相同，但要注意的是，选择器之间不允许隔代。
2.8 并集选择器
写法：选择器1,选择器2,选择器3...{}
作用：比如说 .li,#li{} 表示具备class="li"或者id="li"的形式便可生效，相当于数学逻辑中的“或”。
2.9 交集选择器
写法：选择器1选择器2选择器3...{}
作用：比如 .li,#li{} 表示必须同时具备class="li"和id="li"的形式可生效，相当于数学逻辑中的“且”。
2.10 伪类选择器
写法：选择器名称:伪类状态{}
常见的伪类状态：①link 未访问状态；②visited 已访问状态；③hover 鼠标指上状态；
④active 激活选定状态；⑤focus 获得焦点时状态(input常用)。
超链接多种伪类共存时的顺序： link/visited→visited/link→hover→active
3. 选择器的优先级
3.1 第一原则：近者优先！最内层选择器>>>>>>>外层！！！
例如：div ul li > div #ul
li在ul内层，所以li标签选择器能覆盖外层id选择器
3.2 当作用在同一层时：ID选择器>class选择器>标签选择器！！！
例如：div #li > div .li > div li
只要最后一个选择器都作用于li上，那无论之前有多少层
选择器嵌套，均没有远近关系。
3.3 当作用于同一层，且最后一层为同等选择器。
例如： div ul .li > div li
作用范围越精准，则优先级更高。
3.4 当优先级完全相同时，写在后面的选择器会覆盖前面的选择器 。
四、CSS属性单位
1. 长度单位：像素px，在某些情况下可以使用百分比。
2. 颜色：
2.1 十六进制写法：#XXXXXX （X：1-F）。
2.2 颜色的英文名称。
2.3 RGB写法：(0-255,0-255,0-255) 三者由前到后分别对应红、绿、蓝三种颜色的比例。
2.4 RGBA写法：(0-255,0-255,0-255、0-1) 前三者同RGB写法，最后为透明度，此透明度 只会使当前控件变透明，并不会影响其子控件。
五、常用的文本属性
1. 字体、字号
1.1 font-weight：字体的粗细，可选属性值：bold加粗 lighter细体 100-900数值
（400正常 700=bold）
1.2 font-size：字体大小，**px,或者**%
（浏览器默认字体大小的百分比，绝大部分默认为16px）
1.3 font-family：字体族，设置字体，多个字体样式之间用英文逗号分隔，浏览器解析时会从左往右依次解析选择可用字体，一般前面使用具体
字体名称，最后一个使用字体族名称。
（常用字体族名称：称线体serif 非称线体sans-serif 等宽体Monospace）
1.4 font-style：字体样式，可选属性值：normal正常 italic斜体
1.5 *font-variant：将字母转为小型大写字体
1.6 font（缩写形式）：font-style font-variant font-weight font-size/line-height font-family
[notice]顺序必须严格按照上述顺序；
多个样式之间用空格分割，而且font-size/line-height 必须按此格式；
font-size和font-family必须指定，其他样式不指定将采用默认样式。
>>>例如： font:italic bold 75%/1.8 'Microsoft Yahei',sans-serif；
斜体 加粗 12像素/1.8倍行高 微软雅黑,非衬线字体族
2. 字体颜色
2.1 color
2.2 opacity：0-1之间的数字，调整时控件以及控件子元素均会透明。
3. 行距、对齐
3.1 line-height ：行高 有三种写法①**px ②正常行高的n倍**（倍）③*%
典型应用，调整控件中文字垂直居中，方式 :控件的height=控件的line-height
3.2 text-align：块级元素中文字的水平对齐方式，三种left center right
3.3 letter-spacing：字符间距，字与字之间的间距。
3.4 text-decoration：文本修饰，下划线underline 删除线line-through 上划线overline 去除none
3.5 overflow：控制超出范围文本的显示方式
3.6 hidden（超出范围文本隐藏） scroll（始终显示滚动条） auto(根据文字多少自动显示滚动条) -x -y
3.7 text-overflow：设置多于文字的显示方式，clip裁剪 ellipsis省略号
3.8 text-shadow：文本阴影
4个属性值：水平阴影距离（数值越大，阴影右移）
垂直阴影距离（数值越大，阴影下移）{前两个必选}
阴影模糊距离（越大越模糊，可选）
阴影颜色（可选，默认黑色）
3.9 text-indent：首行缩进，可用像素值调整大小
3.10 *text-stroke：文字描边
3.11 white-space:nowrap 修改中文行末不断行显示
3.12 word-break （浏览器默认在空格处断行）：break-all按字母断开（允许在单词内换行）/break-word按单词断开
下面举个栗子↓
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS常用文本属性</title> 6 <style type="text/css"> 7 .div1 { 8 width: 200px; 9 height: 200px; 10 background-color: rgb(177,0,0); 11 font-weight: 900px; 12 font-style: italic; 13 font-size:50px ; 14 color: #CCCCCC; 15 opacity: 0.7; 16 line-height: 100px; 17 letter-spacing: 10px; 18 text-decoration: line-through; 19 overflow: hidden; 20 text-shadow: 1px 1px 20px green; 21 text-indent: 20px; 22 -webkit-text-stroke: 1px red; 23 white-space: nowrap; 24 text-overflow: ellipsis; 25 /*font:italic bold 75%/1.8 'Microsoft Yahei',sans-serif；*/ 26 } 27 </style> 28 </head> 29 <body> 30 <div class="div1"> 31 嘿嘿嘿 32 <br />哈哈哈哈哈 33 </div> 34 </body> 35 </html>
效果图如下↓
六、常用背景属性
1. background 缩写形式
2. background-color 背景色
3. background-image 背景图
background-image: url(路径);
背景图和背景色同时存在时，背景图会覆盖背景色。
4. background-repeat 背景图重复方式
no-reapeat最常用，不平铺
reapeat平铺（默认）
repeat-x水平平铺
repeat-y垂直平铺
5. background-size 背景图大小：
【制定宽度高度】有两个属性；宽度 高度
当只有一个属性值时，等比缩放；
当有两个属性值时，会按照制定的宽度高度进行压缩/拉伸显示。
宽高的写法: ①直接写像素；
②写百分比，代表父容器宽高的百分比；
其他属性值: 【覆盖】cover 图片等比缩放，使背景图完全覆盖背景区域
（可能导致背景图部分区域无法覆盖）
【图片等比缩放】contain 缩放至宽或高的某一边等于父容器宽高，另一条边按照图片大小缩放
（可能空余部分区域无法覆盖）
6. background-position 位置坐标、偏移量:
写法 ①指定位置：left/center/right top/center/bottom
当只写一个属性值时，另一个默认居中
②填写坐标像素：水平位置（像素/百分比） 垂直位置（像素/百分比）
当只写一个属性值时，默认为水平方向，另一个垂直居中
>>>当使用像素时，以图片左上角往各个方向移动的实际距离
水平方向正数右移、负数左移；垂直方向正数下移、负数上移
[左负右正 上负下正]
>>>当使用百分数时，一般只能用正数，代表去掉图片后，剩余空白距离的比例。
例如：background-position：30% 水平方向去掉图片后，剩余区域3:7分
7. background-clip 裁切背景图和背景色显示区域。
（不再显示区域内的背景图或背景色会被裁切不显示）
从边框外缘 border-box；从边框内缘 padding-box；从文字内容 content-box
不改变定位位置，只是通过裁切显示部分区域。
8. background-origin 设置背景图的定位方式，不能改动背景色。
从边框外缘 border-box；从边框内缘 padding-box；从文字内容 content-box
不改变背景图显示区域大小，只决定左上角定位位置。
下面举个栗子↓
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>这是一张名片</title> <style type="text/css"> #div1{ background-color:#18242C ; width: 450px; height: 320px; } .div2{ height: 240px; width: 400px; } .h2{ color: white; padding-top: 30px; margin-left: 30px; margin-right: 20px; padding-bottom: 20px; border-bottom: gray solid 1px; } .li{ color: white; list-style: none; background-image: url(img/QQ20170301171904.png); background-repeat: no-repeat; text-indent: 30px; line-height: 20px; width: 20px; height: 20px; margin-bottom: 15px; } .li1{ background-position: 0px 0px; white-space: nowrap; } .li2{ background-position: -20px 0px; white-space: nowrap; } .li3{ background-position: -40px 0px; white-space: nowrap; } .li4{ background-position: -60px 0px; white-space: nowrap; } .li5{ background-position: -80px 0px; width:360px } </style> </head> <body> <div id="div1"> <h2 class="h2">联系我们</h2> <div class="div2"> <ul> <li class="li li1">总机：0427-3293318</li> <li class="li li2">传真：0427-3293318</li> <li class="li li3">售后：0427-3293318</li> <li class="li li4">邮箱：lpei@lpei.com.cn</li> <li class="li li5">地址：辽宁省盘锦市兴隆台区高新技术产业园公园街</li> </ul> </div> </div> </body> </html>
效果图如下↓
七、盒子模型
1. 外边距：margin
缩写形式
写一个值：上下左右四个方向均为指定数值；
写两个数值：第一个数等于上下margi，第二个数等于左右margin
写三个数值：上 右 下，左=右
写四个数值：上，右，下，左四个方向（顺时针）
>>>margin:0 auto; 块级盒子在父容器中水平居中！！！！
2. 边框：border
三个属性值，宽度width 样式style 颜色color 原则上不能少任何一个，顺序无影响
可以通过top/right/bottom/left分别修改四个方向
内边距：padding
3. 内边距：padding
会使和模型的整个可视区域变大，使用时需要注意盒模式实际显示的区间大小
其他同margin，但没有0 auto的用法！！
八、其他属性
1. border-radius 圆角
可以接受8个属性值X轴（左上，右上，右下，左下）/Y轴
例如：border-radius: 50px 50px 50px 50px/50px 50px 50px 50px;
*只写X轴时，Y轴默认等于X轴。只写左上角，默认等于右下角；只写右上角，默认等于左下角。
例如：border-radius: 50px 0px 50px 0px；
=border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
=border-radius: 50px 0px ;
*只写一个数时，默认8个数都相等。
下面举个栗子↓
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div2{ width: 100px; height: 100px; background-color: red; border-radius: 50px 50px 50px 50px/50px 50px 50px 50px; } </style> </head> <body> <div class="div2"></div> </body> </html>
效果图如下↓
2. box-shadow 盒子阴影
6个属性值，空格分割：
X轴阴影距离：必选，可正可负，正数右移，负数左移
Y轴阴影距离：必选，可正可负，正数下移，负数右移
阴影模糊半径：可选，只能为正，默认为0，数值越大，越模糊
阴影扩展半径：可选，可正可负，默认为0，数值越大，阴影扩大，反之缩小
阴影颜色：可选，默认黑色
内外阴影：可选，可选值 inset(内阴影)，默认为 outset(外阴影)
下面举个栗子↓
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div3{ width: 100px; height: 100px; background-color: blueviolet; margin: 0 auto; box-shadow: 0px 0px 50px 25px greenyellow inset; border-radius: 50px 50px 50px 50px/50px 50px 50px 50px; } </style> </head> <body> <div class="div3"></div> </body> </html>
效果图如下↓
3. box-sizing
标准盒子：content为界定高低
IE盒子 ：border为界定高低
标准模式解析 content-size
怪异模式解析 border-size
4. Border-image 图片边框
十个属性值：
图片路径 url
图片的切片宽度 ：4个值，分别代表上，右，下，左四条切线。
通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角，四个边分别对应边框的四边。
【不会进行任何拉伸】【根据设置进行拉伸，平铺，铺满】【写的时候不能带像素单位】
图片边框的宽度：4个值，分别代表上右下左四条边框。【写的时候必须带像素单位】
背景重复方式：3个属性值，stretch（拉伸），round（铺满），repeat（平铺）
>>>铺满和平铺的区别
平铺会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
铺满会对四条边进行适当的拉伸、压缩，确保可以刚好现实完全。
属性值写法：
border-image：路径 切片宽度/边框宽度 重复方式
>>>边框宽度可以省略，默认宽度等于切片宽度！
切片宽度可以只写一个或者两个或者三个，判断方式同padding,margin！
下面举个栗子↓
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div4{ width: 200px; height: 200px; background-color: red; border-image: url(img/QQ图片20170303142611.png) 27/27px repeat; } </style> </head> <body> <div class="div4"></div> </body> </html>
效果图如下↓
- 还没有人评论，欢迎说说您的想法！
客服
