一、CSS初识
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
二、
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
<head>
<style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head>
3.
<head> <link href="CSS文件的路径" rel="stylesheet" /> </head>
三、
1.标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*千万别忘了它*/ /*上面点声明 ，下面class调用*/ span { /*标签选择器 让所有的span 都变成 150 */ font-size: 150px; } .g { color: skyblue; } .o { color: red; } .oo { color: orange; } .l { color: green; } /* 类选择器 可以选择 一个 或者 多个 标签*/ </style> </head> <body> <span class="g">G</span> <span class="o">o</span> <span class="oo">o</span> <span class="g">g</span> <span class="l">l</span> <span class="o">e</span> <div class="nav"></div> <!-- 导航 我们习惯性的约定 --> <div class="banner"></div> <!-- 导航 我们习惯性的约定 --> </body> </html>
3.多类名选择器
给同一标签指定多个类名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>.red{ color: red; }.font20{ font-size: 20px; color: blue; } </style> </head> <body> <div class="font20 red">多类名</div> <div>多类名</div> <p class="red">多类名</p> </body> </html>
4.id选择器
id选择器使用“#”进行标识，后面紧跟id名。
<!DOCTYPE html> <head> <style>#last{ color: pink; } </style> </head> <body> <div>id选择器</div> <div id="last">id选择器</div> </body> </html>
5.通配符选择器
用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。通配符选择器基本用不到。
* { /** 代表所有标签的意思 使用较少 */
color: pink;
}
四、复合
1.父代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。
<head> <style> /*需求 把所有的王思聪选出来*/ div p { /*河北 邯郸 后代选择器*/ color: pink; }
.jianlin p { /*中间用空格隔开*/
color: purple;
}
</style>
</head> <body> <div> 王者荣耀 </div> <div> 王者荣耀 </div> <div> <p>王思聪</p> </div> <div class="jianlin"> <p>王思聪</p> </div> </body> </html>
2.子代选择器
<!DOCTYPE html> <html lang="en"> <head> <style> /*1. 需求 要一级菜单改为蓝色 */ ul li a { /*后代选择器 ul li下所有 a 标签内容变为红色*/ color: red; } ul li > a { /*子代选择器 子 指的是 亲儿子(即最近层级) 大于号分割，仅设定 ul li下一层 a 标签内容变为绿色
*/
color: green; } </style> </head> <body> <ul> <li> <a href="#">一级菜单</a> <div> <a href="#">二级菜单</a> <a href="#">二级菜单</a> <a href="#">二级菜单</a> </div> </li> </ul> </body>
3.交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间用 . 连接。
<head> <meta charset="UTF-8"> <title>Document</title> <style> div.red { /*交集选择器 选择div下面，class="red" */ color: red; } </style> </head> <body> <div>交集选择器</div> <div class="red">交集选择器</div> <p>交集选择器</p> <p class="red">交集选择器</p> </body>
4.并集选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*1. 需求 吧 div p span 改为红色*/ div, p, span { /*并集选择器 用逗号隔开 , 代表 和 集体声明 适合于相同样式 */ color: red; } </style> </head> <body> <div>并集选择器</div> <div>并集选择器</div> <div>并集选择器</div> <p>并集选择器</p> <p>并集选择器</p> <p>并集选择器</p> <span>并集选择器</span> <span>并集选择器</span> <span>并集选择器</span> <span>并集选择器</span> <h1>并集选择器</h1> <a href="#">并集选择器</a> </body> </html>
5.
6.链接
- :link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
- :active /* 选定的链接 */
注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a:link { /* 未访问过的连接状态*/ color: #3c3c3c; font-size: 25px; text-decoration: none; /*取消下划线*/ font-weight: 700; } a:visited { /*这个链接我们已经点过的样子 已访问过链接*/ color: orange; } a:hover { /*鼠标经过连接时候的样子*/ color: #f10215; } a:active { /*鼠标按下时候的样子*/ color: green; } </style> </head> <body> <a href="http://www.asdf12312312312312.com">秒杀</a> </body> </html>
实际开发中的伪类链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { color: #333; text-decoration: none; font-size: 25px; font-weight: 700; } a:hover { /*鼠标经过*/ color: #f10215;; } </style> </head> <body> <a href="http://www.asdf12312312312312.com">秒杀</a> </body> </html>
五、综合测试题 （1）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .site-r a { color: red; } .nav a { /*后代选择器*/ color: orange; } .nav, .sitenav { /*并集选择器*/ font: 14px "微软雅黑"; } .nav> ul > li > a { /*子代选择器*/ color: green; /*123123123 */ } </style> </head> <body> <div class="nav"> <!-- 主导航栏 --> <ul> <li><a href="#">公司首页</a></li> <li><a href="#">公司简介</a></li> <li><a href="#">公司产品</a></li> <li> <a href="#">联系我们</a> <ul> <li><a href="#">公司邮箱</a></li> <li><a href="#">公司电话</a></li> </ul> </li> </ul> </div> <div class="sitenav"> <!-- 侧导航栏 --> <div class="site-l">左侧侧导航栏</div> <div class="site-r"><a href="#">登录</a></div> </div> </body> </html>
六、综合测试题（2）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .nav { text-align: center; } .nav a{ /*后代选择器 限定范围 */ width: 120px; height: 50px; /*background-color: pink;*/ /*因为a是行内元素， 没有大小，我们需要转换 inline-block */ display: inline-block; background-image: url(images/bg.png); text-align: center; /*让盒子内的文字居中对齐*/ /*1. 行内元素 行内块元素 我们可以看做文本 */ color: #fff; text-decoration: none; /*取消下划线*/ /*2. 行高等于盒子的高度，可以让 单行文本垂直居中*/ line-height: 50px; } .nav a:hover { /*当我们鼠标经过了 nav 里面的连接的时候*/ background-image: url(images/bgc.png); } </style> </head> <body> <div class="nav"> <!-- 导航栏开始了 --> <a href="#">网站导航</a> <a href="#">网站导航</a> <a href="#">网站导航</a> <a href="#">网站导航</a> <a href="#">网站导航</a> <a href="#">网站导航</a> </div> </body> </html>
--