在用html5写网页的时候,结合CSS能够让页面更美观。由于只在做课程设计和实习的时候使用过,并没有系统的学习过,使得自己对于CSS的使用一直处于能用,但是容易弄混的阶段。为了弄清楚CSS样式表的使用,特地看书系统学习,现总结如下:

CSS是通过选择器对不同的HTML标签进行控制,从而实现各种效果。常用的CSS选择器有标签选择器、类别选择器、id选择器。

标签选择器的使用


HTML网页是由很多标签组成的,例如图像标签<img>、超链接标签<a>、表格标签<table>,CSS标签选择器就是声明页面中哪些标签使用哪些CSS样式。例如设置a标签的字体和颜色样式风格:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <style>
a{ font-size: 20px; color: #F93; } </style> </head> <body> <a href="">标签选择器</a>
</body> </html>
运行结果:



标签选择器有一定的局限性,如果声明标签选择器,那么页面中所有的该标签内容都会有相应的变化。

类别选择器的使用

类别选择器的名称由用户自己定义,并以"."号开头,要应用类别选择器的HTML标签,只需使用class属性来声明即可。例如设置h标签的字体样式:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <style>
.one{ font-family: "宋体"; font-size: 24px; color: red; } .two{ font-family:
"宋体"; font-size: 16px; color: blue; } </style> </head> <body> <h2
class="one">类别选择器one</h2> <p>正文内容</p> <h2 class="two">类别选择器two</h2> <p>正文内容</p>
</body> </html>
运行结果:



一个HTML标签不仅可以使用一种类别选择器,还可以同时加载多个类别选择器的样式,在多种类别选择器之间用空格进行分割即可。例如设置div标签的样式:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <style>
.one{ font-family: "宋体"; font-size: 24px; } .two{ background-color: green; }
</style> </head> <body> <div class="one">你好</div> <div class="two">你好</div>
<div class="one two">你好</div> </body> </html>
运行结果:



一般情况下class定义的样式可以重复调用:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <style>
.one{ font-family: "宋体"; font-size: 24px; color: red; } </style> </head> <body>
<div class="one">你好</div> <div class="one">很高兴见到你</div> </body> </html>
运行结果:



id选择器的使用


id选择器是通过HTML页面中的id属性来选择增添样式,与类别选择器基本相同,但是由于HTML页面中不能包含两个相同点的id标记,因此定义的id选择器也就只能被使用一次。命名id选择器要以"#"开头,后面加HTML标记中的id属性值。例如设置p标签的样式:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <style>
#one{ font-size: 18px; } #two{ font-size: 24px; } #three{ font-size: 36px; }
</style> </head> <body> <p id="one">ID选择器</p> <p id="two">ID选择器</p> <p
id="three">ID选择器</p> </body> </html>
运行结果:



 

 

在了解了用CSS设置样式后,如何实现在页面中包含CSS样式呢?实现方式有行内样式、内嵌式和链接式。

行内样式

行内样式是直接定义在HTML标签之内,通过style属性来实现,容易理解,但是灵活性不强。例如通过行内样式定义文字的颜色和大小:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> </head>
<body> <p style="color: #F00;font-size: 36px;">行内样式</p> <p style="color:
#F00;font-size: 24px;">行内样式</p> <p style="color: #F00;font-size:
18px;">行内样式</p> </body> </html>
运行结果:



内嵌式


内嵌式样式就是在页面中使用<style></style>标记将CSS样式包含在页面中,内嵌式样式表的形式没有行内标记表现的直接,但是能够使页面更加规整,更加便于维护。示例代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <style>
.one{ font-size: 36px; color: red; } .two{ font-size: 24px; color: yellow; }
.three{ font-size: 18px; color: greenyellow; } </style> </head> <body> <p
class="one">行内样式</p> <p class="two">行内样式</p> <p class="three">行内样式</p> </body>
</html>
运行结果:



链接式


链接外部CSS样式表是最常用的一种引用样式表的方式,将CSS样式定义在一个单独的文件中,然后再HTML页面中通过<link>标签引用,是一种最为有效的使用CSS样式的方式。实例:

首先创建一个.css样式表,我这里取名为“demo.css”,如下图:



在该表中定义标签样式如下:
h1{ color:#6CFw; font-family: "trebuchet ms",arial,helvetica,sans-serif; } p{
color: #F0Cs; font-weight: 200; font-size: 24px; }


在页面中通过<link>标签将CSS样式表引入到页面中,此时CSS样式表定义的内容将自动加载到页面中。代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>示例</title> <link
href="css/demo.css" /> </head> <body> <h1>页面一</h1> <p>链接式</p> </body> </html>
运行结果如下:



<link>标签的语法结构如下:
<link rel='stylesheet' href='path' type='text/css'> /*参数说明: *
rel:定义外部文档和调用文档之间的关系 *href:CSS文档的绝对路径或相对路径 *type:指的是外部文件的MIME类型 */
 

友情链接
KaDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:637538335
关注微信