HTML--CSS样式表的基本概念
CSS(Cascading Style Sheet 叠层样式表)
作用:美化HTML网页
(一)样式表分类
一.内联样式表
和HTML联合显示,控制精准,但是可重用性差,冗余多。
例如:<p style="font-size:14px;">内联样式表</p>
二.内嵌样式表
作为一个独立区域内嵌在网页里,必须写在<head>标签里。
例如:
1 <style type="text/css"> 2 3 p //格式对标签p起作用 4 5 { 6 7 样式 8 9 } 10 11 </style>
(对什么标签起作用,可以直接写标签名)
三.外部样式表
新建一个CSS文件,用来放样式表。如果要在HTML文件中调用样式表,需要在HTML文件中点击右键→CSS样式表→附加样式表。一般用link链接方式。
有些标签有些默认的边距,一般写样式表代码的时候会先去除(也可以设置其他样式),如:
1 <style type="txet/css"> 2 3 *//格式对所有的标签都起作用 4 5 { 6 7 margin:0px; 8 9 padding:0px; 10 11 } 12 13 </style>
(二)选择器
1.标签选择器。用标签名做选择器。
1 <style type="text/css"> 2 p //格式对p标签起作用 3 { 4 样式; 5 } 6 </style>
2.class选择器。都是以“.”开头。
<head> <style type="text/css"> .main /*定义样式*/ { heigth:42px; width:100%; text-align:center; } </style> </head> <body> <div class="main"> <!--调用class样式--> </div> </body>
3.ID选择器。以“#”开头。
<div id="样式名"> <head> <style type="text/css"> #main /*定义样式*/ { heigth:42px; width:100%; text-align:center;} </style> </head> <body> <div id="main"> <!--调用id样式--> </div> </body>
4.复合选择器
1)用“,”隔开,表示并列。
<style type=text/css> p,span /*标签p、span两者同样的样式*/ { 样式; } </style>
2)用空格隔开,表示后代。
<style type="text/css"> .main p /*找到使用样式“main”的标签,在该标签里的p标签使用该样式*/ { 样式; } </style>
3)筛选“.”
<style type="text/css"> p.sp /*在标签p中的class=“sp”的标签,执行以下样式*/ { 样式; } </style>
链接的Style
a:link 超链接被点前状态
a:visited 超链接被点后状态
a:hover 悬停在超链接时的状态
a:active 点击超链接时的状态
在定义这些状态时有个顺序 l v h a (必须按照这个顺序)
注:在CSS样式表里,字体的大小后面必须要加上PX,不然设置的值无效。