Css基础学习（二）—CSS基础性概念
2008-11-10 13:54
155 查看
1、ID和类
我们首先简单的说明一下什么是ID和类。ID是一个标识码，因此在一个HTML页面中，ID只能出现一次；而类相当于一种类别，属于一种类的可以是一个也可以是多个，因此类可以在页面中无限次地使用。知道了两者的区别，我们就使用事例来说明把。
<!--应用ID-->
<!--HTML页面-->
<p id="highlight">This paragraph has red text.</p>
<p id="default">This paragraph has dark gray text.</p>
/*css页面*/
/*Define highlighted text*/
#highlight{color:#F00;}
/*Define default text*/
#default{color:#333;}
/*Adjust the color of p when used as a title*/
p#title{color:#F00;}
上面的事例第一段文字是红色的，第二段将是灰色的，就因为他们的id不同，因此引用了不同选择器。而最后的p#title{color:#F00;}只有在p这个选择器下拥有title这个id的文字将是红色的，其他的选择器将不会使用这个样式。
使用ID的场合：ID应该为每个页面唯一存在并仅使用一次的元素保留，如页眉、边栏、主导航栏或者页脚等。
<!--应用类-->
<!--HTML页面-->
<p class="highlight">This paragraph has red text.</p>
<p class="default">This paragraph has dark gray text.</p>
<p class="default">This paragraph also has dark gray text.</p>
/*css页面*/
/*Define highlighted text*/
.highlight{color:#F00;}
/*Define default text*/
.default{color:#333;}
这次的显示和前面是一样的，ID通过'#'来定义，而类通过'.'来定义；很简单吧，当你可以熟练的使用上面这些内容就可以基本的完成html上一半的任务了，当然需要灵活应用拉。
使用类的场合：类很灵活的使用在各个场所，在页面中只会出现一次的如页眉、边栏、主导航栏或者页脚最好不要使用类；另外千万注意：类主要用来定义正常样式的例外情况，而不是用来定义标准样式的。
2、使用层叠
css（层叠样式表），里面的层叠是什么意思呢？命名上存在的东西应该很重要把，我想使用通俗的方式来解释可能更加容易理解。层叠就是当我对同一个选择器多次定义了它的样式，应该以怎么样的规则来确定最后选择器的样式。
比如我在外部样式内定义了p的文本都是红色的，我又在其中一个页面的头部定义p是黑色的，这个页面里面两个p，一个加上了灰色，一个我们没有进行定义。那我们选择哪个颜色应用在两个p上面呢？加上灰色的p应该是灰色没有问题。另外一个没有定义样式的是红色还是黑色？这个就是层叠的原则，你学会了层叠的原则就会知道没有定义样式的p是黑色的。那下面我们就来学习层叠的一些原则把。
利用不同的应用方法实现层叠：
浏览器首先执行内联规则，然后执行所有在<head>中的其他内嵌规则，最后再查找外部文件来完全理解你所创建的css。
通过多个外部样式表层叠：
当一个页面中引用了多个外部样式表，则浏览器认为最后一个样式表最重要。也就是说如果几个外部样式同时定义了同一选择器的不同属性，则以最后面那个样式表为准。
通过导入样式表实施层叠：
导入样式表的层次性也和外部样式相同，最后导入的最重要。
总结上面几点：我们只需要牢记，越晚给定的规则越重要这条原则基本就够用了。
层次的最底层：
处于层叠层次最底层的样式是浏览器自己的默认样式表。如果你没有定义的样式最终就会以默认的样式来表现，如果你定义了样式，那就会覆盖掉（层叠）默认样式。
建议：你需要时刻小心使用层叠。跨多个样式表跟踪层叠通常是一件非常困难的事情，你增加的样式，往往会在你不知情的情况下把别的页面的正确样式覆盖掉导致错误，而且无法测试，只能通过眼睛看才知道。（希望那位高人可以做一些软件提供提示功能就好了，懒人妄想中）
3、分组
/*Heading styles */
h1,h2,h3{
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
/*Additionally,render all h1 headings in italics */
h1{font-style:italic;}
上面这段样式通过h1,h2,h3对这三个选择器进行了分组，使他们一样的样式集合在了一起，而需要额外增加h1的样式在后面加上就可以了。这样做的好处就是缩小了定义样式文件的容量。
4、继承
这里的继承不同于面向对象的继承原理。还是距离说明把：
<p style="color:#F00">This <span>paragraph</span> has red text.</p>
如果样式中没有对span进行定义的话，整句话还是显示红色！这就是继承，span继承了p的样式。
建议：从body继承。在一个结构良好的HTML文件中，body是所有可视结点的父元素，因此每个元素都可以从它继承相关信息。继承的强大也需要时刻的小心，你必须清楚地知道哪些地方需要使用继承，哪些地方不需要，不要被继承搞得糊里糊涂。
我们首先简单的说明一下什么是ID和类。ID是一个标识码，因此在一个HTML页面中，ID只能出现一次；而类相当于一种类别，属于一种类的可以是一个也可以是多个，因此类可以在页面中无限次地使用。知道了两者的区别，我们就使用事例来说明把。
<!--应用ID-->
<!--HTML页面-->
<p id="highlight">This paragraph has red text.</p>
<p id="default">This paragraph has dark gray text.</p>
/*css页面*/
/*Define highlighted text*/
#highlight{color:#F00;}
/*Define default text*/
#default{color:#333;}
/*Adjust the color of p when used as a title*/
p#title{color:#F00;}
上面的事例第一段文字是红色的，第二段将是灰色的，就因为他们的id不同，因此引用了不同选择器。而最后的p#title{color:#F00;}只有在p这个选择器下拥有title这个id的文字将是红色的，其他的选择器将不会使用这个样式。
使用ID的场合：ID应该为每个页面唯一存在并仅使用一次的元素保留，如页眉、边栏、主导航栏或者页脚等。
<!--应用类-->
<!--HTML页面-->
<p class="highlight">This paragraph has red text.</p>
<p class="default">This paragraph has dark gray text.</p>
<p class="default">This paragraph also has dark gray text.</p>
/*css页面*/
/*Define highlighted text*/
.highlight{color:#F00;}
/*Define default text*/
.default{color:#333;}
这次的显示和前面是一样的，ID通过'#'来定义，而类通过'.'来定义；很简单吧，当你可以熟练的使用上面这些内容就可以基本的完成html上一半的任务了，当然需要灵活应用拉。
使用类的场合：类很灵活的使用在各个场所，在页面中只会出现一次的如页眉、边栏、主导航栏或者页脚最好不要使用类；另外千万注意：类主要用来定义正常样式的例外情况，而不是用来定义标准样式的。
2、使用层叠
css（层叠样式表），里面的层叠是什么意思呢？命名上存在的东西应该很重要把，我想使用通俗的方式来解释可能更加容易理解。层叠就是当我对同一个选择器多次定义了它的样式，应该以怎么样的规则来确定最后选择器的样式。
比如我在外部样式内定义了p的文本都是红色的，我又在其中一个页面的头部定义p是黑色的，这个页面里面两个p，一个加上了灰色，一个我们没有进行定义。那我们选择哪个颜色应用在两个p上面呢？加上灰色的p应该是灰色没有问题。另外一个没有定义样式的是红色还是黑色？这个就是层叠的原则，你学会了层叠的原则就会知道没有定义样式的p是黑色的。那下面我们就来学习层叠的一些原则把。
利用不同的应用方法实现层叠：
浏览器首先执行内联规则，然后执行所有在<head>中的其他内嵌规则，最后再查找外部文件来完全理解你所创建的css。
通过多个外部样式表层叠：
当一个页面中引用了多个外部样式表，则浏览器认为最后一个样式表最重要。也就是说如果几个外部样式同时定义了同一选择器的不同属性，则以最后面那个样式表为准。
通过导入样式表实施层叠：
导入样式表的层次性也和外部样式相同，最后导入的最重要。
总结上面几点：我们只需要牢记，越晚给定的规则越重要这条原则基本就够用了。
层次的最底层：
处于层叠层次最底层的样式是浏览器自己的默认样式表。如果你没有定义的样式最终就会以默认的样式来表现，如果你定义了样式，那就会覆盖掉（层叠）默认样式。
建议：你需要时刻小心使用层叠。跨多个样式表跟踪层叠通常是一件非常困难的事情，你增加的样式，往往会在你不知情的情况下把别的页面的正确样式覆盖掉导致错误，而且无法测试，只能通过眼睛看才知道。（希望那位高人可以做一些软件提供提示功能就好了，懒人妄想中）
3、分组
/*Heading styles */
h1,h2,h3{
font-family:Helvetica,Arial,sans-serif;
line-height:140%;
color:#333;
}
/*Additionally,render all h1 headings in italics */
h1{font-style:italic;}
上面这段样式通过h1,h2,h3对这三个选择器进行了分组，使他们一样的样式集合在了一起，而需要额外增加h1的样式在后面加上就可以了。这样做的好处就是缩小了定义样式文件的容量。
4、继承
这里的继承不同于面向对象的继承原理。还是距离说明把：
<p style="color:#F00">This <span>paragraph</span> has red text.</p>
如果样式中没有对span进行定义的话，整句话还是显示红色！这就是继承，span继承了p的样式。
建议：从body继承。在一个结构良好的HTML文件中，body是所有可视结点的父元素，因此每个元素都可以从它继承相关信息。继承的强大也需要时刻的小心，你必须清楚地知道哪些地方需要使用继承，哪些地方不需要，不要被继承搞得糊里糊涂。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript学习笔录2（css基础概念）
- 深度学习基础介绍：机器学习介绍和基本概念
- Apache Mina学习笔记：Java NIO基础概念
- Java基础－学习Java的30个基本概念
- [置顶] DNS学习笔记-服务的配置与基础概念
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
- 学习笔记--HTML+CSS基础（二）
- CSS学习笔记（1）CSS基础语法/字体/文本
- C++学习4-面向对象编程基础（面向对象概念，定义类，定义对象）
- java入门学习（3）—循环，选择，基础算法，API概念
- Visual C# 技术内幕学习笔记 第二章 C#基础（1） 几个概念
- html和CSS基础学习（九）
- css基础学习-选择器
- CSS基础学习笔记
- lucene学习之基础概念
- MySQL学习笔记---基础概念和一些基础SQL语句（一）
- 深度学习-基础概念：神经元（Neurons）、Sigmoid 函数与神经网络基本结构
- 网站新手必须学习的CSS基础语法
- 在慕课上学习的，HTML和CSS基础学习笔记6
- Css基础学习