css样式的解析

332 阅读3分钟

了解css和css样式表

CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和显示的方式。 CSS样式全称为“层叠样式表”,简称样式表有被我们称为CSS样式或认知的div css样式。

image.png准备好开始学习了

引入css样式表(内部样式表、行内样式表、外部样式表)

简单的知道了css样式所代表的意思,下面开始了解一下引入它

内部样式表

如字面意思这种方式是将css代码集中写在HTML文档的head标签中,并用style标签定义,如下所示:

image.png

语法中,style标签一般位于head标签中也可以位于title标签中,也可以放在html任何一个地方。 注:type="text/css"在HTML5中可以省略不写。

行内样式表

行内样式表又称为内联样式表,通过style属性设置元素样式,语法如下:

image.png

语法中style是标签属性,实际上任何HTML标签都拥有style属性,用来设置行内式。其中属性和值的书写规范与css样式规则相同,行内式只对其所在的标签及子标签有效。

外部样式表

外部样式表又称外链式,意思是将所有样式表放在一个或者多个以css为扩展名的外部样式表文件中,通过link标签将样式表链接到HTML文件中,如下:

image.png

了解完css样式表,接下来让我们了解一下css的选择器,这也是很重要的知识点

CSS选择器

css选择器用于“查找”要设置的HTML元素。

分为五类:

简单选择器(根据名称、id、类来选择元素);

组合器选择器(根据特定关系来选择元素);

伪类选择器(根据特定状态选取元素)

伪元素选择器(选取元素的一部分并设置样式);

属性选择器(根据其属性或属性值来选取元素);

CSS元素选择器

元素选择器根据元素名称来选择html元素。

实例

由实例可见页面上的所有

元素都将居中对齐,并带有红色文本颜色;

image.png

运行实例

image.png

CSS id 选择器

id选择器的意思就是使用HTML元素的id属性来选择特定元素。 元素的id在页面中是唯一的,因此id选择器用于选择唯一的元素。

实例

image.png

运行实例

image.png

注意:id名称不能以数字开头

CSS类选择器

类选择器有特定的class属性的HTML元素。如果有拥有特定class的元素,请写一个句点(.)字符,后面跟类名。

实例

所有带有class="center"的html元素将为红色且居中对齐;

image.png

运行实例

image.png

还可以指定只有特定的HTML元素会受到影响。

实例

元素将根据class="center"和class="large"进行样式设置:

image.png

运行实例

image.png

注意:类名不能以数字开头。

实例

此例中,只有具有class="center"的< P >元素会居中对齐:

image.png

演示实例

image.png HTML元素也可以引用多个类。

学习的道路永无止境,CSS的发展之路还有很长,感谢大家的观看!