5.1 CSS的相关概念
- CSS 是英文 Cascading Style Sheets（层叠样式表单）的缩写，通常又称为风格样式表（Style Sheet）或级联样式表，它是用来进行网页风格设计的。给网页添加 CSS，最大的优势就是在后期维护中只需要修改代码即可。
- 在网页中加入CSS样式的目的是将网页结构代码与网页格式风格代码分离开来。
5.2 CSS的基础语法
5.2.1 CSS构造规则
构造CSS 的规则由3 部分组成，分别是选择符（selector）、属性（property）和属性值（value），其基本格式如下：
selector{property: value}
（1）selector：指选择符，可以采用多种形式，可以为文档中的HTML 标签，例如<body>、 <table>、<p> 等，但是也可以是 XML 文档中的标签。
（2）property：指属性，是选择符指定的标签所包含的属性。
（3）value：指属性值，如果定义选择符的多个属性，则属性和属性值为一组，组与组之间用分号（;） 隔开。
5.2.2 CSS注释语句
/* body CSS定义 */
body{ text-align:center; margin:0 auto;}
5.3 CSS的编写方法
- 行内样式是最为简单的CSS 设置方式，需要给每一个标签都设置style 属性。顾名思义，它和样式所定 义的内容在同一代码行内，如代码所示：
<p style="color:red">段落样式</p>
- 在HTML页面内部定义的CSS样式表，叫作嵌入式CSS样式表，也就是在HTML文档的head部分中， 使用 style 标签并在该标签中定义一系列 CSS 规则。其格式如下所示：
<head> <style type="text/css"> <!-- ...... --> </style> </head>
<head>
<style type="text/css">
p{text-align:center;color:red;front-size:30px;}
</style>
</head>
- 链接式CSS 样式表是使用频率最高，也是最为实用的方法。链接样式是指在外部定义CSS 样式表并形成以.css 为扩展名的文件，然后在页面中通过<link> 链接标 签链接到页面中，而且该链接语句必须放在页面的 <head> 标签区，如下所示：
<link rel="stylesheet" type="text/css" href="1.css" />
（1）rel 指定链接到样式表，其值为 stylesheet。
（2）type 表示样式表类型为 CSS 样式表。
（3）href 指定了 CSS 样式表所在位置，此处表示当前路径下名称为 1.css 文件。
<link href="styles/css1.css" rel="stylesheet" type="text/css">
- 导入样式和链接样式基本相同，都是创建一个单独的CSS 文件，然后再引入到HTML 文件中，只不过语法和运作方式有差别。导入外部样式表是指在内部样式表的 <style> 标签中，使用 @import 导入一个外部样式表，例如：
<head> <style type="text/css" > <!- @import "1.css" --> </style> </head>
导入外部样式表相当于将样式表导入到内部样式表中，可以一次导入多个CSS文件，其方式更有优势。导入外部样式表必须在样式表的开始部分、其他内部样式表上面。
5.4 CSS选择器
5.4.1 标签选择器
CSS 标签选择器 用来声明HTML标签采用哪种CSS 样式，也就是重新定义了HTML 标签。因此，每一个HTML 标签的名称都可以作为相应的标签选择器的名称
5.4.2 类别选择器
- 类别选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。
- 常用语法格式：
.classValue {property:value}
classValue是选择器的名称，具体名称由CSS制定者自己命名。
<!DOCTYPE html>
<html>
<head>
<title>类别选择器</title>
<style>
.a{
color:blue;
font-size:20px;
}
.b{
color:red;
font-size:22px;
}
</style>
</head>
<body>
<h3 class=b>清明</h3>
<p class="a">清明时节雨纷纷</p>
<p class="b">路上行人欲断魂</p>
</body>
</html>
5.4.3 ID选择器
ID 选择器允许以一种独立于文档元素的方式来指定样式，在某些方面，ID 选择器类似于类别选择器， 不过也有一些重要差别。首先，ID 选择器前面有一个 # 号。
<!DOCTYPE html>
<html>
<head>
<title>ID选择器</title>
<style>
#fontstyle{
color:blue;
font-weight:bold;
}
#textstyle{
color:red;
font-size:22px;
}
</style>
</head>
<body>
<h3 id=fontstyle>咏柳</h3>
<p id=textstyle>不知细叶谁裁出</p>
<p id=textstyle>二月春风似剪刀</p>
</body>
</html>
5.4.4 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。如果希望选择有某个属性的元素，而不论属性值 是什么，可以使用简单属性选择器。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[title]{color:red;}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="haut" href="http://www.haut.edu.cn">haut</a>
<hr />
<h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http:// www.haut.edu.cn "> haut </a>
</body>
</html>
5.4.5 子选择器
- | element>element | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。 |
- 子选择器用来选择一个父元素直接的子元素，不包括子元素的子元素，它的符号为大于号（>）。请注意这个选择器与后代选择器的区别，子选择器（Child Selector）仅是指它的直接后代，或者可以理解为作用于子元素的第一个后代；而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择。
<!DOCTYPE html>
<html>
<head>
<title>CSS的子选择器</title>
<style type="text/css">
ul.myList > li > a{ /* 子选择器 */
text-decoration:none; /* 没有下划线 */
color:#336600;
}
</style>
</head>
<body>
<ul class="myList">
<li>
<a href="http://www.beijingdaxue.edu.cn/">北京大学</a>
<ul>
<li><a href="#">CSS1</a></li>
<li><a href="#">CSS2</a></li>
<li><a href="#">CSS3</a></li>
</ul>
</li>
</ul>
</body>
</html>
5.4.6 选择器的嵌套
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
</style>
</head>
<body>
<p>这是一个蓝色居中显示的段落</p>
<div class="marked">
<p>这个p元素不应该是蓝色的。</p>
</div>
<p> p元素在一个“标记”分类元素保持一致风格，但有一个不同的文本颜色。</p>
</body>
</html>
为所有p元素定义一种样式，另外又为嵌套在marked类别选择器里的p元素定义另一种样式。
5.4.7 选择器的集体声明
<!DOCTYPE html>
<html>
<head>
<title>css选择器的集体声明</title>
<style type="text/css">
<!—
h1,h2,h3,h4,h5,p{
color:purple;
font-size:15px;
}
h2.special, .special, #one{
text-decoration:underline;
}
-->
</style>
</head>
<body>
<h1>集体声明h1</h1>
<h2 class="special">集体声明h2</h2>
<h3>集体声明h3</h3>
<h4>集体声明h4</h4>
<h5>集体声明h5</h5>
<p>集体声明p1</p>
<p class="special">集体声明p2</p>
<p id="one">集体声明p3</p>
</body>
</html>
可以利用*做全局声明
网友评论