CSS3基础CSS3基本语法
样式表分类
CSS选择器
CSS的特性
CSS3基本语法
type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
color:black ;
font-family: "微软雅黑";
...
}
样式表分类
1. 外样式表:多个页面可以重复使用
步骤:1.新建一个css文件夹,在文件夹里新建css文件
2.在新建的css文件中写需要的样式
3.在标签中,通过
或
type="text/css">
@import url("路径");
引入
2. 内嵌样式表:可以在一个页面内重复使用
type="text/css">
选择器{属性1:属性值1;
...}
选择器{属性1:属性值1;
...}
3. 行内样式表:不能重复使用
<标签名 style="属性1:属性值1;
属性1:属性值1;
...;
">标签名>
一、基本选择器
1. 标签选择器:自动应用样式规则
type="text/css">
标签名{
属性1:属性值1;
属性1:属性值1;
}a{
color: black;
font-family: '微软雅黑'
}
标签选择器
2. 类(.)选择器:可以在不同类型直接的标签进行重用
type="text/css">
类名{
属性1:属性值1;
属性1:属性值1;
}.name{
color: black;
font-family: '微软雅黑'
}
类选择器
3. ID(#)选择器:不能重复使用
type="text/css">
ID名{
属性1:属性值1;
属性1:属性值1;
}#name{
color: black;
font-family: '微软雅黑'
}
类选择器
二、扩展选择器
1. 组合选择器:组合直接用,隔开
type="text/css">
p,.name,#tip{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
color:black ;
font-family: "微软雅黑";
}
表示:p标签下内容,类名为name下的内容,id为tip下的内容样式
2. 包含选择器:用空格隔开
type="text/css">
.tip ul li a{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
color:black ;
font-family: "微软雅黑";
}
表示:类名为tip下的ul下的li下的a下的内容样式
3. 交集选择器:第一个必须是标签选择器,第二个必须是类或id选择器,两个选择器直接不能有空格
type="text/css">
p.red{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
color:black ;
font-family: "微软雅黑";
}
表示:p标签中class值为red的所有元素的样式属性
4. 伪类选择器
type="text/css">
标签名:伪类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
color:black ;
font-family: "微软雅黑";
}
常用超链接伪类
:link:鼠标未点击时
:visited:鼠标点击后
:hover:鼠标悬浮在超链接上时
:active:鼠标点击为释放时
CSS的特性
1. CSS继承性:所有在元素中嵌套的元素都会继承外层指定的样式,有时会将很多样式叠加在一起
- 锐客网
type="text/css">
body{
font-size: 12px;
font-style: italic;
}
#p1{
font-size: 30px;
}
段落文字
段落文字
p元素包含在body中,因此p标签中的内容会继承body定义的属性,即示例中的段落文字都会以12px斜体显示,要想改变样式,除非重新定义新的属性
2. CSS层叠性和优先级层叠性是指当有多个选择器都作用于同一元素时,即多个选择器中的样式发生了重叠,css会对其进行处理。
CSS的处理原则:
- 如果多个选择器定义的样式规则不发生冲突,则元素将应用所有选择器定义的样式
- 如果多个选择器定义的样式规则发生冲突,则css按照选择器的优先级来处理,元素将应用优先级高的选择器定义的样式
行内样式——id样式——类样式——标签样式
其总原则时:越特殊的样式,优先级越高
【HTML5|HTML5知识点总结(二)】CSS的选择符优先级,从高到低:id选择符——类选择符——元素选择符
CSS的定义优先级依照后定义优先的原则:内嵌样式——内部样式表——外部样式表
推荐阅读
- Web前端|【HTML】——基础知识点总结
- HTML|JavaScript图片切换
- JavaScript|【JavaScript】DOM (四) 轮播图超详细讲解
- 前端|前端-js网页特效(终章)超详细的轮播图效果及原理 一篇彻底吃透!
- html|SpringBoot学习(五)——————Thymeleaf +bootstrap 分页
- java|SpringBoot学习(三)—————— 框架整合其他框架之三(Thymeleaf)
- web开发学习|HTML期末大作业放在了阿里云服务器上
- spring|40 个 SpringBoot 常用注解
- CSS|CSS(四)盒子模型+圆角边框+盒子阴影+文字阴影