CSS学习笔记（基础篇）
CSS概念
CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
Css是用来美化html标签的，相当于页面化妆。
- 样式表书写位置：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
// 样式表内容
</style>
</head>
选择器
选择器是一个选择谁（标签）的过程。
选择器{属性:值; 属性:值; ......}
| 属性 | 解释 |
|---|---|
| width:20px; | 宽 |
| height:20px; | 高 |
| background-color:red; | 背景颜色 |
| font-size:24px; | 文字大小 |
| text-align:left | center| right | 内容的水平对齐方式 |
| text-indent:2em; | 首行缩进(1em = 一个汉字的长度) |
| color:red; | 文字颜色 |
基础选择器
标签选择器
标签{属性：值;}
特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
font-size: 50px;
color: red
}
</style>
</head>
<body>
<div>等你下课</div>
</body>
</html>
- 颜色的显示方式
- 直接写颜色的名称（比如：red，green等）
- 十六进制显示颜色
（#000000; 前2为代表红色，中间2位代表绿色，后边2位代表蓝色。
注意： #EEE == #EEEEEE； #333 == #333333）
- rgb(120, 120, 120)
- A代表alpha 不透明度，值 0-1 （比如：rgb(120,120,120. 0.5)）
类选择器（重点）
.自定义类名{属性:值; 属性:值; }
特点： 谁调用，谁生效。
一个标签可以调用多个类选择器。多个标签可以调用同一个类选择器。
- 类选择器命名规则
- 不能用纯数字或者数字开头来定义类名
- 不能使用特殊符号或者特殊符号开头（_ 除外）来定义类名
- 不建议使用汉字来定义类名
- 不推荐使用属性或者属性的值来定义类名
- 常用的命名
ID选择器
#自定义名称{属性:值;}
特点：
1.一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。
2.一个标签只能调用一个ID选择器。
3.一个标签可以同时调用类选择器和ID选择器。
通配符选择器
*{属性:值;}
特点：给所有的标签都使用相同的样式。
★不推荐使用，增加浏览器和服务器负担。
复合选择器
概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。
交集选择器
标签+类（ID）选择器{属性：值；}
特点：即要满足使用了某个标签，还要满足使用了类选择器或者ID选择器。
后代选择器（重点）
选择器+空格+选择器{属性：值;}
后代选择器首选要满足包含（嵌套）关系。
父集元素在前边，子集元素在后边。
特点：无限制隔代。（下面都会生效）
只要能代表标签，标签、类选择器、ID选择器自由组合。
子代选择器
选择器>选择器{属性:值;}
选中直接下一代元素，下下一代就选不中了。
并集选择器
选择器+，+选择器+，选择器{属性:值;}
文本元素
属性
font-size:50px; //文字大小
font-weight: 700; //值从100-900，文字粗细,700约等于Bold，不推荐使用font-weight:bold;
font-family:微软雅黑; //文本的字体
font-style: normal | italic; //normal:默认值 italic:斜体
line-height: //行高
文本属性连写
font: font-style font-weight font-size/line-height font-family;
font: italic 700 50px/40px 微软雅黑;
注意：font:后边写属性的值。一定按照书写顺序。
文本属性连写文字大小和字体为必写项。
文字的表达方式
- 直接写中文名称
font-family: 微软雅黑;
- 写字体的英文名称
font-family: microsoft yahei;
- unicode 编码（解析更快）
如何找到某一字体相对应的unicode编码呢？
第一步：f12
第二步：找到console
第三步：输入escape(“宋体”) 注意英文的括号和双引号。
样式表书写位置
- 内嵌式写法
<head>
<style type=”text/css”>
样式表写法
</style>
</head>
- 外链式写法
<link rel=”stylesheet” href=”1.css”> // 写在head里
- 行内样式表
<div style="font-size: 30px; color:red;">行内样式表</div>
三种写法特点:
内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。
外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。
行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。 （不推荐使用）
标签分类
块元素
典型代表: div, h1-h6, p, ul, li
特点:
1.独占一行
2.可以设置宽高
3.嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
行内元素
典型代表 span, a, strong, em, del, ins
特点：
1.在一行上显示
2.不能直接设置宽高
3.元素的宽和高就是内容撑开的宽高。
行内块元素(内联元素)
典型代表 input, img
特点：
1.在一行上显示
2.可以设置宽高
三者相互转换
- 块元素转行内元素
display:inline;
- 行内元素转块元素
display:block;
- 块和行内元素转行内块元素（用的最多）
display:inline-block;
CSS三大特性
层叠性
当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。
继承性
继承性发生的前提是包含（嵌套关系）
★文字颜色可以继承
★文字大小可以继承
★字体可以继续
★字体粗细可以继承
★文字风格可以继承
★行高可以继承
总结：文字的所有属性都可以继承。
特殊情况：
- h系列不能继承文字大小。（继承了但是不显示）
（h1显示的是：你设置的font-size * 2
h2显示的是：你设置的font-size * 1.5
.......）
- a链接标签不能继承文字颜色（继承了但是不显示，链接标签默认是蓝色）
优先级
默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式< !important
权重： 0 1 10 100 1000 1000以上
这里的数字不是准确的，其实100个标签选择器叠加的权重也干不过一个类选择器的权重。
特点：
1.继承的权重为0（当没有自己的样式时，听继承的；有自己的样式时，继承的权重为0）
2.权重会叠加。
（上图：类选择器10+标签选择器1=11，所以最后14期威武显示的是黄色）
链接伪类
a:link{属性:值;} 链接默认状态 ( a{属性:值}效果是一样的。)
a:visited{属性:值;} 链接访问之后的状态
a:hover{属性:值;} 鼠标放到链接上显示的状态 a:active{属性:值;} 链接激活的状态
：focus{属性:值；} 获取焦点
注意：
1.a:visited之后要想回到之前的状态，需要清除缓存。
2.写的顺序要按照link,visited,hover,active的顺序来写，否则可能不显示。
- 文本修饰
text-decoration: none | underline | line-through | ...... // 链接下划线/删除线/......
背景属性
background-color： 背景颜色
background-image： 背景图片
Background-repeat： repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺
Background-position： left | right | center（默认） | top | bottom 背景定位
Background-attachment 背景是否滚动 scroll（默认） | fixed
- Background-position
background-position: right; // 方位值只写一个的时候，另外一个值默认居中。
background-position: right bottom // 写2个方位值的时候，顺序没有要求
background-position: 20px 30px // 写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向
- Background-attachment
scroll: 背景图的位置是基于盒子（假如是div）的范围进行显示
fixed：背景图的位置是基于整个浏览器body的范围进行显示，如果背景图定义在div里面，而显示的位置在浏览器范围内但是不在div的范围内的话，背景图无法显示。
背景属性连写
background: red url("1.png") no-repeat 30px 40px scroll;
连写的时候没有顺序要求，url为必写项
行高
浏览器默认文字大小：16px
行高：是基线与基线之间的距离
行高 = 文字高度+上下边距
行高的单位
| 行高单位 | 文字大小 | 值 |
|---|---|---|
| 20px | 20px | 20px |
| 2em | 20px | 20px*2=40px |
| 150% | 20px | 20px*150%=30px |
| 2 | 20px | 20px*2=40px |
总结:单位除了像素以外，行高都是与文字大小乘积000pt �z��l
| 行高单位 | 父元素文字大小（定义了行高） | 子元素文字大小（子元素未定义行高时） | 行高 |
|---|---|---|---|
| 40px | 20px | 30px | 40px |
| 2em | 20px | 30px | 40px |
| 150% | 20px | 30px | 30px |
| 2 | 20px | 30px | 60px |
总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
推荐行高使用像素为单位。
盒子模型
border（边框）
Border-top-style: solid 实线
dotted 点线
dashed 虚线
none 无边框
Border-top-color 边框颜色
Border-top-width 边框粗细
除了有top系列外还有left,right,bottom系列
- 边框属性的连写
border-top: 1px solid #fff;
没有顺序要求，线型为必写项
- 四个边框值相同的写法
border: 1px solid #fff;
没有顺序要求，线型为必写项
边框合并（细线边框）
border-collapse:collapse;
获取焦点
- label for id 获取光标焦点（点击label也可以选择文本框）
<label for="username">用户名：</label><input type="text" class="username" id="username"></input>
padding（内边距）
padding-left | right | top | bottom
- padding连写
Padding: 20px; //上右下左内边距都是20px
Padding: 20px 30px; //上下20px 左右30px
Padding: 20px 30px 40px; // 上内边距为20px 左右内边距为30px 下内边距为40
Padding: 20px 30px 40px 50px; //上20px 右30px 下40px 左 50px
- 内边距撑大盒子的问题
盒子的宽度 = 定义的宽度 + 边框宽度 + 左右内边距
- 继承的盒子一般不会被撑大
包含（嵌套）的盒子，
如果子盒子没有定义宽度，给子盒子设置左右内边距（内边距不大于子盒子宽度），不会撑大子盒子。至于设置了上下内边距的话是会撑大子盒子的。（不管怎样父盒子永不变）
margin（外边距）
margin-left | right | top | bottom
- 外边距连写
Margin: 20px; 上下左右外边距20PX
Margin: 20px 30px; 上下20px 左右30px
（margin: 0 auto; 盒子居中对齐 text-align:center 是盒子里面的内容居中）
Margin: 20px 30px 40px; 上20px 左右30px 下 40px
Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
- 垂直方向外边距合并（取最大值）
两个盒子垂直，一个设置上外边距，一个设置下外边距，取的设置较大的值。
- 嵌套的盒子外边距塌陷
嵌套的盒子，直接给子盒子设置垂直方向外边距的时候，会发生外边距的塌陷（父盒子跟着移动）
解决方法:1.给父盒子设置边框
2.给父盒子
overflow:hidden;
浮动
文档流（标准流）
元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。
浮动布局
float: left | right （浮动方向）
特点：
1.元素浮动之后不占据原来的位置（脱标）
2.浮动的盒子在一行上显示
3.行内元素浮动之后自动转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）
浮动的作用
- 文本绕图
- 制作导航（经常使用）
把无序列表ul li 浮动起来做成的导航。
- 网页布局
清除浮动
问题：当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误（占据父盒子的位置）。
清除浮动不是不用浮动，清除浮动产生的问题。
方法一
- 额外标签法：在最后一个浮动元素后添加标签。
clear: left | right | both // 工作里用的最多的是clear:both;
方法二
- 给浮动元素的父集元素使用
overflow:hidden;
注意：如果有内容出了盒子，不能使用这个方法。
方法三（推荐使用）
- 伪元素清除浮动
: after 相当于在当前盒子后加了一个盒子。
CSS初始化
- 腾讯
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
- 新浪
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
- 淘宝
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
overflow
overflow属性规定当内容溢出元素框时发生的事情.
scroll：一直有滚动条.
auto：只有内容出了盒子才有滚动条。
定位
定位方向: left | right | top | bottom
静态定位（默认值）
position: static; // 就是文档流式的定位模式。
绝对定位
position:absolute;
然后使用left | right | top | bottom 来确定具体位置。
特点：
1.元素使用绝对定位之后不占据原来的位置（脱标）
2.元素使用绝对定位，位置是从浏览器出发。
3.嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
4.嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。
5.给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）
相对定位
position: relative;
特点：
1.使用相对定位，位置从自身出发。
2.不脱标，其他的元素不能占有其原来的位置。
3.子绝父相（父元素相对定位，子元素绝对定位），用的最多的场景。
4.行内元素使用相对定位不能转行内块元素。
固定定位
position:fixed;
特点：
1.固定定位之后，不占据原来的位置（脱标）
2.元素使用固定定位之后，位置从浏览器出发。
3.元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）
定位（脱标）的盒子居中对齐
margin:0 auto;只能让标准流的盒子居中对齐
定位的盒子居中：子绝父相，然后子盒子先往右走父盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)
PS：
z-index:10改变层叠优先级，值越大优先级越高
标签包含规范
- div可以包含所有的标签。
- p标签不能包含div h1等标签（一般包含行内元素）。
- h1可以包含p，div等标签（一般不这样）。
- 行内元素尽量包含行内元素，行内元素不要包含块元素。
规避脱标流
- 尽量使用标准流。
- 标准流解决不了的使用浮动。
- 浮动解决不了的使用定位。
margin-left:auto; //盒子一直往右冲，一直冲不动为止。也是 margin:0 auto; 的由来。
图片和文字垂直居中对齐
vertical-align 主要用在 inline-block 标签上，效果最好。
默认属性是: vertical-align:baseline;
CSS可见性
overflow:hidden; 溢出隐藏
visibility:hidden; 隐藏元素 隐藏之后还保留原来的位置。
display:none; 隐藏元素 隐藏之后不保留原来的位置。
Display:block; 元素可见
----------------------------------------------------
Display:none 和display:block 常配合js使用（如：鼠标经过时出现，鼠标离开时消失）。
css之内容移除（logo优化）
- 方法一：
text-indent:-5000em;
之所以要写着两个字是为了SEO，因为背景图片SEO看不懂.
- 方法二：
将元素高度设置为0, 使用内边距将盒子撑开，给盒子使用overflow:hidden; 将文字隐藏。
.box{
width:300px;
height:0;
padding-top:100px;
overflow:hidden;
background:red;
}
CSS精灵图
1：上图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
2：然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）。
简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为淘宝网站中的一个精灵图。
工作原理：
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.box{
height: 48px;
background: #222;
margin-top: 50px;
}
.con{
width: 1182px;
height: 48px;
margin: 0 auto;
position: relative;
}
.con ul li{
float: left;
}
.con ul li a{
text-decoration: none;
color: #fff;
display: inline-block;
height: 48px;
font: 16px/48px microsoft yahei;
padding: 0 18px;
}
.con ul li a:hover{
background: #2774A2;
}
.con .hot{
position: absolute;
width: 31px;
height: 21px;
background: url("spirit.png") -58px 0;
left:221px;
bottom:35px;
}
.con .new{
position: absolute;
width: 31px;
height: 21px;
background: url("spirit.png") -135px 0;
left:90px;
bottom:35px;
}
</style>
</head>
<body>
<div class="box">
<div class="con">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">IOS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">C/C++</a></li>
<li><a href="#">UI设计</a></li>
<li><a href="#">前端与移动开发</a></li>
<li><a href="#">问答专区</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">网络营销</a></li>
<li><a href="#">活动专区</a></li>
</ul>
<div class="hot"></div>
<div class="new"></div>
</div>
</div>
</body>
</html>
PS：之所以选择con作为父盒子而不是box作为父盒子，是因为box的宽度不定，不同的显示器宽度不同，那么new和hot的定位就有问题。
属性选择器
input[type="text"][class] {
width: 20px;
height: 20px;
}
选择有type属性为text，并且有class属性的标签。
input[type="text"][class="id"] {
width: 20px;
height: 20px;
}
选择有type属性为text，并且有class属性，并且class属性为 id 的标签。
CSS滑动门
边上是这种圆弧型的或者其他形状的，可以变换长度的样式。
特点：浮动之后宽度不是父盒子的宽度，而是内容撑开的宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul li{
float: left;
}
ul li a{
display: inline-block;
height: 35px;
background: url("bg_r1_c1.png") no-repeat;
padding-left: 7px;
}
ul li a span{
display: inline-block;
height: 35px;
background: url("bg_r1_c2.png") right;
padding-right: 25px;
color: #fff;
line-height: 35px;
}
ul li a:hover{
background: url("bbg_r1_c1.png");
}
ul li a:hover span{
background: url("bbg_r1_c2.png") right;
}
</style>
</head>
<body>
<ul>
<li><a href="#"><span>网易云音乐</span></a></li>
<li><a href="#"><span>微信</span></a></li>
<li><a href="#"><span>蚂蚁花呗</span></a></li>
</ul>
</body>
</html>
微信案例：
现象：鼠标经过时，背景凸起。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li,a,span{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.nav{
height: 74px;
background: url("weixin_bg.jpg");
}
.nav-con{
width: 600px;
margin: 0 auto;
}
li{
float: left;
height: 74px;
line-height: 74px;
margin-right: 60px;
}
li a{
display: inline-block;
text-decoration: none;
color: #fff;
height: 33px;
line-height: 33px;
background: url("bg.png") no-repeat 0 -144px;
padding-left: 13px;
}
a span{
display: inline-block;
height: 33px;
background: url("bg.png") no-repeat right -144px;
padding-right: 13px;
}
a:hover{
background: url("bg.png") no-repeat 0 -192px;
}
a:hover span{
background: url("bg.png") no-repeat right -192px;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-con">
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>下载文章</span></a></li>
<li><a href="#"><span>微信公众公众公众助手</span></a></li>
</ul>
</div>
</div>
</body>
</html>
