本文主要是介绍HTML CSS (Basic) Chapter3(Pink) 基础选择器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 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>
测试效果
写在最后
注:上述笔记均来自黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+web前端视频教程 这一课程的学习记录，主要供自己的学习分享
各位看官，都看到这里了，麻烦动动手指头给博主来个点赞8，您的支持作者最大的创作动力哟！ ＜（＾－＾）＞
才疏学浅，若有纰漏，恳请斧正
本文章仅用于各位同志作为学习交流之用，不作任何商业用途，若涉及版权问题请速与作者联系，望悉知
这篇关于HTML CSS (Basic) Chapter3(Pink) 基础选择器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
