CSS3基础
CSS3基本语法
<style type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
color:black ;
font-family: "微软雅黑";
...
}
</style>
样式表分类
1. 外样式表:多个页面可以重复使用
步骤:1.新建一个css文件夹,在文件夹里新建css文件
2.在新建的css文件中写需要的样式
3.在<head></head>标签中,通过
<link rel="stylesheet" type="text/css" href="路径"/>
或
<style type="text/css">
@import url("路径");
</style>
引入
2. 内嵌样式表:可以在一个页面内重复使用
<head>
<style type="text/css">
选择器{
属性1:属性值1;...}
选择器{
属性1:属性值1;...}
</style>
</head>
3. 行内样式表:不能重复使用
<标签名 style="属性1:属性值1; 属性1:属性值1; ...;"></标签名>
<a style="color: black; font-family: '微软雅黑'"></a>
一、基本选择器
1. 标签选择器:自动应用样式规则
<head>
<style type="text/css">
标签名{
属性1:属性值1;
属性1:属性值1;
}
a{
color: black;
font-family: '微软雅黑'
}
</style>
</head>
<body>
<a>标签选择器</h6>
</body>
2. 类(.)选择器:可以在不同类型直接的标签进行重用
<head>
<style type="text/css">
类名{
属性1:属性值1;
属性1:属性值1;
}
.name{
color: black;
font-family: '微软雅黑'
}
</style>
</head>
<body>
<ul class="name">类选择器</h6>
</body>
3. ID(#)选择器:不能重复使用
<head>
<style type="text/css">
ID名{
属性1:属性值1;
属性1:属性值1;
}
#name{
color: black;
font-family: '微软雅黑'
}
</style>
</head>
<body>
<ul id="name">类选择器</h6>
</body>
二、扩展选择器
1. 组合选择器:组合直接用,隔开
<head>
<style type="text/css">
p,.name,#tip{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
color:black ;
font-family: "微软雅黑";
}
</style>
</head>
表示:p标签下内容,类名为name下的内容,id为tip下的内容样式
2. 包含选择器:用空格隔开
<head>
<style type="text/css">
.tip ul li a{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
color:black ;
font-family: "微软雅黑";
}
</style>
</head>
表示:类名为tip下的ul下的li下的a下的内容样式
3. 交集选择器:第一个必须是标签选择器,第二个必须是类或id选择器,两个选择器直接不能有空格
<head>
<style type="text/css">
p.red{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
color:black ;
font-family: "微软雅黑";
}
</style>
</head>
表示:p标签中class值为red的所有元素的样式属性
4. 伪类选择器
<head>
<style type="text/css">
标签名:伪类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
color:black ;
font-family: "微软雅黑";
}
</style>
</head>
常用超链接伪类
:link:鼠标未点击时
:visited:鼠标点击后
:hover:鼠标悬浮在超链接上时
:active:鼠标点击为释放时
CSS的特性
1. CSS继承性:所有在元素中嵌套的元素都会继承外层指定的样式,有时会将很多样式叠加在一起
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
font-size: 12px;
font-style: italic;
}
#p1{
font-size: 30px;
}
</style>
</head>
<body>
<p>段落文字</p>
<p id="p1">段落文字</p>
</body>
p元素包含在body中,因此p标签中的内容会继承body定义的属性,即示例中的段落文字都会以12px斜体显示,要想改变样式,除非重新定义新的属性
2. CSS层叠性和优先级
层叠性是指当有多个选择器都作用于同一元素时,即多个选择器中的样式发生了重叠,css会对其进行处理。
CSS的处理原则:
- 如果多个选择器定义的样式规则不发生冲突,则元素将应用所有选择器定义的样式
- 如果多个选择器定义的样式规则发生冲突,则css按照选择器的优先级来处理,元素将应用优先级高的选择器定义的样式
CSS规定选择器的优先级,从高到低
行内样式——id样式——类样式——标签样式
其总原则时:越特殊的样式,优先级越高
CSS的选择符优先级,从高到低:id选择符——类选择符——元素选择符
CSS的定义优先级依照后定义优先的原则:内嵌样式——内部样式表——外部样式表