HTML学习笔记之CSS基础知识
2015-10-25 13:44
1141 查看
一、学习CSS前，需要了解以下几个重要的概念。
（1）元素：在HTML文档中，元素是指表示文档格式的一个模块，它包括一个开始标签、一个结束标签和包含在这两个标签里的所有内容。我们把标签名作为元素的名称。
（2）父元素/子元素：若元素A的开始标签和结束标签之间包含其他元素B，则元素A称为元素B的父元素，反之元素B称为元素A的子元素。
（3）属性：在HTML文档中属性是指某个元素某方面的特性比如颜色、字体大小、高度、宽度等。对于每个属性能且仅能指定一个值。
（4）规则：一个CSS样式表示由许多样式规则组成的，其规则为：
选择符{属性1:值对1;属性2:值对2;···}
因此，规则是一系列“属性:值对”的集合，它用来控制网页元素的显示方式。根据规则中对属性的设定，浏览器会按照设定的值来显示标签内的内容。
二、CSS的类型
1.CSS的类型
有三种方法可以将CSS和HTML标签结合起来：内联样式表、文档级样式表和外部样式表。在某一文档中可以使用一种或多种样式表。
内联样式是给某一个元素设定具体的样式规则，它在这个元素的开始标签内写入具体的样式规则，该定义的作用范围仅限本元素。
文档级样式是将所有规则都罗列在HTML文档的头部(<head>和</head>之间)，它的作用范围是整个文档。
外部样式是将所有样式规则整合成一个独立的文档，一般以CSS为后缀名),它的作用范围是所有引用或链接它的HTML文档。
2.样式优先权原则
如果对一个HTML文档应用了多种样式表，则浏览器会将所有的样式表整合起来，在显示时同时应用于HTML文档，这也就是级联样式表名称的由来。当多个样式表对某一元素的定义发生冲突时，浏览器会按如下优先权原则进行处理：
1),若在同一个类型的样式表中发生冲突(比如在文档级样式表中先定义了标签<p>中的文字为红色，后又定义为蓝色),那么按最后定义的样式来显示(显示为蓝色)；
2),若在不同类型的样式表中发生冲突(比如在文档级的样式表中先定义了标签<p>中的文字为红色，而在内联样式表中又定义为蓝色)，那么按照内联样式表、文档级样式表、外部样式表1的优先权顺序显示(显示为蓝色)。
三、CSS的基本写法
1.规则的写法
1),基本写法
规则包括：一个选择符(一般是受本规则影响的HTML标签元素的名称)以及紧跟其后的一系列属性：值对，所有属性：值对用"{ }"包括，各属性:值对之间用分号";"分隔。
选择符可以是HTML语言中的标签名。如果使用HTML语言中的标签名，称本规则为重置定义，也就是说重新定义了某些标签的显示样式。
2),多个选择符
当对大量标签作重复性设定时，比如将h1到h6的6级标题都设为红色时，可以按照如下规则书写：
h1 {color: red}
h2 {color: red}
h3 {color: red}
h4 {color: red}
h5 {color: red}
h6 {color: red}
用户发现这类设定比较烦琐，不过CSS中对于多个选择符的情况，有较为简单的写法，就是多个选择符由逗号分隔，后跟属性:值对即可，上例可以书写为：
h1,h2,h3,h4,h5,h6 {color: red}
3),规则的引用
当定义了规则后，就可以在HTML文档的任何地方引用这些规则，使网页按规则设定的样式来显示。引用规则的方法很简单，对于重置定义的标签，在HTML文档的正文部分不需要作任何的改动。
4),样式类
用户可能会发现当使用重置定义的时候，只能给一种标签定义一种样式。例如给标签p定义了红色文字后，所有<p>中的文字都为红色。那么能不能使某些p显示红色，而另一些p显示其他颜色呢？使用样式类可以实现。样式类分为常规类、一般类和ID类三种
(1)常规类
常规类规则与一般规则的区别在于选择符的书写方法不同。一般规则的选择符是一个标签名，而常规类规则的选择符是标签名加上类名，中间用"."号分隔。比如p.red{color: red}就定义了一个p的名叫red的类。在正文中引用时只要在标签中通过类属性指定类名(用class=类名)即可，大多数HTML标签都有类(class)属性，如<p class = red>正文内容</p>
示例：
(2)一般类
常规类需要指定具体的标签和类名，也就是说当定义了一个规则以后，该规则只能应用于某一个标签。
而一般类是想定义一个规则，而又能应用于多个标签，定义和常规类相似，只是去标签名，比如.red {color: red}(注意前面的"."不能省略)。应用的时候和常规类的方法一样
(3)ID类
ID类和一般类很相似，区别在于HTML标签是通过ID属性来指定样式规则，而不是类属性。ID类规则的定义只是把一般类定义中的"."号改为"#"(如#red{color: red}），引用时在标签中使用ID属性指定ID名(如<p id=red>正文内容</p>)。
2.样式表的引入
样式表其实就是一系列规则的集合，将所有规则集合放置于某个合适的位置以后，就可以在HTML文档中引入样式表并应用规则。那么这些规则到底可以放置在哪些地方呢？一般有三种情况:一是放置在HTML标签的内部，需要这个标签如何显示，就设置相应的规则；二是把所有规则都集中放置在HTML文档的某个部分(一般是头部)，然后在需要的地方引用这些规则；三是把所有规则单独保存为一个文本文件，在HTML文档中链接这个文件并引用规则。这三种情况分别就是样式表的三种不同的类型。
对于这三种类型的样式表，有不同的引入方法。
(1)内联样式表
内联样式是连接样式和标签的最简便的方法，只需要在标签中包含一个名为style的属性及其值即可，其中style属性和它的值之间用“=”连接，style属性的值是一串字符，该字符是一个规则的简写，它只省略了规则的选择符和"{]"，剩下的属性:值对则描述了具体的显示样式，浏览器会根据样式的属性及其值来显示标签中的内容。
例如：<h2 style="color: red;font-style: italic">欢迎光临</h2>
以二级标题(h2)在网页上显示“欢迎光临”字样，同时要以红色和斜体的方式显示。
提示：内联样式会向标签中添加更多的属性及内容，因此对于网页设计者来说很来维护，更难阅读。而且由于它只对局部起作用，因此必须对所有需要的标签都作设置，这样就失去了CSS在控制页面布局方面的优势。所以，应尽量减少使用内联样式，而采用其他样式。
(2)文档级样式表
内联样式表只是将样式规则加在某一标签内部，其影响范围仅限于该标签，而文档级样式表则将所有规则罗列在文档的开头，它可以影响整篇文档。文档级样式表的写法是在文档的<head>和</head>标签之间添加<style>和</style>标签，在<style>标签中指定属性的值为"text/css"，将规则置于这两个标签之间。
示例：
（3）外部样式表
外部样式表示一个独立的纯文本文件，其文件名一般为"*.css"，所有的规则均放置在该文件内。它可以由浏览器通过网络加载，所以可以随时随地地存储和使用，而并不要本地计算机必须有该样式表文件。外部样式表最大的优点是可以用于多个文档，它可以对庞大的文档集所以的相关标签起作用。
假设存在一个外部样式表文件style.css，那么可以有两种方法载入该样式表:链接和引入。
链接外部样式表的方法是在文档的<head>标签中使用<link>标签，使用该标签的rel属性指定外部样式表文件与HTML文档的关系是stylesheet(rel="stylesheet")，用type属性指定引用的文档是CSS文档(type="text/css")，使用href指定CSS文档的位置。如:
引入外部样式表的方式是使用<style>标签中的一个特殊命令@import(at 规则)引入文件：
对三种样式表做一个直观的比较。假定有100个类似的网页，每个网页均含有100处相同的设置(例如红色字体)，现在要将这总共10000处红色文字改为蓝色，那么在不使用CSS的情况下，需要作10000处修改；在只使用内联样式表的情况下，也需要作10000次修改；在只使用文档级样式表的情况下，需要作100次修改；最后，如果使用的是外部样式表，那么只需对该样式表作一次修改即可。
练习：
CSS.html
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h2>欢迎光临</h2>
<p>本章是CSS的基础知识</p>
</body>
</html>
styles.css
h2
{
color: red;
}
p
{
font-size: 10pt;
}
运行结果：
（1）元素：在HTML文档中，元素是指表示文档格式的一个模块，它包括一个开始标签、一个结束标签和包含在这两个标签里的所有内容。我们把标签名作为元素的名称。
（2）父元素/子元素：若元素A的开始标签和结束标签之间包含其他元素B，则元素A称为元素B的父元素，反之元素B称为元素A的子元素。
（3）属性：在HTML文档中属性是指某个元素某方面的特性比如颜色、字体大小、高度、宽度等。对于每个属性能且仅能指定一个值。
（4）规则：一个CSS样式表示由许多样式规则组成的，其规则为：
选择符{属性1:值对1;属性2:值对2;···}
因此，规则是一系列“属性:值对”的集合，它用来控制网页元素的显示方式。根据规则中对属性的设定，浏览器会按照设定的值来显示标签内的内容。
二、CSS的类型
1.CSS的类型
有三种方法可以将CSS和HTML标签结合起来：内联样式表、文档级样式表和外部样式表。在某一文档中可以使用一种或多种样式表。
内联样式是给某一个元素设定具体的样式规则，它在这个元素的开始标签内写入具体的样式规则，该定义的作用范围仅限本元素。
文档级样式是将所有规则都罗列在HTML文档的头部(<head>和</head>之间)，它的作用范围是整个文档。
外部样式是将所有样式规则整合成一个独立的文档，一般以CSS为后缀名),它的作用范围是所有引用或链接它的HTML文档。
2.样式优先权原则
如果对一个HTML文档应用了多种样式表，则浏览器会将所有的样式表整合起来，在显示时同时应用于HTML文档，这也就是级联样式表名称的由来。当多个样式表对某一元素的定义发生冲突时，浏览器会按如下优先权原则进行处理：
1),若在同一个类型的样式表中发生冲突(比如在文档级样式表中先定义了标签<p>中的文字为红色，后又定义为蓝色),那么按最后定义的样式来显示(显示为蓝色)；
2),若在不同类型的样式表中发生冲突(比如在文档级的样式表中先定义了标签<p>中的文字为红色，而在内联样式表中又定义为蓝色)，那么按照内联样式表、文档级样式表、外部样式表1的优先权顺序显示(显示为蓝色)。
三、CSS的基本写法
1.规则的写法
1),基本写法
规则包括：一个选择符(一般是受本规则影响的HTML标签元素的名称)以及紧跟其后的一系列属性：值对，所有属性：值对用"{ }"包括，各属性:值对之间用分号";"分隔。
选择符可以是HTML语言中的标签名。如果使用HTML语言中的标签名，称本规则为重置定义，也就是说重新定义了某些标签的显示样式。
2),多个选择符
当对大量标签作重复性设定时，比如将h1到h6的6级标题都设为红色时，可以按照如下规则书写：
h1 {color: red}
h2 {color: red}
h3 {color: red}
h4 {color: red}
h5 {color: red}
h6 {color: red}
用户发现这类设定比较烦琐，不过CSS中对于多个选择符的情况，有较为简单的写法，就是多个选择符由逗号分隔，后跟属性:值对即可，上例可以书写为：
h1,h2,h3,h4,h5,h6 {color: red}
3),规则的引用
当定义了规则后，就可以在HTML文档的任何地方引用这些规则，使网页按规则设定的样式来显示。引用规则的方法很简单，对于重置定义的标签，在HTML文档的正文部分不需要作任何的改动。
4),样式类
用户可能会发现当使用重置定义的时候，只能给一种标签定义一种样式。例如给标签p定义了红色文字后，所有<p>中的文字都为红色。那么能不能使某些p显示红色，而另一些p显示其他颜色呢？使用样式类可以实现。样式类分为常规类、一般类和ID类三种
(1)常规类
常规类规则与一般规则的区别在于选择符的书写方法不同。一般规则的选择符是一个标签名，而常规类规则的选择符是标签名加上类名，中间用"."号分隔。比如p.red{color: red}就定义了一个p的名叫red的类。在正文中引用时只要在标签中通过类属性指定类名(用class=类名)即可，大多数HTML标签都有类(class)属性，如<p class = red>正文内容</p>
示例：
<html>
<head>
<title></title>
<style type="text/css">
p.small {font-size: 10pt;}
p.middle{font-size: 15pt;}
p.big{font-size: 20pt;}
</style>
</head>
<body>
<p class="big">大字体</p>
<p class="middle">中字体</p>
<p class="small">小字体</p>
<p class="big">大字体</p>
<p class="middle">中字体</p>
<p class="small">小字体</p>
</body>
</html>运行结果：(2)一般类
常规类需要指定具体的标签和类名，也就是说当定义了一个规则以后，该规则只能应用于某一个标签。
而一般类是想定义一个规则，而又能应用于多个标签，定义和常规类相似，只是去标签名，比如.red {color: red}(注意前面的"."不能省略)。应用的时候和常规类的方法一样
(3)ID类
ID类和一般类很相似，区别在于HTML标签是通过ID属性来指定样式规则，而不是类属性。ID类规则的定义只是把一般类定义中的"."号改为"#"(如#red{color: red}），引用时在标签中使用ID属性指定ID名(如<p id=red>正文内容</p>)。
2.样式表的引入
样式表其实就是一系列规则的集合，将所有规则集合放置于某个合适的位置以后，就可以在HTML文档中引入样式表并应用规则。那么这些规则到底可以放置在哪些地方呢？一般有三种情况:一是放置在HTML标签的内部，需要这个标签如何显示，就设置相应的规则；二是把所有规则都集中放置在HTML文档的某个部分(一般是头部)，然后在需要的地方引用这些规则；三是把所有规则单独保存为一个文本文件，在HTML文档中链接这个文件并引用规则。这三种情况分别就是样式表的三种不同的类型。
对于这三种类型的样式表，有不同的引入方法。
(1)内联样式表
内联样式是连接样式和标签的最简便的方法，只需要在标签中包含一个名为style的属性及其值即可，其中style属性和它的值之间用“=”连接，style属性的值是一串字符，该字符是一个规则的简写，它只省略了规则的选择符和"{]"，剩下的属性:值对则描述了具体的显示样式，浏览器会根据样式的属性及其值来显示标签中的内容。
例如：<h2 style="color: red;font-style: italic">欢迎光临</h2>
以二级标题(h2)在网页上显示“欢迎光临”字样，同时要以红色和斜体的方式显示。
提示：内联样式会向标签中添加更多的属性及内容，因此对于网页设计者来说很来维护，更难阅读。而且由于它只对局部起作用，因此必须对所有需要的标签都作设置，这样就失去了CSS在控制页面布局方面的优势。所以，应尽量减少使用内联样式，而采用其他样式。
(2)文档级样式表
内联样式表只是将样式规则加在某一标签内部，其影响范围仅限于该标签，而文档级样式表则将所有规则罗列在文档的开头，它可以影响整篇文档。文档级样式表的写法是在文档的<head>和</head>标签之间添加<style>和</style>标签，在<style>标签中指定属性的值为"text/css"，将规则置于这两个标签之间。
示例：
<html>
<head>
<title></title>
<style type="text/css">
<!--
h2{color: red;font-style: italic;}
-->
</style>
</head>
<body>
<h2>欢迎光临</h2>
</body>
</html>运行结果：（3）外部样式表
外部样式表示一个独立的纯文本文件，其文件名一般为"*.css"，所有的规则均放置在该文件内。它可以由浏览器通过网络加载，所以可以随时随地地存储和使用，而并不要本地计算机必须有该样式表文件。外部样式表最大的优点是可以用于多个文档，它可以对庞大的文档集所以的相关标签起作用。
假设存在一个外部样式表文件style.css，那么可以有两种方法载入该样式表:链接和引入。
链接外部样式表的方法是在文档的<head>标签中使用<link>标签，使用该标签的rel属性指定外部样式表文件与HTML文档的关系是stylesheet(rel="stylesheet")，用type属性指定引用的文档是CSS文档(type="text/css")，使用href指定CSS文档的位置。如:
<head> <title></title> <link rel="stylesheet" type="text/css" href="style.css" title="red italic"> </head>
引入外部样式表的方式是使用<style>标签中的一个特殊命令@import(at 规则)引入文件：
<head>
<title></title>
<style type="text/css">
<!--
@import url("http://www.baidu.com/styles.css");
@import "http://www.baidu.com/styles.css"
-->
</style>
</head>对三种样式表做一个直观的比较。假定有100个类似的网页，每个网页均含有100处相同的设置(例如红色字体)，现在要将这总共10000处红色文字改为蓝色，那么在不使用CSS的情况下，需要作10000处修改；在只使用内联样式表的情况下，也需要作10000次修改；在只使用文档级样式表的情况下，需要作100次修改；最后，如果使用的是外部样式表，那么只需对该样式表作一次修改即可。
练习：
CSS.html
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h2>欢迎光临</h2>
<p>本章是CSS的基础知识</p>
</body>
</html>
styles.css
h2
{
color: red;
}
p
{
font-size: 10pt;
}
运行结果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web布局连载——两栏固定布局（五）
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 设计更快的网页（三）：字体和 CSS 调整
- 新注册
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ，必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单