目录
CSS样式表
CSS(Cascading Style Sheet)是W3C协会为弥补HTML在显示属性设定上的不足而指定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式，增加了一些新概念，如类、层等，可以对文字重叠、定位等。在CSS还没有引入到页面设计之前，传统的HTML语言要实现页面美化在设计上是十分麻烦的，例如，要设计页面中文字的样式，如果使用传统的HTML语句来设计页面就不得不在每个需要设计的文字上都定义样式。CSS的出现改变了这一传统模式。
CSS规则
在CSS样式表中包括3部分内容：选择符、属性和属性值。语法格式为：
选择符{属性: 属性值;}
语法说明如下。
1.选择符：又称选择器，是CSS中很重要的概念，所有的HTML语言中的标记都是通过不同的CSS选择器进行控制。
2.属性：主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。其中一些属性只有部分浏览器支持，因此使CSS属性的使用变得更加复杂。
3.属性值：为某属性的有效值。属性与属性值之间以" : "号分隔。当有多个属性时，使用“ ；”分隔。
CSS选择器
CSS选择器常用的时标记选择器、类别选择器、包含选择器、ID选择器等。使用选择器即可对不同的HTML标签进行控制，从而实现各种效果。
1.标记选择器
HTML页面是由很多标记组成，例如，图片标记<img>、超链接标记<a>、表格标记<table>等。而CSS标记选择器就是声明页面中哪些标记采用哪些CSS样式。例如，a选择器，就是用于声明页面中所有<a>标记的样式风格。无法精准控制。
标记选择器测试:
<html>
<head>
<style>
a{
font-size:25px;
color:#F93;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">跳转到百度页面</a><br>
<a href="https://www.csdn.net/">跳转到CSDN首页页面</a><br>
<a href="https://www.bilibili.com/">跳转到bilibili首页页面</a><br>
</body>
</html>运行效果:
2.类别选择器
使用标记选择器非常快捷，但是会有一定的局限性，页面如果声明标记选择器，那么页面中所有该标记内容会有相应的变化，例如页面中有3个<a>标记，如要想要每个<a>的显示效果都不一样，使用标记选择器就无法实现了，这时就需要引入类别选择器。
类别选择器的名称有用户自己定义，并以" , "号开头，定义的属性与属性值也要遵循CSS规范。要应用类别选择器的HTML标记，只需使用class属性来声明。
类别选择器测试:
<html>
<head>
<style>
.one{
font-size:25px;
color:#F93;
}
.two{
font-size:50px;
color:red;
}
.three{
font-size:75px;
color:blue;
}
</style>
</head>
<body>
<a class="one" href="https://www.baidu.com/">跳转到百度页面</a><br>
<a class="two" href="https://www.csdn.net/">跳转到CSDN首页页面</a><br>
<a class="three" href="https://www.bilibili.com/">跳转到bilibili首页页面</a><br>
</body>
</html>运行效果:
3.ID选择器
ID选择器时通过HTML页面中的ID属性来进行选择增添样式，与类别选择器的基本相同，但需要注意的是，由于HTML页面中不能包含两个相同的ID标记，因此定义的ID选择器也就只能被使用一次。
命名ID选择器要以" # "号开始，后加HTML标记中的ID属性值。
ID选择器测试:
<html>
<head>
<style>
#one{
font-size:25px;
color:#F93;
}
#two{
font-size:50px;
color:red;
}
#three{
font-size:75px;
color:blue;
}
</style>
</head>
<body>
<a id="one" href="https://www.baidu.com/">跳转到百度页面</a><br>
<a id="two" href="https://www.csdn.net/">跳转到CSDN首页页面</a><br>
<a id="three" href="https://www.bilibili.com/">跳转到bilibili首页页面</a><br>
</body>
</html>运行效果:
在页面中包含CSS
1.行内样式
行内样式是比较直接的一种样式，直接定义在HTML标记之内，通过style属性来实现。这种方式比较容易令初学者接受，但是灵活性不强。
行内样式测试:
<html>
<head>
</head>
<body>
<a style="color:#F93; font-size:25px;" href="https://www.baidu.com/">跳转到百度页面</a><br>
<a style="color:red; font-size:50px;" href="https://www.csdn.net/">跳转到CSDN首页页面</a><br>
<a style="color:blue; font-size:75px;" href="https://www.bilibili.com/">跳转到bilibili首页页面</a><br>
</body>
</html>运行效果:
2.内嵌式样式表
内嵌式样式表就是在页面中使用<style></style>标记将CSS样式包含在页面中。内嵌式样式表的形式没有行内标记表现的直接，但是能够使页面更加规整。
与行内样式相比，内嵌式样式表更加便于维护，但是如果每个网站都不可能由一个页面构成，而每个页面中相同的HTML标记都要求有相同的样式，此使使用内嵌式样式表就显得比较笨重，而用链接式样式表就解决了这一问题。
3.链接式样式表
链接外部CSS样式表是最常用的一种引用样式表的方式，将CSS样式定义在一个单独的文件中，然后再HTML页面中通过<link>标记引用，是一种最为有效的使用CSS样式的方式。
<link>标记的语法结构如下:
<link rel="stylesheet" type="text/css" href="path">参数说明如下:
1.rel:：定义外部文档和调用文档间的关系。
2.href：CSS文档的绝对或相对路径。
3.type：指的是外部文件的MIME类型。
测试：通过链接式样式表的形式在页面中引入CSS样式。
(1)创建名称为 css.css的样式表，在该样式表中定义页面中<h1>、<h2>、<h3>、<p>标记的样式，代码如下:
h1,h2,h3{
color:red;
font-family:"Trebuchet MS", Arial, Helvetica,sans-serif;
}
p{
color:blue;
font-weigth:200px;
font-size:24px;
}(2)在页面中通过<link>标记将CSS样式表引入到页面中，此时CSS样式表定义的内容将自动加载到页面中，代码如下:
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css" >
</head>
<body>
<h2>页面文字一</h2>
<p>页面文字二</p>
</body>
</html>运行效果:
扫一扫
2103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
