2. CSS的学习
CSS组成：选择器 {样式}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>体验CSS语法规范</title> <style> /* 选择器 {样式} */ /* 给谁改样式 { 改什么样式} */ p { color: red; /* 修改了文字大小为12像素 */ font-size: 12px; } </style> </head> <body> <p>有点意思</p> </body> </html>
注意：选择器和空格之间需要加空格，且CSS的内容写在head之间，html的内容写在body之间。
2.1 CSS代码风格
2.2 选择器的学习
2.2.1 基础选择器
1.类选择器（用 . ）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>基础选择器之类选择器</title> <style> /* 类选择器口诀: 样式点定义 结构类(class)调用 一个或多个 开发最常用*/ .red { color: red; } .star-sing { color: green; } .memeda { color: pink; } </style> </head> <body> <ul> <li class="red">冰雨</li> <li class="red">来生缘</li> <li>李香兰</li> <li class="memeda">生僻字</li> <li class="star-sing">江南style</li> </ul> <div class="red">我也想变红色</div> </body> </html>
多类名的使用方便代码的复用，简化操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>利用类选择器画三个盒子</title> <style> .box { width: 150px; height: 100px; font-size: 30px; } .red { /* 背景颜色 */ background-color: red; } .green { background-color: green; } </style> </head> <body> <div class="box red">红色</div> <div class="box green">绿色</div> <div class="box red">红色</div> </body> </html>
2. id选择器（用 # ）
注意：id选择器只能调用一次，一旦有人使用此id，其他人均不可使用，这是与class选择器的区别（通俗的讲，id相当于身份证号，class相当于姓名）
3.通配符选择器（用 * ）
