一. 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>
