了解css和css样式表
CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和显示的方式。 CSS样式全称为“层叠样式表”,简称样式表有被我们称为CSS样式或认知的div css样式。
准备好开始学习了
引入css样式表(内部样式表、行内样式表、外部样式表)
简单的知道了css样式所代表的意思,下面开始了解一下引入它
内部样式表
如字面意思这种方式是将css代码集中写在HTML文档的head标签中,并用style标签定义,如下所示:
语法中,style标签一般位于head标签中也可以位于title标签中,也可以放在html任何一个地方。 注:type="text/css"在HTML5中可以省略不写。
行内样式表
行内样式表又称为内联样式表,通过style属性设置元素样式,语法如下:
语法中style是标签属性,实际上任何HTML标签都拥有style属性,用来设置行内式。其中属性和值的书写规范与css样式规则相同,行内式只对其所在的标签及子标签有效。
外部样式表
外部样式表又称外链式,意思是将所有样式表放在一个或者多个以css为扩展名的外部样式表文件中,通过link标签将样式表链接到HTML文件中,如下:
了解完css样式表,接下来让我们了解一下css的选择器,这也是很重要的知识点
CSS选择器
css选择器用于“查找”要设置的HTML元素。
分为五类:
简单选择器(根据名称、id、类来选择元素);
组合器选择器(根据特定关系来选择元素);
伪类选择器(根据特定状态选取元素)
伪元素选择器(选取元素的一部分并设置样式);
属性选择器(根据其属性或属性值来选取元素);
CSS元素选择器
元素选择器根据元素名称来选择html元素。
实例
由实例可见页面上的所有
元素都将居中对齐,并带有红色文本颜色;
运行实例
CSS id 选择器
id选择器的意思就是使用HTML元素的id属性来选择特定元素。 元素的id在页面中是唯一的,因此id选择器用于选择唯一的元素。
实例
运行实例
注意:id名称不能以数字开头
CSS类选择器
类选择器有特定的class属性的HTML元素。如果有拥有特定class的元素,请写一个句点(.)字符,后面跟类名。
实例
所有带有class="center"的html元素将为红色且居中对齐;
运行实例
还可以指定只有特定的HTML元素会受到影响。
实例
元素将根据class="center"和class="large"进行样式设置:
运行实例
注意:类名不能以数字开头。
实例
此例中,只有具有class="center"的< P >元素会居中对齐:
演示实例
HTML元素也可以引用多个类。