CSS-样式设计之基础内容

基础内容

前言

什么是css？
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

可以简单地说，HTML管内容，CSS管外观，管布局。

CSS的语法格式

CSS分为三种样式表，分别是：外部样式表、内部样式表、内联样式
所谓外部样式表，是指的用另外的CSS文件进行样式设计，没有在HTML文件里进行对属性的样式设计，做到了样式与内容的分离。HTML文件在使用CSS文件时需要在头部与内部其建立链接。
链接的语句如下：

注：link是单标签。 rel 属性用于指定当前文档与被链接文档的关系；type 属性指示了被链接的文档是一个外部的样式表；href属性是指定被链接的CSS文件。

所谓内部样式表，是指在HTML文件中（head部分中)对其属性进行样式设计，这里需要与下面讲的内联样式进行区分。内部样式虽然在 HTML文件中进行设计，但是本质上还是内容与外观进行分离。
语法格式为：

<style>
		.类选择器{
		}
		或
		#id选择器{
		}
		或
		属性{
		}
</style>

这里需要讲一下class（类选择器）和 id（id选择器的区别）
class选择器是用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
例如：

id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
例如：

内联样式是指没有使用class或者id选择器，直接在其属性内部样式设计。没有使得样式与内容的分离。
例如：

内联样式需要把每个需要设计样式的标签都写一遍，这就是代码变得很臃肿无法实现对相同的标签进行统一设计和改变。

多重样式
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

例如：

虽然在外部样式表中设置了h3标签的字体是蓝色，但是因为内联样式的执行优先级要高于外部样式表所以最后显示的h3字体是绿色。

总结

需要熟练掌握class选择器和id选择器以及优先级。
class选择器使用“.”的方式进行显示， 并且可以对一组有相同class选择器的标签进行样式设计；而id选择器是对特例的标签进行样式设计。