CSS基础知识简介
什么是CSS？
CSS是层叠样式表（cascading style sheets）
CSS是给html化妆的。
如何使用CSS？
三种方式：
内联方式
内部样式
外部样式
<!doctype html>
<html>
<head>
<title>如何使用CSS</title>
<meta charset="utf-8"/>
<!-- 内部样式 -->
<style type="text/css">
h2 {
color:red;
}
</style>
<!-- 引用style.css -->
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body>
<!-- style属性中写内联样式 -->
<h1 style="color:blue;">使用CSS</h1>
<h2>CSS有3种用法</h2>
<p>1.内联样式</p>
<p>2.内部样式</p>
<p>3.外部样式</p>
</body>
</html>
CSS语法：
语法规范
规则特性
样式优先级
语法规范：
多个样式规则组成
每个样式有两个部分：选择器和样式声明
规则特性：
继承性
层叠性
优先级
相同的样式，如果重复定义，以最后一次的定义为准
<!doctype html>
<html>
<head>
<title>样式特性</title>
<meta charset="utf-8"/>
<style type="text/css">
/*继承性*/
body {
font-family:'微软雅黑','文泉驿正黑','黑体';
}
/*层叠性*/
h1 {
color:red;
}
h1 {
background-color: #ccc;
}
/*优先级*/
p {
color:red;
}
p {
color:blue;
}
</style>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body>
<h1>CSS很好</h1>
<p>用了就知道</p>
</body>
</html>
CSS选择器：
元素选择器
类选择器
id选择器
选择器组
派生选择器
伪选择器
<!doctype html>
<html>
<head>
<title>选择器</title>
<meta charset="utf-8"/>
<style type="text/css">
/*类选择器，选中所有class="importent"的元素*/
.importent {
color:red;
}
/*ID选择器，根据id选中唯一的元素*/
#a1 {
color:blue;
}
/*选择器组，给一组选择器选中的所有元素统一设置样式*/
.importent, #a1 {
background-color:#ccc;
}
/*派生选择器：后代、子元素*/
/*后代选择器*/
/*在p1下选择所有的b元素*/
#p1 b {
color:red;
}
/*子元素选择器*/
/*>表示只找儿子，不找孙子*/
#p1>b {
font-size:50px;
}
/*伪类选择器*/
/*选择从来没点击过的超链接*/
a:link {
color:blue;
}
/*选择已经访问过的超链接*/
a:visited {
color:red;
}
/*选择激活(正被点中)的元素*/
#btn:active {
background-color:blue;
}
/*选择鼠标悬停的目标*/
img:hover {
width:450px;
height:350px;
}
/*选择有焦点的文本框*/
#t1:focus {
background-color: red;
}
</style>
</head>
<body>
<h1 id="a1">Hello.</h1>
<h2 class="importent">How are you?</h2>
<h3 class="importent">I'm fine, thank you.</h3>
<p id="p1">
北京市<u>海淀区<b>北三环</b>西路</u>甲18号<b>中鼎</b>大厦B7
</p>
<p><a href="http://www.tmooc.cn">百度</a></p>
<p><input type="button" value="点我" id="btn"/></p>
<p><img src="../images/pig.png"/></p>
<p><input type="text" id="t1"/></p>
</body>
</html>
解释图片如下：
CSS声明
border与box
背景
背景色，背景图片
border属性：用来设置元素的边框
四边设置：border：width style color；
<!doctype html>
<html>
<head>
<title>border</title>
<meta charset="utf-8"/>
<style type="text/css">
/*四边设置border*/
p {
border:1px dashed #ccc;
width:500px;
height:100px;
}
h1 {
border-left:15px solid #ccc;
border-bottom:2px solid #ccc;
}
div {
width:300px;
height:55px;
border:1px solid red;
overflow:auto;
}
</style>
</head>
<body>
<h1>达记-苍老师传</h1>
<p>苍者，Java老师也！</p>
<div>
苍老师，系达内优秀的Java讲师，Java教学改革的先驱！
同时也是一名摄影大师，他拍的片都很么么哒，人送绰号小冠希！
他最擅长捕捉肉体和灵魂的契合点，折射出对人性的思考与鞭挞！
</div>
</body>
</html>
单边设置：
border-left：width style color；
border-right：width style color；
border-top：width style color；
border-bottom：width style color；
border 颜色表示的三种方法
overflow：当内容溢出元素框是如何处理
visible
hidden
scroll
auto
box模型
框模型（box model）定义了元素边框处理元素边距，边框和外边距的方式
border
margin
padding
四边设置
单边设置
<!doctype html>
<html>
<head>
<title>box</title>
<meta charset="utf-8"/>
<style type="text/css">
p {
border:1px dashed blue;
}
div {
width:100px;
height:50px;
border:3px solid red;
}
/*四边设置内外边距*/
#d2 {
padding:20px;
margin:40px;
background-color:#ccc;
}
/*单边设置*/
#d3 {
padding:20px 40px 20px 40px;
margin:20px 40px 20px 40px;
}
#d4 {
padding-top:20px;
padding-right:40px;
padding-bottom:20px;
padding-left:40px;
margin-top:20px;
margin-right:40px;
margin-bottom:20px;
margin-left:40px;
}
/*对边设置*/
#d5 {
padding:20px 40px;
margin:20px auto;
}
</style>
</head>
<body>
<h1>box模型</h1>
<p>块实际占宽=width+2padding+2margin+2border</p>
<p>块实际占高=height+2padding+2margin+2border</p>
<!-- 默认情况下，div的内外边距都是0 -->
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div id="d4">d4</div>
<div id="d5">d5</div>
</body>
</html>
背景
背景色
background-color属性用于为元素设置背景色，
该属性接受任何合法的颜色值
背景图片
background-image属性用于设置背景图片
默认值是none，表示背景上没有放置任何图片
默认情况下，背景图片在水平和垂直方向上重复出现创建一种称为墙纸的
效果
background-repeat属性可以控制背景图片的平铺效果
可取值：
repeat：在垂直方向和水平方向上重复，位重复值
repeat-x
repeat-y
no-repeat：仅显示一次
background-position属性用于改变背景图片在元素的位置
该属性的取值为：
x% ，y%
x y
left
center
right
top
bottom'
默认情况下，背景图像会随着页面的滚动而移动
可以通过background-attachment属性来改变此特性
默认值是scroll：默认会随文档滚动
可取值fixed：背景图片固定，并不随页面的其余部分滚动
常用语实现称为水印的图像
<!doctype html>
<html>
<head>
<title>背景</title>
<meta charset="utf-8"/>
<style type="text/css">
/*设置背景色*/
body {
background-color:#ccc;
}
/*设置背景图片*/
body {
background-image:url("../images/background.png");
}
/*设置图片平铺效果*/
body {
background-repeat:repeat;
}
/*设置背景图相对位置*/
.airplane {
border:1px solid red;
width:150px;
height:150px;
margin:10px auto;
background-image: url("../images/airplane.png");
background-repeat: no-repeat;
background-position: center;
}
/*固定背景图片*/
body {
background-attachment: fixed;
}
/*整体设置背景*/
.hero {
width:150px;
height:150px;
border:1px solid red;
margin:10px auto;
background: url("../images/hero0.png") no-repeat center;
}
</style>
</head>
<body>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="hero"></div>
</body>
</html>
