目录
一.CSS网页的美容师
css主要使用场景就是美化页面，布局页面的
CSS也是一种标记语言
CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等），图片的外壳(宽高，边框样式，边距等）以及版面的布局和外观显示样式
CSS最大的价值：由HTML专注去做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS)相分离
二. CSS语法规范
CSS规范由俩个主要的部分构成:选择器以及一条或多条声明
👩🏾💻样式：
- 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式（font-size文字 px像素 ）
- 属性和属性值以“键值对”的形式出现 （属性后面跟值就是键值对）
- 属性是对指定的对象设置的样式属性，例如字体大小，文本颜色
- 属性和属性值之间用英文":"分开
- 多个"键值对"之间用英文";"区分
CSS语法中并不是在<body>标签中，而是在<head>标签中，嵌套<style>标签
👩🏾💻选择器 :
- 选择器：就是给谁改样式
- 样式：需要改什么样式
比如：将段落标签<p>中有点意思改成红色字体，大小改成12像素
❗选择器分类
选择器(选择符)就是根据不同需求把不同的标签选出来就是选择器的作用。简单来说，就是选择标签用的
选择器分为基础选择器和复合选择器俩个大类
👉CSS选择器的作用
- 我想把div里面的文字改成红色？
- 我想把第一个div里面的文字改成红色？
- 我想把ul里面的li文字改成红色？
CSS做了俩件事:
- 1.找到所有的h1标签，选择器(选对人)
- 2.设置这些标签样式，比如颜色为红色(做对事）
三.CSS基础选择器
- 基础选择器是由单个选择器组成的
- 基础选择器又包括:标签选择器，类选择器，id选择器和通配符选择器
🚩标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
- 语法:
- 作用:
标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签
- 优点:
能快速为页面中同类型的标签统一设置样式
- 缺点:
不能设计差异化样式，只能选择全部的当前标签，不能给同类型的标签其中一个设置样式
🚩类选择器
如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器
类选择器不能用数字来命名 ，大多数用英文字母来命名。
🕶️类选择器口诀：样式.定义 结构(class)调用 一个或多个，开发最常见
- 语法:
💡class属性:
结构需要用class属性来调用类的意思
比如:将相同类型的div标签内的第一个<li>标签内的文字改成红色
比如:将相同类型的li标签内的第一个<li>标签和第二个<li>标签内的文字改成红色（只要在标签内加class属性）
🚩案例
通过这个案例学习俩个地方：
- 1.类选择器的使用(宽，高，背景颜色）
- 2.div就是一个盒子，用来装网页内容的
背景颜色：background-color
🚩类选择器-多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签
简单理解就是一个标签有多个名字
💻多类名使用方式
- 在标签class属性中写多个类名
- 多个类名中间必须用空格分开
- 这个标签就可以分别具有这些类名的样式
比如：将zyf改成红色又将zyf弄成35号字体
💻多类名开发中使用场景
- 将一些标签元素相同的样式(共同的部分)放进了同一个类选择器里面，方便修改
- 这些标签都可以调用这个公共的类，然后再调用自己独有的类
- 从而节省CSS代码，统一修改也非常方便
从上图可以看出在类选择器中出现了相同的样式，我们不妨给它们都弄到一个类选择器中
在class属性中加个属性值box就可以实现，这就是多类名的使用场景，为了更好的修改样式，如果我们要将宽改成150，那么直接在box类选择器中修改即可。
🚩id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义
口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用
例如:将id为pink元素中的内容设置为粉红色 (#来定义为pink(自定义）id属性与自定义名字必须相同)
这与类选择器有相似之处，只不过是以#开头，调用用id属性
注意：id属性只能在每个HTML文档中出现一次
🚩id和类选择器的区别
- 类选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
就像身份证:名字是类选择器，但是身份证号是id选择器
- id选择器就好比人的身份证号码，全中国是唯一的，不得重复
- id选择器和类选择器最大不同在于使用次数上
- 类选择器再修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用
🚩通配符选择器
再CSS中，通配符选择器使用"*"定义，它表示选取页面中所有的元素(标签）
利用通配符选择器，可以将所有标签里面的元素都改成红色，包括标签都改成了红色，(*)这里 html div span li 等标签都改成了红色
🎓基础选择器总结
如果是修改样式，类选择器是使用最多的
四.CSS复合选择器
- 复合选择器可以准确高效的选择目标元素(标签）
- 复合选择器是由俩个或多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等
🚩后代选择器(重要)
后代选择器又称为包含选择器
可以选择父元素里面的子元素，其语法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开，当标签嵌套时，内层标签就成了外层标签的后代
元素1 元素2 {样式声明} 选择元素1里面的所有元素2(后代元素)
- 元素1和元素2中间用空格隔开
- 元素1是父级，元素2是子级，最终选择的是元素2(最终改的是内层标签的样式)
- 元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
- 元素1和元素2可以是任意基础选择器（标签选择器，#选择器，id选择器）
🚩子选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。
- 元素1和元素2中间用大于号隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2必须是亲儿子，其孙子，重孙之类都不归他管，你也可以叫他亲儿子选择器
🚩并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
并集选择器是各选择器通过英文符号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分
- 元素1和元素2中间用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明
任何形式的选择器都可以作为并集选择器的一部分
例如：div和p标签内的以及类选择器中后代选择器，改成粉红色。
- 约定的语法规范，我们并集选择器喜欢竖着写
- 一定要注意最后一个选择器 不需要加逗号
🚩伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
- 伪类选择器书写最大特点是用冒号(:)表示，比如 :hover :first-child
- 类选择器是点号(.)
因为伪类选择器很多，比如有链接伪类，结构伪类等
📝链接伪类选择器
- a:link 选择所有未被访问的链接
- a:visited 选择所有已被访问的链接
- a:hover 选择鼠标指针位于其上的链接(原来那个链接颜色是红色，鼠标经过那个链接，那个链接就变成设定的颜色蓝色)
- a:active 选择活动链接(鼠标按下未弹起的链接)(选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 )
- 为了保证生效，请按照LVHA的循顺序声明:link-:visited-:hover-:active.(love hate)
- 因为a链接在浏览器重具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
📝fouce伪类选择器
:fouce 伪类型器用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说
🎓复合选择器总结:
一点点的给自己重新养一遍，哪怕慢一点然后再去看看这个世界。
扫一扫
1053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
