02-CSS语法大全
2017-07-03 本文已影响169人
magic_pill
一、CSS简介
- 定义：层叠样式表（Cascading Style Sheets），也叫级联样式表。
- 作用：用来美化html标签的，相当于给网页化妆。
二、选择器介绍
-
选择器是一个选择谁的过程；
-
写法：选择器{属性:值;}，写在head标签中；
-
常见属性：
| 属性 | 解释 |
|---|---|
| width:200px | 宽 |
| height:200px | 高 |
| background-color：red | 背景颜色 |
| font-size:24px | 文字大小 |
| text-align:left/center/right | 内容的水平对齐方式 |
| text-indent:2em | 首行缩进 |
| color:red | 文本颜色 |
2.1.基础选择器
标签选择器:
- 标签{属性：值;}
<head>
<style>
p{
color: red;
font-size: large;
background-color: green;
}
</style>
</head>
- 颜色表示方式
- 直接写颜色的名称
- 十六进制显示颜色：
- 使用rgb表示：#rgb、#rrggbb、rgb(127,240,12)；
- 使用rgba表示：a代表透明度，0表示不透明。
类选择器（重点）
- 给具体的类设置样式；
- 写法：
.自定义类名{属性:值; 属性:值;}；
<head>
<style>
.article{
background-color: aqua;
font-size: larger;
}
.paragraph{
color: yellow;
}
</style>
</head>
-
谁调用对谁生效； - 一个标签可以调用多个类选择器，写法:
<p class="类选择器1 来选择器2">...</p>;
<div class="article paragraph">上片写临别时恋恋不舍的情绪。“寒蝉凄切，对长亭晚，骤雨初歇。”这三句说，在深秋时节的一一种浓重的凄凉气氛。下寂伤感</div>
- 多个标签可以调用同一个类选择器；
- 类选择器命名规则：不能以数字开头；不能使用特殊符号（下划线除外）；不建议使用汉字来定义类名；不建议使用属性或属性的值来定义类名。
ID选择器
- 写法：在style中定义，
#自定义名称{属性:值;}； - 使用时用法：
<div id="自定义名称"></div> - 一个ID选择器在一个页面中只能使用一次，如果使用多次就不符合w3c规范，js调用会出错;
- 一个标签只能调用一个ID选择器；
- 一个标签可以同时调用ID选择器和类选择器。
通配符选择器（认识）
- 写法：
*{属性:值;}
<head>
<style>
*{
color: red;
font-size: 20px;
}
</style>
</head>
- 不推荐使用：
- 给所有的标签都是用相同的样式；
- 增加浏览器和服务器负担。
2.2.复合选择器
- 两个或者两个以上的基础选择器通过不同的方式连接在一起。
交集选择器
- 写法：
标签+类选择器/ID选择器{属性:值;} - 特点：既要满足使用了某个标签，还要满足使用了类选择器/ID选择器。
<head>
<style>
.style1{
background-color: yellow;
}
div.style1{
font-size: 40px;
}
</style>
</head>
后代选择器（最重要）
- 写法：选择器+空格+选择器+空格+选择器{属性:值;}
- 可以无限制隔代；
- 只要能代表标签，标签、类选择器、ID选择器可以自由组合。
<head>
<style>
.style2{
color: #ff0000;
}
span .style2 p{
color: black;
}
</style>
</head>
子代选择器(使用不多)
- 写法：选择器>选择器(属性:值;)；
- 直接下一代，不可以跳级。
并集选择器
- 写法：用
,将标签、ID选择器、类选择器相连{属性:值;}。
快捷方式：
-
div.ppp + tab--><div class="ppp"></div>
三、文本属性、属性连写/简写和字体表达式
3.1.文本属性
- 文本风格：font-style:normal/italic；
- 文字粗细：font-weight:700，值从100-900，从700开始加粗(700相当于bold)，不推荐使用bold；
- 文字大小：font-size:10px；
- 行高：line-height；
- 文字字体：font-family:微软雅黑/宋体；
3.2.属性连写
- 写法：
font:font-style font-weight font-size/line-height font-family
例：font:italic 700 30px/45px 微软雅黑
- 前两个顺序可以调换，其它顺序不可以调换；
- 其中文字大小和字体为必写项；
3.3.字体表达式
| 字体名称 | 英文名称 | Unicode编码 |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | microsoft yahei | \5FAE\8F6F\96C5\9ED1 |
- 开发时尽量使用Unicode编码，如果不记得，在使用时可以通过如下方式获取到：
- ①浏览器按下f12；
- ②点击console；
- ③输入escape(""微软雅黑)；
- ④最后将得到的字符中的%改成反斜杠即可。
四、样式表三种写法(css书写位置)
- 内嵌式写法：写在head标签中
- 只作用于当前文件，没有真正实现结构和表现分离；
- 外链式写法：写在head标签中
- 写法：
<link rel="stylesheet" href="xxx.css">; - 作用范围是当前站点，范围广，真正实现了结构表现分离的效果；
- 写法：
- 行内样式表(用的不多)
- 写法：
<p style="color: red;font-size: 14px;background-color: yellow;">交罚款了的</p> - 作用范围仅限于当前标签，范围小，结构表现混在一起，不推荐使用。
- 写法：
五、标签分类（显示方式）非常重要
5.1.块元素
- 典型代表：div、h1-h6、p、ul、li...
- 特点：
- 独占一行；
- 可以设置宽高；
- 嵌套(包含)下，子块元素的宽度没有定义时，子块元素的宽度默认和父块元素宽度一致。
5.2.行内元素
- 典型代表：span、a、strong、em、ins、del...
- 特点：
- 和其它内容在同一行显示；
- 不能直接定义宽高；
- 宽高为内容撑开的宽高。
5.3.行内块级标签(内联元素)
- 典型代表：input、img；
- 特点：
- 可以在同一行显示；
- 可以设置宽高。
显示方式转换
- 块元素转行内元素：
- 写法：
display:inline; - 此时再对原来的块元素设置宽高无效；
- 写法：
- 行内元素转块元素：
- 写法：
display:block; - 此时可以对原来的行内元素设置宽高，可以设置对齐方式。
- 写法：
- 块元素和行内元素转行内块元素
- 写法：
display:inline-block; - 此时块元素和行内元素都可以设置宽高了。
- 写法：
六、css三大特性
- 层叠性：当多个样式作用于同一个(同一类)标签时，样式会发生冲突，后面的代码总是层叠前面的代码，显示后面代码的结果；
- 继承性：
- 继承性发生的前提是包含关系(嵌套关系)；
- 文字的所有属性都可以继承：
- 文字风格
- 字体粗细
- 文字大小
- 行高
- 字体
- 文字颜色；
- 特殊情况：
- h系列不能继承文字大小；
- a标签不能继承文字颜色；
- 优先级
- 总结：
默认样式<标签选择器<类选择器<ID选择器<行内样式表<!important；可以假设给每个样式赋值(权重)：默认样式(0)<标签选择器(1)<类选择器(10)<ID选择器(100)<行内样式(1000)<!important(1000以上)； - 优先级特点：
- 继承的权重为0；
- 权重会叠加。
- 总结：
七、链接伪类
-
a:link{属性:值;}和a{属性:值;}在超链接状态下效果是一样的，有些浏览器对前者兼容性不是很好，后者用的比较多； - ①a:link{属性:值;}，链接的默认状态；
- ②a:visited{属性:值;}，链接访问之后的状态；
- ③a:hover{属性:值;}，鼠标放到链接上显示的状态；
- ④a:active{属性:值;}，链接激活状态(长按链接时的状态)；
- ⑤a:focus{属性:值;}，获取焦点时的状态。
- 注：如果一个a标签同时出现多个伪类时，要严格按照上面①~⑤的顺序写；
- 文本修饰：
- text-decoration:none/underline/line-through(删除线);
八、背景
8.1.背景属性
- 背景颜色：
background-color:red；
- 背景图片：
background-image:url(xxx.png)； - 背景平铺：
background-repeat:repeat/no-repeat/repeat-x/repeat-y，默认沿x轴平铺沿y轴平铺； - 背景定位：
background-position:left/right/center/top/bottom - 方位值只写一个时，另外一个默认居中；
- 写2个方位值时，顺序没有要求；
- 写两个具体值时，第一个值是水平方向，第二个值是垂直方向。
- 是否滚动：
background-attachment:scroll/fixed； - 注意点：如果background-position和background-attachment:fixed连用，就会以浏览器为参考，不过这一点基本不会用到。
8.2.背景属性连写
background:background-color url("xxx.png") repeat position scroll- 背景属性连写没有顺序要求，当有repeat、position、scroll等相应属性时url不能为空，其它情况下各属性可以为空。
练习
- 搜索框；
- 链接列表；
- 购物车：一张图片，默认显示购物车(上半部分)，当鼠标放到图片上时显示登录(下半部分);
- 五彩导航：文字居中显示，鼠标停留在某一个按钮时，按钮颜色进行相应变换；
- 补充：去除无序列表的小圆点，在style里面设置li标签选择器:
li{
list-style:none;
}
九、行高
- 行高是基线与基线的距离；
- 浏览器默认文字大小：16px；
- 行高 = 文字高度 + 上下边距；
- 一行文字行高和父元素高度一致的时候，文字垂直居中显示；
- 行高单位：
| 单位 | 文字大小 | 值 |
|---|---|---|
| px | 20px | 20px |
| em | 20px | 2em=40px |
| % | 20px | 150%=30px |
| 2 | 20px | 40px |
- 总结：单位除了像素以外，行高都是与文字大小的乘积。
| 行高单位 | 父元素文字大小 | 子元素文字大小 | 行高 |
|---|---|---|---|
| 40px | 20px | 30px | 40px |
| 2em | 20px | 30px | 40px |
| 150% | 20px | 30px | 30px |
| 2 | 20px | 30px | 60px |
- 总结：em和%的行高是和父元素文字大小的乘积；不带单位时，行高是和子元素文字大小的乘积；行高以像素为单位，就是定义的行高值。使用时，推荐使用以像素为单位。
十、盒子模型重点
10.1.边框border
-
border-top-style:solid/dotted/dashed:线型(实线/点线/虚线)； -
border-top-color:边框颜色； -
border-top-width:线宽； - 边框属性连写：
border-top:solid red 7px;，没有顺序要求，线型为必写项； - 四个边框相同的写法：
border:dotted red 2px；
10.2.边框合并
border-collapse:collapse;- 练习：
- 表单边框的合并;
- 表单控件(当聚焦到用户名输入框时，背景变成红色);
| 属性名 | 操作 |
|---|---|
| 轮廓线 | outline-style:none 取消轮廓线 |
| 获取焦点 | :focus 获取鼠标光标状态 |
| 表单边框 | border:0 none 取消表单边框(加0，兼容性更好) |
| label标签 | <label for="ID名"> 友好性 |
- 说明：
- 当取消输入框边框时，聚焦到输入框时，仍然有边框，这时的边框叫做轮廓线；
- 改变焦点状态：
.类名:focus{属性:值;}； -
<label for="xxx">用户名</label><input id="xxx">，作用：点击汉字时，获取光标焦点；
10.3.内边距
-
padding-left、padding-top； - 简写:
-
padding:10px;:上下左右都是10px； -
padding:10px 20px;:上下为10px，左右为20px； -
padding:10px 20px 30px;:上10px，左右20px，下30px； -
padding:10px 20px 30px 40px;：上10px，右20px，下30px，左40px；
-
- 内边距会撑大盒子；盒子宽度=定义的宽度+左右内边距+左右边距宽度；
- 继承的盒子一般不会被撑大：嵌套(包含)的盒子，如果子盒子没有定义宽度（宽度会继承父盒子，但是高度不会，默认高度为0），给子盒子设置左右内边距，一般不会撑大子盒子。
- 练习：新浪首页导航条；
- 内容居中对齐：
text-align:center;盒子居中对齐：margin:0 auto;。
10.4外边距
margin-top、margin-bottom- 外边距连写：
-
margin:20px,上下左右； -
margin:20px 30px,上下20，左右30； -
margin:20px 30px 40px,上20，左右30，下40； -
margin：20px 30px 40px 50px,上 右 下 左；
-
- 垂直方向外边距合并：相邻的两个盒子，如果在垂直方向上都设置距另一个盒子的距离，会取值比较大的那一个；
- 外边距塌陷：嵌套的盒子，直接给子盒子设置垂直方向外边距的时候，会发生外边距塌陷，解决方案
- 给父盒子设置边框；(不推荐使用)
- 给父盒子设置
overflow:hidden;(触发了bfc)
- 练习：
- 行业动态；
- 爱宠知识网;
- 个人资料；
- 行内元素可以设置左右的内外边距，设置上下内外边距会被忽略。
十一、浮动重要
-
文档流(标准流)：元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父元素的边框时换行；
-
浮动布局：
- float:left/right；
- 特点：
- 元素浮动之后不占据原来的位置（脱标）；
- 浮动的盒子在一行上显示；
- 行内元素浮动之后转换为行内块元素（不推荐使用，转行内块元素最好使用
display:inline-block）；
- 浮动的作用：
- 文本绕图（文字环绕图片）：文字和浮动元素没有层叠关系，文字不参与浮动；
- 制作导航；
- 网页布局；
-
练习：
- 简单导航初体验；
- 上合导航；
- 网页布局；
- 网页布局二；
- （补：行内元素可以定义左右内边距，不能定义上下内边距，定义上下内边距时不准）
-
清除浮动
- 清除浮动不是不使用浮动，而是清除浮动所产生的不良影响（当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误），清除浮动使用关键字
clear:left/right/both;,工作中使用的最多的是clear:both;； - 清除浮动方法：
- 额外标签法：在最后一个浮动元素后添加标签：
<div style="clear:both"></div>,但是工作中一般不使用这样的方法； - 给父级元素使用
overflow:hidden（bfc），有弊端：当内容出了盒子，就会被裁剪掉； - 伪元素清除浮动，使用最多，最完美：
- 额外标签法：在最后一个浮动元素后添加标签：
- 清除浮动不是不使用浮动，而是清除浮动所产生的不良影响（当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误），清除浮动使用关键字
<style>
.clearfix:after{
content:".";
display:block;
height:0;
line-height:0;
visibility:hidden;
clear:both;
}
/*兼容IE*/
.clearfix{
zoom:1;
}
</style>
浮动元素的父元素调用clearfix清除浮动。
十二、css初始化和overflow属性
- css初始化：为了考虑到浏览器的兼容性问题，其实不同浏览器对有些标签的默认值是不同的，如果没有对css初始化往往会出现浏览器之间的页面差异。
- overflow介绍：
overflow：visible/hidden/scroll/auto,overflow属性规定当内容溢出元素框时发生的事情
| 属性值 | 说明 |
|---|---|
| visible | 默认值，内容不会被裁剪，会呈现在元素框之外 |
| hidden | 内容会被裁剪，超出的内容是不可见的 |
| scroll | 如果内容溢出，会被裁剪。无论内容是否溢出，浏览器总是会显示滚动条以便查看其余的内容 |
| auto | 如果内容溢出元素框被裁剪，则浏览器会显示滚动条以便查看其余的内容；如果内容没有溢出，不会显示滚动条 |
十三、定位重要
-
定位方向：left/right/top/bottom/具体数值；
-
静态定位：
position:static;，静态定位，就是默认值、文档流（标准流）； -
绝对定位：
position:absolute;- 特点：
- 元素使用绝对定位之后不占据原来的位置（脱标）；
- 元素使用绝对定位之后，位置从浏览器出发；
- 嵌套的盒子：父盒子没有使用定位，子盒子使用绝对定位，子盒子位置从浏览器出发；
- 嵌套的盒子：父盒子、子盒子都是用绝对定位，子盒子位置从父盒子出发；
- 给行内元素使用绝对定位之后，转换为行内块元素（不推荐使用，推荐使用
display:inline-block;）；
- 特点：
-
补：
z-index:2;调整元素的层叠顺序，默认值从0-999，值越大，元素就越靠上； -
相对定位：
position:relative;- 特点：
- 使用相对定位，位置从自身出发；
- 还占据原来的位置；
-
子绝父相，子元素的位置从父元素出发； - 行内元素使用相对定位不能转行内快。
- 特点：
-
固定定位：
position:fixed;- 固定定位之后，不占据原来的位置（脱标）；
- 元素使用固定定位之后，位置从
浏览器出发； - 行内元素使用固定定位之后，会转化为行内块（不推荐使用，推荐使用
display:inline-block;）；
-
练习：
- 导航；
- 固定定位。
十四、定位的盒子居中显示
-
margin:0 auto;只对标准流有效； - 定位的盒子居中(脱标情况)：先向右走父元素盒子的一半，再向左走子盒子的一半：
left:50%;
margin-left:-元素宽度一半;
- 练习：
- 顺丰盒子；
小知识点/注意点补充：
标签包含规范(嵌套规范)
- div可以包含所有标签；
- p标签不能包含div、h等标签,p一般可以包含行内元素，不能包含块元素；
- h标签可以包含p、div等标签；
- 行内元素尽量包含行内元素，行内元素不要包含块元素。
规避脱标流
- 提倡尽量使用文档流(标准流)；
- 标准流解决不了的使用浮动；
- 浮动解决不了的使用定位。
- 补：auto意思是尽量取最大的距离，
margin-left:auto;：意思是靠右排列。
图片和文字垂直居中对齐
- vertical-align对inline-block最敏感，默认属性是和基线对齐
vertical-align:baseline;其它取值有：middle、top、bottom。
css可见性
-
overflow：hidden;：溢出隐藏； -
visibility:hidden;：隐藏元素，隐藏之后还占据原来的位置； -
display:none;：隐藏元素，隐藏之后不占据原来的位置； -
display:block;：元素可见。 -
display:none;和display:block;经常配合js使用。
内容移除
- 第一种方法使用
text-indent:-5000px;; - 第二种方法：
.box{
width:300px;
height:0;
padding-top:100px;
overflow:hidden;
}
属性选择器（要认识）
<style type="text/css">
input[type="button"][class]{
width:100px;
height:100px;
background:green;
}
</style>
firework的使用
- 显示辅助线：视图>标尺>从标尺拉线>按shift即可测量；
- 清除辅助线：
- 直接将线拉回标尺；
- 视图>辅助线>清除；
- 放大镜：z；放大镜状态下alt+鼠标左键：缩小；
- 抓手：空格；
