Css基础2
1.css选择符
选择符又称为选择器，定义了将影响文档中的哪些部分。
-1.元素选择符
通配符：*{}
下面的例子（test.css） 匹配文档中所有的标签
*{ background-color: blue; }
一般情况下，我们会在html初始化的时候使用通配符，例子如下，将上和左边距都设为0
*{ padding: 0; margin: 0; }
类选择敷：.类名称{}
下面的例子，将p标签的内容变为绿色
1 index.html代码如下 2 <!DOCTYPE html> 3 <html> 4 <head lang="en"> 5 <meta charset="UTF-8"> 6 <title></title> 7 <link rel="stylesheet" href="css.css" type="text/css"/> 8 </head> 9 <body> 10 <p class="hp">haha</p> 11 <span>hehe</span> 12 </body> 13 </html> 14 15 css.css代码如下 16 *{ 17 padding: 0; 18 margin: 0; 19 } 20 21 .hp{ 22 color:green; 23 }
id选择符：#id名称{}
下面的例子，将span标签内容变为紫色
index.html代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css.css" type="text/css"/> </head> <body> <p class="hp">haha</p> <span id="hs">hehe</span> </body> </html> css.css代码如下 *{ padding: 0; margin: 0; } .hp{ color:green; } #hs{ color: purple; }
类型选择符（标签选择符）：标签{}
下面的例子将li标签内容变为红色
index.html代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css.css" type="text/css"/> </head> <body> <p class="hp">haha</p> <span id="hs">hehe</span> <ul> <li>我是列表</li> <li>我是列表</li> <li>我是列表</li> <li>我是列表</li> </ul> </body> </html> css.css代码如下 *{ padding: 0; margin: 0; } .hp{ color:green; } #hs{ color: purple; } li{ color: red; }
-2.关系选择符
- 子元素选择器：父亲>儿子
- 兄弟选择器：你自己~你的兄弟
1.本身不起作用
2.之前的元素不起作用
例子：下面的代码只有第二个和第三个h3标签会变色
inde.html代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css.css" type="text/css"/> </head> <body> <h3>这是一个标题</h3> <P>这是一个文字段落</P> <P>这是一个文字段落</P> <h3>这是一个标题</h3> <p>这是一个文字段落</p> <h3>这是一个标题</h3> <P>这是一个文字段落</P> <P>这是一个文字段落</P> </body> </html> css.css代码如下 p~h3{ color: brown; }
- 相邻选择器：E+F
下面的例子中，第三行和最后一行变色
index.html代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css.css" type="text/css"/> </head> <body> <h3>这是一个标题</h3> <P>这是一个文字段落</P> <P>这是一个文字段落</P> <h3>这是一个标题</h3> <p>这是一个文字段落</p> <h3>这是一个标题</h3> <P>这是一个文字段落</P> <P>这是一个文字段落</P> </body> </html> css.css代码如下 p+p{ color: red; }
- 包含选择器：EF
下面的例子，所有的ul，li标签内容全部变成红色
inde.html代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css.css" type="text/css"/> </head> <body> <ul> <li>列表项目</li> <li> <ul> <li>列表项目</li> <li>列表项目</li> <li>列表项目</li> <li>列表项目</li> </ul> </li> <li>列表项目</li> <li>列表项目</li> </ul> </body> </html> css.css代码如下 ul li{ color: red; }
-3.属性选择符
1.属性
2.写法:
1)当前元素[属性]{}
例子：haha变色而hehe不变色
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> a[href]{ color: red; } a[href=""] </style> </head> <body> <a href="#">haha</a> <a>hehe</a> </body> </html>
2)当前元素[属性=“属性值”]{}
例子，第一个百度标签会变为红色
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> a[href="www.baidu.com"]{ color: red; } </style> </head> <body> <a href="www.baidu.com">百度一下</a> <a href="www.baidu1.com">百度一下</a> <a href="www.baidu2.com">百度一下</a> <a href="www.baidu3.com">百度一下</a> </body> </html>
-4.伪类选择符
- 定义：它允许给html标签的某种状态设置样式
1）元素：link：设置超链接a在未被访问前的样式
2）元素：visited：设置超链接a在其链接地址已被访问过时的样式
3）元素：hover：设置元素在其鼠标悬停时的样式
4）元素：active：设置元素在被用户激活(在鼠标点击与释放之间的事件)时的样式
- 注意：
1）a：hover必须位于a：link和a：visited之后，a：active必须位于a:hover之后
2）可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te(active)，即使用love，hate两个单词来记忆
例子：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul li a{ font-size: 50px; } ul li a:link{ color: blue; } ul li a:visited{ color: red; } ul li a:hover{ color: yellow; } ul li a:active{ color: purple; } </style> </head> <body> <ul> <li><a href="#">伪类选择器</a></li> </ul> </body> </html>
-5.伪对象选择符
-1.元素：before{}：设置在对象前发生的内容，用来和content属性一起使用，并且必须定义content属性。
-2.元素：after{}：设置在对象后发生的内容。用来和content属性一起使用，并且必须定义content属性。
选择器的优先级：！important>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符
注：！important要写在属性值后面，分号的前面。
例:
p{
color: red !important;
}
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> span{ /*1*/ color: red!important; } p span{ /*1+1*/ color: blue; } p .sc{ /*1+10*/ color: aqua; } p #si{ /*1+100*/ color: green; } </style> </head> <body> <p> <span class="sc" id="si">优先级</span> </p> </body> </html>
2.css的背景，颜色，边框
1.背景：纯色，图片
background-attchment：背景图像是否固定或者随着页面的其余部分滚动。
background-color：设置元素的背景颜色
background-image：把图片设置为背景
background-position：设置背景图片的起始位置
background-repeat：背景图片是否以及如何重复
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { background-image: url("pic/timg1.jpg"); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; } </style> </head> <body> <p>哈哈</p> <p>哈哈</p> <p>哈哈</p> </body> </html>
2.边框
border-width：边框宽度
border-style：边框样式
border-color：边框颜色
border-radius：设置圆角边框
box-shadow：设置对角阴影
boder-image：边框背景图片
3.颜色
1.颜色值
1.color name(用颜色名称表示)：color：red；
2.HEX（十六进制数值表示法）：color：#ff0000；
3.RGB(三原色：红绿蓝)
4.RGBA(三原色+不透明度[0.0-1.0])
5.透明色：color：transparent
2.属性
opacity：<number> 设置对象的不透明度
1：不透明
0：完全透明
例子：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .container{ width: 200px; height: 200px; background-color: antiquewhite; border-width: 5px; border-color: aqua; border-top-color: red; border-style: solid; border-left-style: dashed; border-radius: 5px; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); } </style> </head> <body> <div class="container"></div> </body> </html>
