字体及样式
-
字体
font-weight:
font-style:italic; 斜体
font-family:cursive; 字体 -
颜色
（1）三原色：红、绿、蓝
（2）颜色函数：rgb(a,b,c) 0-255 000-fff
-
单位
px：一个像素只能展示一个颜色 屏幕分辨率即像素 像素点越大，屏幕分辨率越次
像素是一个相对单位font-size：16px
1 em = 1 * font-size
因此em是随着px的变化而变化的，这也就是用em来做首行缩进的单位的巧妙之处 -
段落
text-align:left center right 对齐方式 水平居中
line-height: 20px 单行文本所占的高度
若是1.2倍的行高，则可以使用1.2emtext-indent: 2em 首行缩进
单行文本所占高度等于容器高度，则此文本在垂直方向居中
-
文本装饰
原价50元
del{
text-decoration:none; 效果无线
} -
鼠标样式（调用的是系统样式）
cursor:pointer; 鼠标成小手
cursor:help; 鼠标成问好 -
边框
border:1px solid black 边框的粗细、边框的线为实线、颜色 复合属性
border-width:10px
border-style: dotted（点状虚线） dashed（条状虚线） solid（实线）border-left-color:transparent（透明色）
-
注意点
img 属性设置宽后，其高也会同比例缩放。
选择器及其权重
- 派生选择器
直接关系：
<div class="wrapper">
<strong class="box">
<em>demo</em>
</strong>
</div>
.wrapper .box .em{
background-color:black;
}
间接关系：
<div>
<em>demo_1</em>
<strong>
<em>demo_2</em>
</strong>
</div>
div em{
background-color:black;
}
-
直接子元素选择器
demo_1 demo_2div > em{
blackground-color:black;
} -
属性选择器
demo_1demo_2demo_3
[class=“demo”]{
background-color:red;
} -
并列选择器
demo_1demo_2demo_3
div[class=“demo”]{
background-color: red;
}div.demo{
background-color: green;
} -
分组选择器
demo_1demo_2demo_3
div,
em,
p{
background-color: red;
} -
伪类选择器
www.taobao.com
a{
text-decration:none;
}
a:hover{
text-decration:underline;
background-color:#f40;
color:#fff;
font-size:16px;
font-weight:bold;
font-family:arial;
border-radius:10px;
} -
伪元素
伪元素天生就是行级（inline）元素，要想让一些css属性在它身上起作用，可以将其display设为inline-block。
content 只能用在伪元素里面。
<ui class="nav">
<li class="item">
<a href="#">天猫</a>
</li>
<li class="item">
<a href="#">聚划算</a>
</li>
<li class="item">
<a href="#">天猫超市</a>
</li>
</ui>
*{
margin: 0;
padding: 0;
color: #424242;
font-family: arial;
}
a{
text-decoration: none;
}
.nav::after{
content: "";
display: block;
clear: both;
}
.nav{
list-style: none;
}
.nav .item{
float: left;
margin: 0 10px;
height: 30px;
line-height: 30px;
}
.nav .item a{
padding: 0 5px;
color: #f40;
font-weight: bold;
height: 30px;
display: inline-block;
border-radius: 15px;
}
.nav .item a:hover{
background-color: #f40;
color: #fff;
}
-
权重
通配符（*） 0
标签|伪元素 1
class|属性|伪类 10
id 100
行间样式 1000
!important Infinity
当权重一样时，后面的css选择器表达式会覆盖前面的css选择器表达式，即展示后面表达式的css效果。
行级元素和块级元素
- 行级元素（内敛元素 inline）
feature：内容决定元素所占的位置，不可以通过css改变宽高。
<span> <strong> <a> <em> <del>
- 块级元素（block）
feature：独占一行，可以通过css改变宽高。
<div> <p> <ol> <li> <ul> <from> <adress>
- 行级块元素（inline-block）
feature：内容决定大小，可以改宽高
<img src="fly.jpg">
这些标签都可以通过修改其内部的隐式属性display，来更改其是块级元素，行级元素还是行级块元素。
-
凡是带有inline的属性，都具有文字特性。所以以下这种情况不用特意修改：
<img src="fy.jpg"><img src="fy.jpg"><img src="fy.jpg"><img src="fy.jpg">img{
margin-left:-6px;
} -
注意点
position:abolute;
float:left/right;
打内部把元素转换成inline-block：可以改变宽高123
span{
position:abolute;
with:100px;
height:100px;
backround-color:red;
}行级元素只能嵌套行级元素，块级元素可以嵌套任何元素。
p 标签内不能套块级元素 a 标签里不能套 a 标签。
常用的开发习惯
-
先定义功能，后选择样式。
-
标签自定义。
em{
font-style:normal’
color:#c00;
}
ul{
list-style:none;
padding:0;
margin:0;
} -
通配符选择器的权重为0，适合初始化所有标签。
*{
padding:0;
margin:0;
text-decration:none;
} -
如果a标签下面有image的话，让它的border为0。
a img{
border:0;
}
盒子模型和层模型
- 盒子模型
1、盒子壁：border
2、内边距：padding
3、外边距：margin
4、盒子内容：width+height
//上、右、下、左
paddding:100px 150px 200px 250;
//上、左右、下
padding:100px 150px 200px;
//上下、左右
padding:100px 150px;
//上
padding-top:100px;
padding:100px 0 0 0
//border-width 类似于padding
-
层模型
//底
bottom://透明度
opacity:absolute：相对于最近的有定位的父级进行定位，如果没有，相对于文档进行定位。（脱离原来的位置进行定位）
relative：相对于原来的位置进行定位。（保留原来的位置进行定位）
fixed：固定定位，相对于可视区窗口，通常用于广告定位。
经典案列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DOCUMENT</title>
<link rel="stylesheet" type="text/css" href="demo_6.css">
</head>
<body>
<div class="demo"></div>
<div class="box"></div>
</body>
//demo_6.css
*{
margin: 0;
padding: 0;
}
.demo{
position: relative;
left: 100px;
top: 100px;
background-color: red;
width: 100px;
height: 100px;
opacity: 0.5;
}
.box{
width: 150px;
height: 150px;
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DOCUMENT</title>
<link rel="stylesheet" type="text/css" href="demo_7.css">
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="box">
</div>
</div>
</div>
</body>
//demo_7.css
.wrapper{
margin-left: 100px;
width: 200px;
height: 200px;
background-color: orange;
}
.content{
position: relative;
margin-left: 100px;
width: 100px;
height: 100px;
background-color: black;
}
.box{
position: absolute;
left: 50px;
width: 50px;
height: 50px;
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DOCUMENT</title>
<link rel="stylesheet" type="text/css" href="demo_8.css">
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
//demo_8.css
*{
margin: 0;
padding: 0;
}
div{
position: fixed;
left: 0;
top: 100px;
width: 100px;
height: 100px;
background-color: red;
}
//定位 居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DOCUMENT</title>
<link rel="stylesheet" type="text/css" href="demo_9.css">
</head>
<body>
<div></div>
</body>
</html>
//demo_9.css
*{
margin: 0;
padding: 0;
}
div{
position: fixed;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
background-color: red;
margin-left: -50px;
margin-top: -50px;
}
居中五环和两栏布局
-
居中五环
DOCUMENT //demo_9.css
*{
margin: 0;
padding: 0;
}.plat{
position: absolute;
left: 50%;
top: 50%;
margin-top: -93px;
margin-left: -190px;
width: 380px;
height: 186px;
}.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
position: absolute;
width: 100px;
height: 100px;
border: 10px solid black;
border-radius: 50%;
}.circle1{
border-color: red;
left: 0;
top: 0;
}.circle2{
border-color: green;
left: 130px;
top: 0;
}.circle3{
border-color: yellow;
left: 260px;
top: 0;
}.circle4{
border-color: blue;
left: 75px;
top: 70px;
}.circle5{
border-color: purple;
left: 195px;
top: 70px;
} -
两栏布局
DOCUMENT //demo_10.css
*{
margin: 0;
padding: 0;
}.right{
position: absolute;
right: 0;
width: 100px;
height: 100px;
background-color: #fcc;
}.left{
margin-right: 100px;
height: 100px;
background-color: #123;
}
BFC
- 定义
块级格式化上下文。
CSS把HTML中的每一个元素都当作一个盒子，并且每一个盒子里面都有一套渲染规则。
- 如何触发一个盒子的BFC（改变渲染规则）
结合实际需求，选择触发的方式
position:absolute;
display:inline-block;
float:right/left;
overflow:hidden; //溢出盒子的部分隐藏展示
两个经典bug
-
margin塌陷：父子嵌套的元素，垂直方向的margin，它俩会粘合在一起，取最大的值。
DOCUMENT //demo_11.css
*{
margin: 0;
padding: 0;
}.wrapper{
margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: black;
overflow: hidden;
}.content{
margin-left: 50px;
margin-top: 50px;
width: 50px;
height: 50px;
background-color: green;
} -
margin合并：两个兄弟结构的元素，垂直方向的margin是合并的。
DOCUMENT 123 23412//demo_12.css
*{
margin: 0;
padding: 0;
}.box1{
background-color: red;
margin-right: 100px;
}.box2{
background-color: green;
margin-left: 100px;
}.demo1{
margin-bottom: 100px;
background-color: red;
}.demo2{
margin-top: 100px;
background-color: green;
}.wrapper{
overflow: hidden;
}
注意点：虽然这样可以通过触发BFC来解决这个bug，所以这个bug我们不解决了。
浮动模型
-
浮动元素产生了浮动流。
所有产生浮动流的元素，块级元素看不到它们； 而产生了BFC的元素和文本类属性（inline）的元素可以看到它们。报纸类布局
img{
float:left;
width:100px;
} -
浮动站队的边界是父级的边界。
-
浮动元素并不是分层，只是产生了浮动流，这个浮动流对各元素的影响不一样。
-
浮动元素脱离了文档流，不能主动的撑开父级。
-
浮动元素形成文字环绕图片样式的原理：图片虽然脱离了文档流，但是并没有脱离文本流。
-
包裹浮动模型（能清除浮动的必须是块级元素）
DOCUMENT 123demo_15.css
*{ margin: 0; padding: 0; } .wrapper{ border: 1px solid black; } .wrapper::after{ content: ""; display: block; clear: both; } .content{ float: left; color: #fff; background-color: black; width: 100px; height: 100px; } -
综合案例
//初步实现淘宝导航栏
DOCMENT - 天猫
- 聚划算
- 天猫超市
//demo_17.css
*{
margin: 0;
padding: 0;
color: #424242;
font-family: arial;
}a{
text-decoration: none;
}.nav::after{
content: “”;
display: block;
clear: both;
}.nav{
list-style: none;
}.nav .item{
float: left;
margin: 0 10px;
height: 30px;
line-height: 30px;
}.nav .item a{
padding: 0 5px;
color: #f40;
font-weight: bold;
height: 30px;
display: inline-block;
border-radius: 15px;
}.nav .item a:hover{
background-color: #f40;
color: #fff;
}
文字溢出和背景图片的处理
-
单行文本技术实现“…"
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -
多行文本则截断处理。
-
图片处理
div{
width:200px;
height:200px;
border: 1px solid black
background-image: url(fy.jpg)
background-size: 100px 100px;
background-repeat: no-repeat; //不重复出现
//以x轴重复、以y轴重复
repeat-x repeat-y
background-position: 100px 100px; //图片出现的位置
background-position: left center;
background-position: 50% 50%; -
在网站无法加载CSS和JS的时候，全站以HTML的方式仍然能够保持正常运行。
DOCUMENT 明昊昊的小站//demo_19.css
*{
margin: 0;
padding: 0;
}a{
display: inline-block;
text-decoration: none;
color: #424242;
width: 190px;
height: 90px;
border: 1px solid black;
background-image: url(https://minghaohao.oss-cn-beijing.aliyuncs.com/images/002.jpg);
background-size: 190px 90px;/*首行缩进*/ text-indent: 200px; /*强制不换行*/ white-space: nowrap; /*溢出隐藏*/ overflow: hidden;}
DOUCMENT 明昊昊的小站//demo_20.css
*{
margin: 0;
padding: 0;
}a{
display: inline-block;
text-decoration: none;
color: #424242;
width: 190px;
height: 0px;
padding-top: 90px;
overflow: hidden;
border-top: 1px solid black;
background-image: url(https://minghaohao.oss-cn-beijing.aliyuncs.com/images/002.jpg);
background-size: 190px 90px;}
知识点补充
-
导航栏自适应技巧
DOCUMENT </div> </div>//demo_21.css
*{
margin: 0;
padding: 0;
}.wrapper{
height: 30px;
background-color: #123;
}.content{
margin: 0 auto;
width: 1200px;
height: 30px;
background-color: #0f0;
} -
设置：和文本类元素里面的文字，其底部的对齐方式。
DOCUMENT 123hehe//demo_22.css
*{
margin: 0;
padding: 0;
}span{
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
font-size: 50px;
vertical-align: -5px;
/vertical-align: middle;/
} -
W3C标准：
（1）定义：
万维网（1994）联盟标准，其为一系列标准的集合。英文名：world wide web consortium。
（2）网页：结构、样式、行为。结构、行为、样式相分离。
- 网页的设计思想：
（1）首先确定布局，将整个页面分成大的区域。
（2）确定大的区域的范围尺寸，利用div布局并且设置固定宽高和边框。
（3）细分每个盒子中的子布局，实现具体样式。
扫一扫
7747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
