1、样式表书写位置
◆内嵌式写法
<head>
<style type="text/css">
样式表写法
</style>
</head>
◆外链式写法
<link rel="stylesheet" href="1.css">
◆行内样式表
<h1 style="font-size:30px;color:red;">你的名字</h1>
◆三种写法特点:
★内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。
★外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。
★行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。 （不推荐使用）
2、标签分类
2.1、块元素
典型代表：Div ,h1-h6, p, ul ,li
特点: ★独占一行
★可以设置宽高
★ 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致
2.2、行内元素
典型代表：span, a , strong, em, del, ins
特点：★在一行上显示
★不能直接设置宽高
★元素的宽和高就是内容撑开的宽高。
2.3、行内块元素（内联元素）
典型代表：input , img
特点：★在一行上显示
★可以设置宽高
2.4、块元素、行内元素
◆块元素转行内元素
div,p{display:inline;}
◆行内元素转块元素
span{display:block;}
◆块和行内元素转行内块元素
div,a,span,strong{display:inline-block;}
3、css三大特性
3.1、层叠性
当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。
3.2、继承性
继承性发生的前提是包含（嵌套关系）
★文字颜色可以继承
★文字大小可以继承
★字体可以继续
★字体粗细可以继承
★文字风格可以继承
★行高可以继承
总结：文字的所有属性都可以继承。
◆特殊情况：
h系列不能继承文字大小。
a标签不能继承文字颜色。
3.3、优先级
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
◆优先级特点
★继承的权重为0
★权重会叠加
4、链接伪类
a:link{属性:值;} a{属性:值}效果是一样的。
a:link{属性:值;} 链接默认状态
a:visited{属性:值;} 链接访问之后的状态
a:hover{属性:值;} 鼠标放到链接上显示的状态
a:active{属性:值;} 链接激活的状态
：focus{属性:值；} 获取焦点
4.1、文本修饰
text-decoration: none | underline | line-through
5、背景修饰
background-color 背景颜色
background-image 背景图片
Background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺
Background-position left | right | center | top | bottom 背景定位
★方位值只写一个的时候，另外一个值默认居中。
★写2个方位值的时候，顺序没有要求。
★写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。
7.1 背景是否滚动
Background-attachment 背景是否滚动 scroll | fixed
7.2 背景属性连写
★：连写的时候没有顺序要求，url为必写项。
background:red url("图片地址") no-repeat 30px 40px scroll;
案例
导航案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.nav{
height: 50px;
text-align: center;
background-color:#aaa;
}
a{
text-decoration:none;
font-size: 14px;
font-weight: 700;
color: #3c3c3c;
width:100px;
height:50px;
display: inline-block;
}
a.one{
color: #ff4400;
}
a:hover{
text-decoration: underline;
color: #ff4400;
background-color: #D5D7DD;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="one" title="天猫">天猫</a>
<a href="#" class="one" title="聚划算">聚划算</a>
<a href="#" class="one" title="超市">超市</a>
<a href="#" class="one" title="头条">头条</a>
<a href="#" title="阿里旅行">阿里旅行</a>
<a href="#" title="电器城">电器城</a>
<a href="#" title="淘抢购">淘抢购</a>
<a href="#" title="苏宁易购">苏宁易购</a>
<a href="#" title="智能生活">智能生活</a>
</div>
</body>
</html>
简单导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
a{
background-image:url(bgc.png);
background-repeat:no-repeat;
width:120px;
height:50px;
display:inline-block;
}
a:hover{
background-image:url(bg.png);
}
</style>
</head>
<body>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
</body>
</html>
列表显示案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
ul{
list-style:none;
}
ul li{
background:url(li.gif) no-repeat left 4px;
}
li a{
text-decoration: none;
}
a:hover{
color: #9E7878;
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li><a href="#"> 大明星:姜潮魔性拜年道晚安</a></li>
<li><a href="#"> 软萌正太徐浩演绎《小幸运》</a></li>
<li><a href="#"> 漫威绝逼好看的电影镜头合集</a></li>
<li><a href="#"> 从没见过这么搞笑的祖孙组合</a></li>
<li><a href="#"> 史上最容易挨揍的自助餐吃法</a></li>
</ul>
</body>
</html>
搜索框案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body{
word-spacing:-8px;
}
.serch{
height:32px;
width:282px;
background:url(1.jpg) right center no-repeat;
}
</style>
</head>
<body>
<input type="text" value="请输入关键字" class="serch">
</body>
</html>
五彩导航案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
a{
width:120px;
height:58px;
display:inline-block;
text-align:center;
line-height:50px;
color:white;
text-decoration:none;
}
.one{
background:url(images/bg1.png);}
.two{
background:url(images/bg2.png);}
.three{
background:url(images/bg3.png);}
.four{
background:url(images/bg4.png);}
.one:hover{
background:url(images/bg5.png);}
.two:hover{
background:url(images/bg6.png);}
</style>
</head>
<body>
<a href="#" class="one">五彩导航</a>
<a href="#" class="two">五彩导航</a>
<a href="#" class="three">五彩导航</a>
<a href="#" class="four">五彩导航</a>
<a href="#" class="five">五彩导航</a>
</body>
</html>
网友评论