１.Css概念 "CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
Css是用来美化html标签的，相当于页面化妆。"
Css基础 CSS的定义
"什么是CSS？"
CSS 指层叠样式表 (Cascading Style Sheets)
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。css是美化html标签的作用。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
CSS就是控制页面布局和样式
- HTML和CSS的关系 HTML 结构层 负责从 语义的角度搭建页面结构CSS 样式层 负责从 审美的角度美化页JavaScript 行为层 负责从 交互的角度提升用户体验
样式表书写内容
<style type="text/css" >
２. 选择器
2.1写法
选择器是一个选择谁（标签）的过程。
选择器{属性:值； 属性:值;}
属性 解释
Width:20px; 宽
Height:20px; 高
Background-color:red; 背景颜色
font-size:24px; 文字大小
text-align:left | center| right 内容的水平对齐方式
text-indent:2em; 首行缩进
Color:red; 文字颜色
background:linear-gradient(to top,#707070 50%,#777 50%); 设置渐变色
2.2 基础选择器
标签选择器 特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。
"例子：<title></title>
<style type=""text/css"">
div{
font-size:10px;
color:green;
width:300px;
height:200px;
background-color:yellow;
text-align: center;
text-indent: 2em;
}
</style>
</head>
<body>
<div>awdawd</div>
</body>"
2.3颜色的显示方式
a直接写颜色的名称
b十六进制显示颜色: 0-9 a-f #000000; 前2为代表红色，中间2位代表绿色，后边2位代表蓝色。
rgb:
例子：color:rgb(120,120,120)；
rgba： A代表alpha 不透明度 值 0-1 例子：color:rgba(102,217,,263,0.5指透明度)；
2.3类选择器（重点）
.自定义类名{属性:值; 属性:值；}
"特点： 谁调用，谁生效。
一个标签可以调用多个类选择器。
多个标签可以调用同一个类选择器
★类选择器命名规则
◎不能用纯数字或者数字开头来定义类名
◎不能使用特殊符号或者特殊符号开头（_）来定义类名
◎不建议使用汉字来定义类名
◎不推荐使用属性或者属性的值来定义类名
例子：<!DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""UTF-8"">
<title>Document</title>
<style type=""text/css"">
.box{
font-size: 500px;
color: #ff0000;
width: 400px;
height: 300px;
background-color:#999;
}
.miss{
font-size: 500px;
color: #ff0000;
width: 400px;
height: 300px;
background-color:#999;
}
</style>
</head>
<body>
<div class=""box"">WW</div>
<div class=""miss"">ww</div>
</body>
</html>
2.4ID选择器
#自定义名称{属性:值;}
"特点： 一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。
一个标签只能调用一个ID选择器。
一个标签可以同时调用类选择器和ID选择器。
"
span 会让元素在一行显示，行元素
2.5通配符选择器
*{属性:值;}
"特点：给所有的标签都使用相同的样式。
★不推荐使用，增加浏览器和服务器负担。"
2.6复合选择器
概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。
交集选择器
标签+类（ID）选择器{属性：值；}
特点：即要满足使用了某个标签，还要满足使用了类（id）选择器。
"例子：<!DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""UTF-8"">
<title>Document</title>
<style type=""text/css"">
#miss{
font-size: 500px;
}
div#miss{
color: blue;
}
.box{
font-size: 500px;
}
p.box{
background-color: red;
}
</style>
</head>
<body>
<div id="miss">类类</div>
<p class="box">蕾蕾</p>
</body>
</html>"
后代选择器（重点）
选择器+空格+选择器{属性：值;}
"后代选择器首选要满足包含（嵌套）关系。
父集元素在前边，子集元素在后边。
特点：无限制隔代。
只要能代表标签，标签、类选择器、ID选择器自由组合。"
"例子；<!DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""UTF-8"">
<title>Document</title>
<style type=""text/css"">
div p span{
font-size : 50px;
color :blue;
background-color :red;
}
</style>
</head>
<body>
<div>
<p><span>leiipkajofaj</span></p>
</div>
</body>
</html>"
子代选择器
选择器>选择器{属性:值;}
特点：选中直接下一代元素。
<!DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""UTF-8"">
<title>Document</title>
<style type=""text/css"">
div>p>span{
font-size: 100px;
color: red;
background-color: green;
}
div>span{
font-size: 100px;
color: red;
background-color: green;
}
</style>
</head>
<body>
<div>
<p><span>123121231</span></p>
<span>awdawdawdd</span>
</div>
</body>
</html>"
并集选择器
选择器+，+选择器+，选择器{属性:值;}
例子：<!DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""UTF-8"">
<title>Document</title>
<style type=""text/css"">
p,div,span{
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<p>啥华为几大口味</p>
<div>asdkawpl</div>
<span>awkdakwp] k</span>
</body>
</html>"
3.文本元素
<!DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""UTF-8"">
<title>Document</title>
<style type=""text/css"">
div{
font-size: 106px;
font-weight: 800;
font-style: italic;
line-height: 40px;
}
</style>
</head>
<body>
<div>14威武</div>
</body>
</html>
3.1属性 font-size:16px; 文字大小
Font-weight: 700 ;
值从100-900，文字粗细，不推荐使font-weight:bold
Font-family:微软雅黑; 文本的字体
Font-style: normal | italic; normal 默认值 italic 斜体
line-height: 行高
3.2 文本属性连写
font: font-style font-weight font-size/line-height font-family;
"◆：注意：font:后边写属性的值。一定按照书写顺序。
文本属性连写文字大小和字体为必写项。
"
Font:italic 700 16px（字体大小）/40px（字体行高） 微软雅黑;
3.3 文字的表达方式
直接写中文名称。
写字体的英文名称。
unicode 编码：
字体名称 英文名称 Unicode
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 miscrosoft yahei \5FAE\8F6F\96C5\5ED1
第一步：f12
第二步：找到console
第三步：输入escape(“宋体”) 注意英文的括号和双引号。
4.样式表书写位置
◆内嵌式写法
<head>
<style type=”text/css”>
样式表写法
</style>
</head>
◆外链式写法
写在head里，<link rel=”stylesheet” href=”1.css”>
◆行内样式表
<h1 style="font-size:30px; color:red;">14</h1>
◆三种写法特点:
★内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。
★外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。
★行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。 （不推荐使用）
5 标签分类/显示方式
5.1块元素
典型代表,Div,h1-h6,p,ul,li
特点: ★独占一行
★可以设置宽高
★ 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
5.2行内元素
典型代表 span ,a, ,strong , em, del, ins
特点：★在一行上显示
★不能直接设置宽高
★元素的宽和高就是内容撑开的宽高。
5.3行内块元素(内联元素)
典型代表 input img
特点：★在一行上显示
★可以设置宽高
5.4块元素、行内元素
◆块元素转行内元素
display:inline;
例子：
div,p{
display: in line;
width: 80px;
height: 20px;
background-color: red;
}
◆行内元素转块元素
display:block;
例子：
span{
display: block;
width: 500px;
height: 500px;
background-color: #999;
}
◆块和行内元素转行内块元素
display:inline-block;
例子：
div,a,span,strong{
display: inline-block;
width: 300px;
height: 200px;
background-color: yellow;
text-align: center;
}
6.css三大特性
6.1层叠性
当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。
例子：
<style type="text/css">
.box{
font-size: 50px;
color: red;
}
.box2{
font-size: 50px;
color: blue;
}
</style>
5.2继承性
继承性发生的前提是包含（嵌套关系）
★文字颜色可以继承
★文字大小可以继承
★字体可以继续
★字体粗细可以继承
★文字风格可以继承
★行高可以继承
总结：文字的所有属性都可以继承。
◆特殊情况：
h系列不能继承文字大小。
a标签不能继承文字颜色。
5.3优先级
默认样式<标签选择器 0<类选择器 10<id选择器 100<行内样式 1000<!important 1000以上
◆优先级特点
★继承的权重为0
★权重会叠加
６链接伪类
a:link{属性:值;} a{属性:值}效果是一样的。
a:link{属性:值;} 链接默认状态
例子：
a:link{ a:{
color:pink; color:pink;
} }
a:visited{属性:值;} 链接访问之后的状态
例子：
a:visited{
color: green;
}
a:hover{属性:值;} 鼠标放到链接上显示的状态
a:hover{
color:yellow;
}
a:active{属性:值;} 链接激活的状态
a:active{
color:blue;
}
a:focus{属性:值；} 获取焦点
7.1超链接文本修饰
text-decoration: none不要下划线|
underline 要下划线 |
line-through 删除线
超链接简写格式：a【#】*9
nav 导航条
综合案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.nav{
height: 60px;
background-color: green;
text-align: center;
}
a{
display: inline-block;
width: 80px;
height: 60px;
text-decoration:none;
}
a.public{
font-weight: 700;
color: #f14400;
}
a:hover{
background-color: #eee;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="public">天猫</a>
<a href="#" class="public">聚划算</a>
<a href="#" class="public">超市</a>
<a href="#">头条</a>
<a href="#">阿里旅行</a>
<a href="#">淘抢购</a>
<a href="#">苏宁易购</a>
<a href="#">电器商场</a>
<a href="#">只能生活</a>
</div>
</body>
</html>
６.1文本修饰
text-decoration: none | underline | line-through
７背景属性
７.1 background-color 背景颜色
７.2 background-image 背景图片
７.3 background-repeat repeat (默认) | no-repeat 不平铺| repeat-x x轴平铺 | repeat-y y轴平铺 背景平铺
７.4 background-position left 左边 | right 右边 | center 中间 | top 顶部 | bottom 底部 背景定位
★方位值只写一个的时候，另外一个值默认居中。
★写2个方位值的时候，顺序没有要求。
★写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。
７.5 background-attachment 背景是否滚动 scroll 滚动 | fixed 不滚动
７.6背景属性连写
★：连写的时候没有顺序要求，url为必写项。
例子:
background:red url("图片路径") no-repeat bottom scroll;
在body可以添加全屏背景图片
例子：
background: url(图片/images1/bg.jpg) no-repeat center center fixed;
8 行高
◆浏览器默认文字大小
浏览器默认文字大小：16px
行高：是基线与基线之间的距离
行高=文字高度+上下边距
一行文字行高和父元素高度一致的时候，垂直居中显示。
8.1 行高的单位
行高单位 文字大小 值
20px 20px 20px
2em 20px 40px
150% 20px 30px
2 20px 40px
总结:单位除了像素以为，行高都是与文字大小乘积。
行高单位 父元素文字大小 子元素文字大小 行高
40px 20px 30px 40px
2em 20px 30px 40px
150% 20px 30px 30px
2 20px 30px 60px
总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
◆推荐行高使用像素为单位。
9 盒子模型
9.1边框 border
Border-top-style: solid 实线
dotted 点线
dashed 虚线
Border-top-color 边框颜色
Border-top-width 边框粗细
Border-bottom-style:dashed;边框底部样式:虚线;
Border-bottom-color:red; 边框底部颜色:红色;
Border-bottom-width:5px; 边框底部线的宽度；
border:0 none;
outline-style:none;
◆边框属性的连写
特点：没有顺序要求，线型为必写项。
例子:
.box{
width: 300px;
height: 300px;
background: #999;
border-top-style: solid;
border-top-color: red;
border-top-width: 5px;
}
◆四个边框值相同的写法
例子：
border-top: red solid 5px;
特点：没有顺序要求，线型为必写项。
9.2 框合并 border-collapse:collapse;
例子：
table{
width: 300px;
height: 500px;
border:red 1px solid;
border-collapse:collapse;
}
td{
border:red 1px solid;
}
9.3获取焦点
例子：
.box{
background:#ccc;
border:0 none;
outline-style:none;
border:1px dashed green;
}
.box:focus{
background:red;
}
label for id 获取光标焦点
<label for="box">用户名:</label><input type="text" class="box" id="box"><br><br>
9.4内边距
Padding-left | right | top | bottom
例子:
.box{
height: 300px;
width: 500px;
padding-left: 50px;
padding-right: 50xp;
padding-top: 50px;
padding-bottom: 50px;
}
◆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: 0 auto 让盒子居中
9.5外边距
margin-left | right | top | bottom
例子：
.box{
margin-left: 30px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 20px;
}
◆外边距连写
Margin: 20px; 上下左右外边距20PX
Margin: 20px 30px; 上下20px 左右30px
Margin: 20px 30px 40px; 上20px 左右30px 下 40px
Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
◆垂直方向外边距合并
两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。
◆嵌套的盒子外边距塌陷
解决方法: 1 给父盒子设置边框
2 给父盒子overflow:hidden; bfc 格式化上下文
总结：行内元素可以定义左右的内外边距，上下可以忽略掉。
10 文档流（标准流）
元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父级元素的边框换行。
11 浮动布局
float: left | right
特点：
★元素浮动之后不占据原来的位置（脱标）
★浮动的盒子在一行上显示
★行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）
12 浮动的作用
◆文本绕图
◆制作导航
◆网页布局
13 清除浮动
当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。
◆清除浮动不是不用浮动，清除浮动产生的不利影响。
◆清除浮动的方法
clear: left | right | both
工作里用的最多的是clear:both;
★额外标签法
在最后一个浮动元素后添加标签,。
例子：
<div class="Header">Header</div>
<div class="nav">
<div class="Center">Center</div>
<div class="Sideebar">Sideebar</div>
<div style="clear:both;"></div>
</div>
<div class="Foote">Footer</div>
★给父集元素使用overflow:hidden; bfc
如果有内容出了盒子，不能使用这个方法
例子：
.nav{
margin: 10px 0;
overflow:hidden;
}
</style>
</head>
<body>
<div class="Header">Header</div>
<div class="nav">
<div class="Center">Center</div>
<div class="Sideebar">Sideebar</div>
</div>
<div class="Foote">Footer</div>
★伪元素清除浮动 推荐使用
例子： .clearix::after{
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
.clearix{
zoom:1；
}
</style>
</head>
<body>
<div class="heard"></div>
<div class="box clearix">
<div class="left"></div>
<div class="miss">
<div class="center-top"></div>
<div class="center-bottom"></div>
</div>
<div class="right"></div>
</div>
<div class="footer"></div>
14 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; }
15 Overflow
overflow:visble 默认值。内容不会被修剪，会呈现元素框之外。
overflow:hidden 内容会被修剪，并且其余内容是不可见。
overflow:scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。
overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便显示查看其余内容。
16.定位
定位方向:left | right | top | bottom
◆position:static; 静态定位。默认值，就是文档流。
◆绝对定位
position: absolute;
特点:
★元素使用绝对定位之后不占据原来的位置（脱标）
★元素使用绝对定位，位置是从浏览器出发。
★嵌套的盒子，父盒子没有使用定位，子 盒子绝对定位，子盒子位置是从浏览器出发。
例子：
<style type="text/css">
.miss{
background:red;
width: 300px;
height: 300px;
position: absolute;
}
.box{
background: green;
width: 100px;
height: 100px;
position: absolute;
left:10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="miss">
<div class="box"></div>
</div>
</body>
</html>
◆相对定位
position:relative;
特点：
★使用相对定位，位置从自身出发。
★还占据原来位置。
★子绝父相（父元素相对定位，子元素绝对定位）
★行内元素使用相对定位不能转行内块
例子：
body{
margin: 0;
}
.box{
width: 1266px;
height: 457px;
margin:0 auto;
position: relative;
}
.nav{
position: absolute;
top: 0px;
left:0px;
}
.left{
position: absolute;
top:200px;
left: 250px;
}
.right{
position: absolute;
top:200px;
right: 40px;
}
◆固定定位
position:fixed;
特点：
★固定定位之后，不占据原来的位置（拖标）
★元素使用固定定位之后，位置从浏览器出发。
★元素使用固定定位之后，会转化为行内块（不推荐使用，推荐使用display-inline-block;）
小技巧总结：
margin:0;去除内边距
padding:0;去除外边距
list-style:none;去除li前面的圆点符号
border:0;IE中图片带有边框，使用border去除边框
text-decoration:none;去除超链接文字下面的下划线
display: block;将两张图片设置为块元素，可以 去图片的间隙
z-index:数值 ;值越大越在上面，指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
@media定义和使用
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
@media screen and(min-width:1585px){
}
vertical-align: top;使用这条命令可以使元素顶对齐
使图片居中对齐直接给图片宽高
.banner{
width: 980px;
height: 597px;
margin: 0 auto;
}
使用过浮动的可以设置父盒子高度或者使用以下清除浮动
.new::after{
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
17 定位的盒子居中显示
★:margin:0 auto; 只能让标准流(文档流)的盒子居中对齐。
★定位的盒子居中：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)
例子：
body{
padding: 0;
margin:0 ;
}
.box{
height: 500px;
background: #aaa;
position: relative;
}
.nav{
width: 960px;
height: 60px;
background: #111;
margin: 0 auto;
position: absolute;
bottom: 0 ;
left:50%;
margin-left:-480px;
}
18 标签包含规范
◆div可以包含所有的标签。
◆p标签不能包含div h1等标签。
◆h1可以包含p，div等标签。
◆行内元素尽量包含行内元素，行内元素不要包含块元素。
19 css可见性
overflow:hidden; 溢出隐藏
visibility:hidden; 隐藏元素 隐藏之后还占据原来的位置。
display:none; 隐藏元素 隐藏之后不占据原来的位置。
display:block; 元素可见
display:none和display:block常配合js使用。
20 css之内容移除（网页优化）
第一种方法:
例子：
a{
display:inline-block;
text-indent:-5000em;
}
第二种方法:
例子：
.box{
width:300px;
height:0;
background:red;
padding:100px;
overflow:hidden;
}
20 属性选择器
例子：
<style type="text/css">
input[type="text"]{
height: 100px;
width: 100px;
background: red;
}
</style>
</head>
<body>
<input type="text" >
<input type="button" value="提交">
</body>
</html>
精灵图案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 24px;
height: 19px;
background: url("my.png") 0 -74px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
