一. CSS介绍
CSS定义
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。语法结构
div{
color: green;
backgroud-color: black;
}
选择器{css样式:演示对应的值;}CSS的引用方式
#方式一:(内部样式表)
head标签中写以下内容:
<style>
div{
color:green;
background-color: black;
}
</style>
#方式二:(行内样式(内联样式))
<div style="color:blue;backgroud-color:black;">
少壮不努力,老大徒伤悲.
</div>
#方式三:(常用的) 外部样式
第一步: 创建一个css文件
第二步: 在html文件中引入:<link rel="stylesheet" href="路径">
第三步: css文件中的样式的写法:
div{color:green;xx:xx;.....}二. 选择器
1. 基本选择器
元素选择器:(标签名)
p {color:"red";}
id选择器:按照id属性来找对应的标签
# id属性对应的值{css属性:属性值;}
示例:
<style>
#d1 {
color:red;
}
</style>
---body部分内容----
<div id="d1" class="c1">
类选择器:
.class属性对应的值{css属性:属性值}
示例:
<style>
.c1{
color:red;
}
</style>
---body部分内容----
<div id="d1" class="c1">2. 组合选择器
后代选择器
选择器 空格 子选择器{属性名:属性值;}
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>诗</title>
<style>
.c1 a{ /*c1里面的所有的a标签 */
color:green;
}
</style>
</head>
<body>
<p>静夜思</p>
<a href="">床前明月光</a>
<div class="c1">
<a href="">疑是地上霜</a>
<div>
<a href="">举头望明月</a>
<div>
<a href="">低头思故乡</a>
</div>
</div>
</div>
<a href="">诗人</a>
<div class="c2">
<a href="">李白</a>
</div>
</body>
</html>儿子选择器
.c1>a{ /* c1里面的儿子a标签 (子孙a标签不受影响)*/
color:red;
}
示例:同上毗邻选择器
.c1+a{ /* 与c1同级的下面的a标签,上面的a标签不会受影响*/
color:red;
}
找的是紧挨着class属性为c1的标签的下面的标签
示例:同上弟弟选择器
.c1~p{ /* 与c1同级的下面的所有a标签,上面的a不受影响 */
color:green;
}
示例:同上属性选择器
通过标签的属性来找到对应的标签
写法:
[xxx]{color:red;} 找到xxx属性的所有标签
[xxx='p2']{color:red;} 找到有xxx属性的并且属性值为p2的所有标签
p[title]{color:red;} 找到所有有title属性的p标签
p[title = 'p2'] {color:red;} 找到所有有title属性的并且属性值为p2的p标签
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>诗</title>
<style>
p[xxx='p2']{
color:red;
}
</style>
</head>
<body>
<p>p1</p>
<p xxx="p2">p2</p>
<p xxx="p3">p3</p>
</body>
</html>组合选择器
写法:
div,p{
color:red;
}
解释:div选择器和p选择器找到所有标签设置共同的样式.
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hehe</title>
<style>
div,p{
color:red;
}
</style>
</head>
<body>
<div>div1</div>
<p>p1</p>
</body>
</html>伪类选择器
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hehe</title>
<style>
a:link{ /* a标签访问前设置样式 */
color:red;
}
a:active{ /* a标签鼠标点下去显示样式 */
color:green;
}
a:visited{ /* a标签访问后显示样式 */
color:blue;
}
a:hover{ /* 鼠标悬浮到a标签时显示样式 */
color:purple;
}
div:hover{ /* 鼠标悬浮到div标签时显示样式 */
background-color: antiquewhite;
}
input:focus{ /* input标签捕获光标时的样式显示 */
background-color: orange;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<div style="width: 200px;height: 200px;"></div>
<input type="text">
</body>
</html>伪元素选择器
first-letter:文本内容首字母设置
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>努力</title>
<style>
div:first-letter {
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<div>
少壮不努力,老大徒伤悲
</div>
</body>
</html>
before示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>奋斗</title>
<style>
div:before {
content: "要努力啊";
color: antiquewhite;
}
</style>
</head>
<body>
<div>
少壮不努力,老大徒伤悲
</div>
</body>
</html>
after示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>加油</title>
<style>
div:after {
content: "要努力啊";
color: antiquewhite;
}
</style>
</head>
<body>
<div>
少壮不努力,老大徒伤悲
</div>
</body>
</html>
CSS权重
权重越高,对应选择器的样式会被优先显示
组合选择器,各选择器的权重相加
权重不进位,11类选择器组合到一起,也没有一个id选择器的优先级大,小就是小
默认css样式是可以继承的,继承的权重为0
权重相同的选择器,谁后写的,用谁的示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>美女</title>
<style>
div .c1{
color:red;
}
.c2 .c1 {
color: blue;
}
/*#d1{*/
/* color:yellow;*/
/* }*/
/*div{*/
/* color:green;*/
/*}*/
/*.c2{*/
/* color: antiquewhite;*/
/*}*/
</style>
</head>
<body>
<div class="c2">
少壮不努力,老大徒伤悲.
<!-- <div class="c1" id="d1" style="color: antiquewhite">-->
<div class="c1" id="d1" >
努力啊!兄弟!
</div>
</div>
</body>
</html>ps: 特别注意的是 a标签设置样式,需要选中设置,不能继承父级标签的样式
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
/*.c3 a{*/
/* color:red;*/
/*}*/
.c3{
color:red;
}
</style>
</head>
<body>
<div class="c3">
<a href="">百度</a>
</div>
</body>
</html>