1.什么是CSS?
Cascading Style Sheets
层叠样式表 -> 样式表
2.为什么使用CSS?
设置HTML网页元素的样子——对HTML骨架进行修饰美化。就是我们所谓的擦粉打扮穿衣服。——如下图
3.CSS、HTML与JS的关系?
4.CSS语法规范
内联样式
特点:将CSS内容定义在HTML标记中
语法:
<ANY style="样式声明1;样式声明2;... ...">
样式声明:
1、由样式属性名 以及 值来组成
2、属性名 与 值 之间使用 : 做连接
3、多个样式声明之间用 ; 做分隔
例子展示
内部样式
在网页中的一个独立的地方声明该网页要用到的所有的样式
语法:
<head>
<style>
样式规则1
样式规则2
...
样式规则n
</style>
</head>
样式规则 :由 选择器 和 样式声明 组成
选择器:规范了页面中哪些元素能够使用声明好的样式,其实就是为了匹配页面中的元素
选择器{
样式声明1;
样式声明2;
}
外部样式
独立于任何网页的位置处,声明一个样式表文件(***.css),在文件中声明样式。在使用的网页中进行引入
使用步骤:
1、创建样式表文件,并编写样式
在 xxx.css 文件中编写样式规则
2、在网页上对样式表文件进行引入
<head>
<link rel="stylesheet" href="xxx.css">
</head>
5.CSS样式表特征
继承性
必须是父子(有层级关系)结构
大部分的css效果是可以直接继承给子元素的
层叠性
可以为一个元素定义多个样式规则,规则中的属性不冲突时,可以同时都应用到当前元素上
所谓的属性冲突就是相同的属性设置不同的属性值
div{
color:red;
}
div{
background:yellow;
}
div{
font-size:26px;
}
优先级
在层叠性基础上,如果样式声明冲突(重复)的话,则按照默认的优先级去应用样式
由低到高
1、浏览器默认设置
2、样式表(内外部)——就近原则 - 后定义者优先
3、内联方式级别最高
!important 原则
显示调整样式属性优先级
样式属性:值 !important;
!important 加在谁的后面,就以谁为主,加了这个内联方式级别最高的地位将被颠覆。(少用)
6.CSS基础选择器
选择器的作用
规范了页面中哪些元素能够使用声明好的样式
匹配页面的元素
选择器详解
1、通用选择器
作用:可以与页面上的任一元素相匹配 ,设置网页中所有元素的样式——基本不用
语法:* { 样式声明}
*{
font-size:12px;
color:red;
}
2、元素选择器
作用:设置页面上某种元素的默认样式
语法:标记{ 样式声明 }
h3{ color:red;}
div{font-size:12px;}
3、类选择器——用的最多
作用:定义页面上某个或某些元素的样式
特点:通过元素的class属性进行引用的选择器
语法:
1声明
.类名{ 样式声明 }
注意:
1、点 不能省略
2、类名不能以数字开头
3、由英文,-,_ 来组成
2引用
<ANY class="类名">
特殊用法:
分类选择器的定义方式——将 类选择器 和 元素选择器 结合使用
语法:元素选择器.类选择器{ }
1、div.text{}
定义class为text的div元素的样式
2、span.important{ }
定义class为important的span元素的样式
多类选择器的引用方式——让元素引用多个类选择器
语法:<ANY class="c1 c2 c3">
4、id选择器
作用:与ID属性联用,为了设置 指定ID元素的样式(专属定制)
语法:
#ID值{ ... }
5、群组选择器
作用:将多个选择器放在一起进行样式的声明定义
语法:选择器1,选择器2,选择器3,... { ... }
#container,div.text,.redColor,span{
color:red;
}
等同于 :
#container{color:red;}
div.text{color:red;}
.redColor{color:red;}
span{color:red;}
6、后代选择器(子子孙孙都是后代)
作用:通过元素的后代关系匹配元素
语法:选择器1 选择器2{}
7、子代选择器(自己的后代,无隔辈)
作用:通过元素的子代(一层层级关系)匹配元素
语法:选择器1>选择器2{}
>表示下一级的意思
8、伪类选择器
作用:匹配元素不同的状态的选择器
语法:
所有的伪类都是以 : 作为开始的
选择器:伪类选择器{ ... }
8.1、链接伪类
1、:link
匹配元素尚未被访问时候的状态
ex:
a:link{ ... }
2、:visited
匹配元素访问过的状态
ex:
a:visited{ ... }
8.2、动态伪类
1、:hover
匹配鼠标悬停在元素上时的效果
2、:active
匹配元素被激活时的状态
超链接,文本框 和 密码框,点击的时候,就是 active
3、:focus
匹配元素获取焦点时的状态
文本框 和 密码框
效果展示:
7.选择器优先级
选择器类型 | 权值 |
元素选择器 | 1 |
类选择器 | 10 |
伪类选择器 | 10 |
ID选择器 | 100 |
内联样式 | 1000 |
选择器的权值加到一起,大的优先,如果权值相同,后定义的优先,群组选择器不进行累加。
关于CSS的基础分享就先到这里,后面将会分享CSS的尺寸与边框。大家记得关注哦,还有加一个赞哦!