CSS样式
2017-08-03 21:52 tlnshuju 阅读(201) 评论(0) 编辑 收藏 举报
Css样式表:
1.样式表的分类:
<1>.使用内联样式:样例模板:(为p段落设置样式)
<p style = "color:Red;font-size:25pt;">
段落文本(p)
</p>
特点:(仅仅针对被标记的那一个P标签有效)
<2>.内部样式:在<head>元素中加入(为h1标题设置样式)
<style type = "text/css">
h1{color:Bule;font-size:20pt;}
</style>
特点:对某个页面的全部h1标签有效;可是仅仅对一个页面有效
无法对还有一个html有效
<3>.外部样式表:(对导入的全部页面都有效提高代码重用性等)
须要导入:<link type="text/css" rel ="stylesheet"
href = "外部样式表的路径"/>
2.样式表的优先级:
内联样式优先级最高
内部样式,外部样式看谁在前面,谁在前面谁的优先级高
3.选择器
3.1 选择器分类:
3.1.1 标签选择器
<style type = "text/css">
label,span,等等{
定义样式
}
p span{
定义样式(p标签下的span标签
会先把p标签定义的样式应用上,再使用
span标签
a b c{
(a下的b下的c)
}
</style>
3.1.2 类选择器
.a{
定义样式
}
(使用方式:
<div class="a">
内容
</div>
)
3.1.3 ID 选择器
#aa{
定义样式
}
(使用方式:
<div id="a">
内容
</div>
)
3.1.4 伪类选择器
a:link{
}
a:hover{
}
a:visited{
}
复杂选择器:
使用方法1:
选择器1 选择器2{
}
#a a{
(#a选择器下的a选择器)
}
使用方法2:
选择器1,选择器2{
}
4.1一般不用table布局(变化小)<table></table>
1.样式表的分类:
<1>.使用内联样式:样例模板:(为p段落设置样式)
<p style = "color:Red;font-size:25pt;">
段落文本(p)
</p>
特点:(仅仅针对被标记的那一个P标签有效)
<2>.内部样式:在<head>元素中加入(为h1标题设置样式)
<style type = "text/css">
h1{color:Bule;font-size:20pt;}
</style>
特点:对某个页面的全部h1标签有效;可是仅仅对一个页面有效
无法对还有一个html有效
<3>.外部样式表:(对导入的全部页面都有效提高代码重用性等)
须要导入:<link type="text/css" rel ="stylesheet"
href = "外部样式表的路径"/>
2.样式表的优先级:
内联样式优先级最高
内部样式,外部样式看谁在前面,谁在前面谁的优先级高
3.选择器
3.1 选择器分类:
3.1.1 标签选择器
<style type = "text/css">
label,span,等等{
定义样式
}
p span{
定义样式(p标签下的span标签
会先把p标签定义的样式应用上,再使用
span标签
a b c{
(a下的b下的c)
}
</style>
3.1.2 类选择器
.a{
定义样式
}
(使用方式:
<div class="a">
内容
</div>
)
3.1.3 ID 选择器
#aa{
定义样式
}
(使用方式:
<div id="a">
内容
</div>
)
3.1.4 伪类选择器
a:link{
}
a:hover{
}
a:visited{
}
复杂选择器:
使用方法1:
选择器1 选择器2{
}
#a a{
(#a选择器下的a选择器)
}
使用方法2:
选择器1,选择器2{
}
#a,a{
并列
}
4 经常使用的样式属性
4.1一般不用table布局(变化小)<table></table>
经常使用层布局<div>border= ""</div>
盒子模型
火狐浏览器用查看-firebug进行调试