CSS
Cascade Style Sheet（层叠样式表）
结合方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结合方式</title>
<!--可以在head标签里定义style属性-->
<style type="text/css">
p{
color:red;
}
</style>
<!--也可以用link引入,后引入的会覆盖前面定义的，p.css指定了p标签为绿色-->
<link rel="stylesheet" type="text/css" href="p.css">
</head>
<body>
<p>我是绿色的</p>
<!--可以在每个html标签里定义-->
<p style="color:blue">我是蓝色的，覆盖了head里导入的绿色</p>
</body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结合方式1</title>
<!--只对class为one的p标签有效, p.one {} -->
<!-- * {} 对所有标签有效-->
<!-- #one, p {} 对id为one或者p标签有效-->
<!--
选择器{
样式属性键：样式属性值;
样式属性键：样式属性值1 样式属性值2 样式属性值3;
/* 这里面都是注释 */
}
id选择器（保证id在页面中唯一）
#id{
}
类选择器（对类名一样的所有标签）
.类名{
}
伪选择器
选择标签的某个状态，需要配合其他选择器使用
link 未访问过
visited 访问过
hover 悬浮
active 激活，点击
-->
<style type="text/css">
.one {
color:red;
}
p {
color:green;
}
a:link {
color:blue;
}
a:visited {
color:green;
}
a:hover {
color:yellow;
}
a:active {
color:pink;
}
</style>
</head>
<body>
<p>我是绿色的</p>
<!--可以在每个html标签里定义-->
<p style="color:blue">我是蓝色的，覆盖了head里定义的绿色</p>
<p id="one">我是绿色的</p>
<p class="one">我是红色的</p>
<a href="https://www.baidu.com">百度首页</a>
</body>
</html>
字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
p {
font-family:微软雅黑;
color:red;
font-size:18px;
font-style:italic;
}
</style>
<body>
<p>一个p标签</p>
</body>
</html>
背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* p {
background-color: red;
}
*/
body {
background-image: url(image.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
<p>
啊哈哈哈<br/>
啊哈哈哈<br/>
啊哈哈哈<br/>
啊哈哈哈<br/>
</p>
<p>
啊哈哈哈<br/>
啊哈哈哈<br/>
啊哈哈哈<br/>
啊哈哈哈<br/>
</p>
<p>
啊哈哈哈<br/>
啊哈哈哈<br/>
啊哈哈哈<br/>
啊哈哈哈<br/>
</p>
</body>
</html>
块和行标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--块级标签，占据一行，div
行内标签，占据行内一部分，span-->
<body>
<div style="background-color:red;">我是div, 占用一行</div>
<span style="background-color:red;">我是span, 行内</span>
<span style="background-color:red;">我是span, 行内</span>
<span style="background-color:red;">我是span, 行内</span>
</body>
</html>
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
盒子模型的属性
一. 边框系类属性
二. 尺寸属性
三. 边距
*内边距
*外边距
border-color:边框颜色
border-width:边框宽度
border-style:边框样式
border-color: red;
border-width: 1px;
border-style: solid;
margin-left:100px;左外边距
margin-top:100px;
padding-left:100px; 左内边距
padding-top:100px; 上内边距
注意:内边距会延长所在盒子的长或宽
margin/padding复合参数 : 1个值 上下左右
2个值 1.上下 2.左右
3个值 1.上 2.左右 3.下
4个值 1.上 2.右 3.下 4.左
*/
div {
border-color: blue;
border-width: 1px;
border-style: solid;
height: 300px;
width: 300px;
}
#one {
height: 300px;
width: 200px; /*内边距会延长所在盒子的长或宽*/
padding: 100px;
}
#two {
height: 100px;
width: 100px;
margin:10px 20px 30px 40px;
}
</style>
</head>
<body>
<div id="one">
<div id="two" ></div>
</div>
</body>
</html>
2017.3.7
by @sunhaiyu
