CSS3学习(一)

1. 语法规范

CSS主要由选择器和一条或多条的声明构成。

选择器用于指定CSS样式的HTML标签,花括号里面是对应的具体样式

属性与属性值以键值对的形式出现,属性与属性之间用分号隔开

<head>里写<style>

2. 基础选择器

【作用】选择标签使用

选择器分为基础选择器和复合选择器,基础选择器是由单个选择器组成的,包括标签选择器、类选择器、id选择器和通配符选择器

2.1 标签选择器

用HTML标签名称作为选择器,为同一类标签全部制定统一样式。不能差异化设置

2.2 类选择器

差异化选择不同的标签,单独选一个或及格标签。类名是自己起的,但不能使用标签名字作为类名。语法如下:

结构需要用class属性来调用class类,使用如下:

2.3 多类名

给一个标签指定多个类名,从而达到更多选择目的,在class属性里写多个类名,必须以空格隔开。

使用场景:把标签中相同的样式放到一个类里,节省代码方便修改

2.4 id选择器

id选择器可以为特定id的HTML元素指定特定的样式,HTML以id属性 设置id选择器,CSS中id选择器以**#**来定义。

【注】id只能被调用一次。id选择器类似于身份证号,类名选择器类似于姓名。

类选择器在修改样式上使用是最多的,id选择器一般用于页面上唯一性的元素,常和JavaScript配合使用。

2.5 通配符选择器

在CSS中,使用*定义通配符选择器,表示选取页面中所有的元素。语法如下:

通配符选择器不需要去调用,自动就给元素使用样式。

2.6 基础选择器总结

相关推荐
黄鹂绿柳2 小时前
Vue+Vite学习笔记
vue.js·笔记·学习
来自星星的坤2 小时前
【Vue 3 + Vue Router 4】如何正确重置路由实例(resetRouter)——避免“VueRouter is not defined”错误
前端·javascript·vue.js
985小水博一枚呀6 小时前
【AI大模型学习路线】第二阶段之RAG基础与架构——第七章(【项目实战】基于RAG的PDF文档助手)技术方案与架构设计?
人工智能·学习·语言模型·架构·大模型
香蕉可乐荷包蛋6 小时前
浅入ES5、ES6(ES2015)、ES2023(ES14)版本对比,及使用建议---ES6就够用(个人觉得)
前端·javascript·es6
未来之窗软件服务6 小时前
资源管理器必要性———仙盟创梦IDE
前端·javascript·ide·仙盟创梦ide
hello1114-7 小时前
Redis学习打卡-Day3-分布式ID生成策略、分布式锁
redis·分布式·学习
小Tomkk7 小时前
2025年PMP 学习二十 第13章 项目相关方管理
学习·pmp·项目pmp
liuyang___7 小时前
第一次经历项目上线
前端·typescript
西哥写代码8 小时前
基于cornerstone3D的dicom影像浏览器 第十八章 自定义序列自动播放条
前端·javascript·vue
独行soc8 小时前
2025年渗透测试面试题总结-百度面经(题目+回答)
运维·开发语言·经验分享·学习·面试·渗透测试·php