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的定义优先级依照后定义优先的原则：内嵌样式——内部样式表——外部样式表