基础内容
前言
什么是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选择器是对特例的标签进行样式设计。