CSS3

2019-11-06  本文已影响0人  橙赎

一、什么是CSS

概念:级联样式表(层叠样式表)

作用:决定网页的样式、外观。

优势:内容与表现分离;网页的表现统一,容易修改;丰富的样式,使得页面布局更加灵活;减少网页的代码量,增加网页的浏览速度,节省网络带宽;运用独立于页面的CSS,有利于网页被搜索引擎收录。

CSS发展史

二、CSS的语法规则

1.基本规则

CSS语法规则

2.style标签

style标签在<head>与</head>之间。

style标签

三、HTML中引入CSS的样式

1.行内样式

在标签元素里使用style样式。

行内样式

2.内部样式表

CSS代码写在<head>的<style>标签中。

内部样式表

3.外部样式表

CSS代码保存在扩展名为.css的样式表中。

引用扩展名为.css的样式表的两种方式:链接式和导入式。

链接式与导入式的区别:

<link/>标签属于XHTML,@import是属于CSS2.1。

使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示。

使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中。

@import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的。

链接式 导入式

4.三种样式的优先级

行内样式>内部样式表>外部样式表

就近原则:谁离代码越近谁优先


四、CSS3的选择器

1.基本选择器

(1)标签选择器

如p标签、段落标签h1等。

标签选择器的css语法

(2)类选择器

类选择器的的css语法 HTML的写法

(3)ID选择器

ID选择器的名称就是HTML中标签的ID名称。

ID选择器在同一个页面中只能使用一次。

ID选择器的的css语法

(4)三种选择器的优先级

不遵循就近原则,无论是哪种方式引入CSS样式,一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级。


2.高级选择器

(1)层次选择器

层次选择器
后代选择器
子选择器
相邻兄弟选择器
通用兄弟选择器

(2)结构伪类选择器

使用E F:nth-child(n)和E F:nth-of-type(n)的关键点:E F:nth-child(n)在父级里从一个元素开始查找,不分类型。E F:nth-of-type(n)在父级里先看类型,再看位置。

结构伪类选择器 结构伪类选择器具体事例

(3)属性选择器

属性选择器
用于选取带有指定属性的元素
用于选取带有指定属性和值的元素
匹配属性值中包含指定值的每个元素
匹配属性值以指定值开头的每个元素
匹配属性值以指定值结尾的每个元素
上一篇 下一篇

猜你喜欢

热点阅读