3月22日 样式表
CSS(Cascading Style Sheet,层叠样式表),作用是美化HTML网页。
一、样式表
(一)样式表的分类
1.内联样式表
<p style="font-size:14px";>内联样式表</p>
2.内嵌样式表
必须写在head标签里面;
<style>
p
{
样式
}
</style>
3.外部样式表
新建一个CSS文件,用来放置样式表。如果要在HTML文件中调用样式表,需要在HTML文件中点右键-CSS样式表-附加样式表。一般用link连接方式。
(二)选择器
1.标签选择器。用标签名做选择器。
<style type="text/css">
p
{
样式
}
</style>
2.class选择器。都是以"."开头。
<head>
<style>
.main
{
样式
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
3.ID选择器。以“#”开头。
<head>
<style>
#main
{
样式
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
4.复合选择器
(1)用“,”隔开,表示并列
(2)用空格隔开,表示后代
(3)筛选“.”。
二、样式属性
(一)背景与前景
1.背景
background-color:背景色
background-image:url;设置背景图片
background-attachment:fixed;背景固定
background-attachment:scroll;背景随着字体滚动
background-repeat:no-repeat;背景不平铺
background-position:center;背景居中
background-position:right top;背景放置在右上角
2.前景字体
font-family:"微软雅黑"
font-size:字体大小
font-weight:bold;字体加粗
font-style:italic;字体倾斜
color:字体颜色
text-decoration:underline;下划线
text-align:center;水平居中对齐
vertical-align:middle;垂直居中对齐
text-indent:首行缩进量
line-height;行高
diasplay:none;不显示
visibility:hidden;可视性隐藏
(二)边框和边界
border(表格边框、样式等)、margin(表外间距)。padding(内容与单元格间距)。
border-top;上边框
border-bottom:下边框
border-left:左边框
border-right:右边框
margin:20px opx 20px 0px:顺序为上右下左
padding:内容与边框的间距
链接的style:
a:link 超链接被点前状态
a:visited 超链接点击后状态
a:hover 悬停在超链接时
a:active 点击超链接时