首页 > 编程札记 > 编程

HTML CSS (Basic) Chapter3(Pink) 基础选择器

阅读：评论：0

文章目录

1. CSS基础语法及知识点
2. 示例
- Eg1: CSS基本语法规范
- - 源代码
  - 测试效果
- Eg2: CSS基础选择器
- - 源代码
  - 测试效果
- Eg3: CSS类选择器画盒子
- - 源代码
  - 测试效果
- Eg4: 类选择器多类名
- - 源代码
  - 测试效果
写在最后

1. CSS基础语法及知识点

格式

选择器 {样式}
给谁修改样式 {改什么样式}

代码风格
1. 展开式书写
2. 样式使用小写
3. 属性值前面，冒号后面使用空格
4. 选择器后面加上一个空格

2. 示例

Eg1: CSS基本语法规范

源代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>体验CSS基本语法规范</title><!-- CSS的标签一般写在head文件头的style标签中 --><style>/* 选择器 {样式} *//* 给谁修改样式 {改什么样式} */p {/* 属性与属性之间使用键值对的方式出现每一个键值对之前使用分号；分割 */color: red;font-size: 12px; /*改成12像素  */}</style></head>
<body><p>有点意思呀</p></body>
</html>

测试效果

Eg2: CSS基础选择器

源代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS基础选择器</title><style>/* 标签选择器：写上标签名 */p {color: green;}div {color: pink;}/* 使用类选择器进行差异化选择 *//* 口诀： 样式点定义，结构类调用，一个或多个，开发最常用 *//* 最好别用标签做类名 */.red {color: red;}.star-sing {color: green;}</style>
</head>
<body><h2>标签选择器</h2><!-- 选择器分为基础选择器和复合选择器 --><!-- 基础选择器：标签选择器，类选择器。id选择器和通配符选择器 --><p>男生</p><p>男生</p><p>男生</p><p>男生</p><div>女生</div><div>女生</div><div>女生</div><div>女生</div><h2>类选择器</h2><ul><li class="red">冰雨</li><li>来生缘</li><li class="red">李香兰</li><li>生僻字</li><li class="star-sing">江南style</li></ul></body>
</html>

测试效果

Eg3: CSS类选择器画盒子

源代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 100px;height: 100px;}.red {/* 背景颜色 */background-color: red;}.green {background-color: green;}.font30 {font-size: 30px;}</style>
</head>
<body><div class="red box font30">红色</div><div class="green box font30">绿色</div><div class="red box font30">红色</div>
</body>
</html>

测试效果

Eg4: 类选择器多类名

我们可以给一个标签指定多个类名
简单理解就是一个标签有多个名字昵称
多个类名之间要有多个空格

源代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red {color: red;}.font35 {font-size: 45px;}</style>
</head>
<body><div class="red font35">刘德华</div>
</body>
</html>