css总结

CSS样式：(层叠样式表)

行内样式 ----> <span style="color:blue;">我是中国人</span>

内部样式 ---->
<style>
div{color:pink;}
</style>

外部样式 ----> <link rel="stylesheet" href="style.css">

语言结构

CSS选择器
元素选择器(标签)
派生选择器
id选择器 ----> 唯一性
class选择器
属性选择器
伪类选择器
伪元素

常用的CSS样式

width 宽度
height 高度
color 字体颜色
background-color ---- background-image background 背景设置
[float clear] 浮动
font-size 字体大小
font-weight 字体粗细
font-family 设置字体
border 边框
[margin padding]边距
[posizion] 定位
overflow 溢出
text-align 文本排列方式
line-height 文本行高

visibility：hidden，display:none，transparent，opacity区别：

opacity设置的透明度会被子元素继承，而且无法取消。
transparent不会被子元素继承。
display:none设置该属性后，该对象会在页面上彻底消失。
visibility：hidden视觉上看不见，但它所占据空间的位置仍然存在。

PX特点：
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

css权重：优先级：！important>style（行内元素）>id>class>元素选择器（在这个基础上，考虑就近原则）

实例样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css样式</title>
<style type="text/css">
.p{
200px;
height: 200px;
background-size: 100% 100%;
}
.b{
400px;
height: 200px;
text-align: center;
line-height: 200px;
}
.a{
font-family: "微软雅黑";
font-size: 20px;
}
.d{
text-decoration: none;
}
ul{
list-style-type: none;
}
.content{
outline-color: #f00;
outline-style: solid;
outline- 3px;
}
</style>
</head>
<body>
<div class="p"></div>
<div class="b">中国人</div>
<p class="a">山西</p>
<a href="http://www.yimentu.com" class="d">壹门徒</a>
<ul>
<li>1</li>
<li>2</li>
</ul>
<ol>
<li>3</li>
<li>4</li>
</ol>
<table border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td></td>
</tr>
</table>
<div class="content">我是中国人</div>
</body>
</html>

实例框模型：

!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css框模型</title>
<style>

.box{
200px;
height: 200px;
background: blue;
padding:30px;
box-sizing:border-box;
border: solid red;
}
.box_one{
50px;
height: 50px;
background: red;
float:left;

}
.box_two{
400px;
height:400px;
background:pink;
border-style: solid dotted dashed double;
margin:50px 100px;
}
.kong{
50px;
height:50px;

}

.box_four{
300px;
height:300px;
background:red;
margin-bottom:100px;
}
.box_five{
400px;
height:400px;
background:blue;
margin-top:80px;
}
.box_six{
50
}

</style>
</head>
<body>

实例css定位：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1{
300px;
height: 300px;
background:green;
}
.div2{
100px;
height: 100px;
background:red;
position: relative;
left: 50px;
top: 100px;
}
.div3{
40px;
height: 40px;
background: blue;
position: absolute;
left: 20px;
top: 30px;

}
</style>
</head>

<body>
<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
</div>
</body>
</html>

实例浮动：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style>
.div1{
300px;
height: 300px;
background: #f0f;
float: left;
}
.div2{
300px;
height: 300px;
background: #f00;
}

.div3{
300px;
height: 300px;
background: #0ff;
float: right;
}
li{
list-style: none;
float: right;
}
.box{
1000px;
}
.box1{
300px;
height: 200px;
background:#f0f;
float: left;
}
.box2{
500px;
height: 200px;
background: #f00;
}
.box3{
800px;
height: 400px;
background:#000;
clear: both;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<ui>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>七</li>
<li>八</li>
<li>九</li>
<li>十</li>
</ui>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>

实例选择器：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>

<style>

p{
color:#f00;
}
h1{
color:#0f0;
}
em,h2{
color:#00f;
}
.conten{
color:#f00;
}
.conten{
color:#0f0;
}
.A{
font-weight:bold;
}
.B{
font-family:"宋体";
}
.A.B{
font-weight:bold;
font-family:"宋体";
background-color:#f00;
}
#important{
color:#f00;
}
[title]
{
color:red;
}
h3 em{
color:#f00;
}
h1>strong{
color:#f00;
}
h1+p{
margin-bottom:50px;
}
.d li:first-child{
color:#f00;
}
.d li:last-child{
color:#00f;
}

h1:after{
content:"hello";
}

</style>

<--<p>段落</p>
<h1>标题</h1>

<em>特殊</em>
<h2>标题</h2>

<<p class="conten">大家好</p>
<h4 class="conten"">大家好</h4>
<p class="A B">大家好</p>

<p id="important">ID选择器</p>

<h5 title="标题">标题</h5>

<h3>我是中国你是<em>山西</em>！</h3>

<h1> <strong>中国</strong> <strong>中国</strong> important.</h1>
<h1> <em>really <strong>中国</strong></em> important.</h1>

<div>标题</div>
<div >段落</div>
<!--<ul class="d">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li>4</li>
<li>4</li>
<li>4</li>
</ol>
<h1>waneser</h1>
</body>
</html>