这篇博客介绍了CSS的基础知识，包括完成作业、学习资料、下载资源。内容涵盖CSS概述、选择器（基础选择器如标签、类、ID和通配符选择器）、CSS语法规范、选择器的使用场景和优先级。文章还讨论了尺寸和单位，以及内联、内部和外部样式的应用。此外，提供了控制台调试代码的实践指导，帮助读者深入理解和应用CSS。
| 今天学习内容 |
| 1:完成昨天作业 1.1:修改用户信息 1.2:扩展学习资料与视频(黑米2 黑米 3) 链接：https://pan.baidu.com/s/1xnbyC8iNxnX-sgBuPURu_g 提取码：kqfx |
| 2:在ftp css/day01/下载 ziliao |
| 3:css 部分 #特点:入门轻松 进阶花多时间 黑米1;代码视频 |
| css 极其优秀编程序(入门非常简单;见效快) |
| 缺点:单词稍多;(常用背下 几十个) |
| (1)黑米1 完善PC网页开发完整流程 (2)牙科诊所 (3)幼儿园只代码 |
一、css 的概述
1.早期的 web 网页
早期网页如上
1997 年，w3c 颁布了 css1.0 版本，随即微软和网景公司的浏览器均能支持 CSS1.0。
2.为什么要加入CSS
CSS 是也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML ,让 HTML 更漂亮，
3：CSS 语法规范
CSS 层叠样式表
使用 HTML 时，需要遵从一定的规范，CSS 也是如此。
要想熟练地使用 CSS 对网页进行修饰，首先需要了解 CSS 样式规则。
CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
1:选择器(查找器)是用于查找特定HTML 标签，花括号内是对该对象设置的具体样式
2:属性和属性值以“键值对”的形式出现
3: 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
4:属性和属性值之间用英文“:”分开 多个“键值对”之间用英文“;”进行区分
###注意选择器大小写
h3 {
color: pink;
}
H3 {
COLOR: PINK;
}
强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外
####样式格式书写
① 紧凑格式
h3 { color: deeppink;font-size: 20px;}
② 展开格式
h3 {
color: pink;
font-size: 20px;
}
强烈推荐第二种格式， 因为更直观。
#不要担心这样的CSS文件过大，后期有压缩功能可以去除这些空白空间
##CSS 语法规范
所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方。
<head>
<style>
h4 {
color: blue;
font-size: 100px;
}
</style>
</head>
二、选择器
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。以上 CSS 做了两件事：
<style>
div{color:red;}
</style>
<div>我是div</div>
<p>我是段落</p>
以上 CSS 做了两件事：
1. 找到所有的 div 标签。 选择器（选对人）。
2. 设置这些标签的样式，比如颜色为红色（做对事）。
选择器分类
选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器。
-基础选择器是由单个选择器组成的
-基础选择器又包括：
标签(h1,span;div;..)选择器、
类(<div class=”base”></div>)选择器、
id (<div id=”box”></div>)选择器和通配符选择器
1.基础选择器
1)元素选择器（标签选择器）
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定 统一的 CSS 样式。
语法:
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定 统一的 CSS 样式。
作用 标签选择器可以把某一类标签全部选择出来，比如所有的
标签和所有的 标签。
优点 能快速为页面中同类型的标签统一设置样式。
缺点 不能设计差异化样式，只能选择全部的当前标签
######################################
类选择器(重点!!!!) <div class=”red”></div>
语法
.类名 { 属性1: 属性值1; ... }
例如，将所有拥有 red 类的 HTML 元素均为红色。
.red {
color: red;
}
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
类选择器
语法
结构需要用class属性来调用 class 类的意思
<div class=‘red’> 变红色 </div>
<style>
.red{…}
</style>
| 分析标签 (1)三个标签 #文字颜色不同 大小不同 功能不同 (2)鼠标移动文字变小手 a (3)临时 <div> <a href=”#” class=”nav”>首页</a> <a href=”#” class=”nav”>学习用品</a> <a href=”#” class=”nav”>私人定制</a> </div> |
| 分析样式 <style> .nav{ font-size:16px; color:#ccc; /*去除a标签生下来就有下划线*/ text-decoration: none; } </style> |
| 常见错误 |
| (1)上面代码出错造成下面代码无效 |
| (2)调试css代码 F12 ELEMETNS元素标签查询样式 |
###类选择器
注意
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
① 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
② 可以理解为给这个标签起了一个名字，来表示。
③ 长名称或词组可以使用中横线来为选择器命名。
④ 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
⑤ 命名要有意义，尽量使别人一眼就知道这个类名的目的。
⑥ 命名规范：见附件（ Web 前端开发规范手册.doc）
#案例一:创建三个方块(红绿红)
#div 方块(矩形:正方形或者长方形)
#背景颜色 background-color:green;
#div (1)高度0 (2)背景颜透明 (3)宽度100% 横向充满整个网页
<div class=”red”>1</div>
<div class=”box”>2</div>
<div class=”red”>3</div>
通过这个案例练习两个地方:
1. 类选择器的使用
2. div 就是一个盒子,用来装网页内容的.
多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的。 这些类名都可以选出这个标签. 简单理解就是一个标签有多个名字
多类名使用方式
2 类选择器
<div class="red font20">亚瑟</div>
(1) 在标签class 属性中写 多个类名
(2) 多个类名中间必须用空格分开
(3) 这个标签就可以分别具有这些类名的样式
多类名开发中使用场景
####类选择器
(1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
(2) 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
(3) 从而节省CSS代码,统一修改也非常方便
各个类名中间用空格隔开
-简单理解：就是给某个标签添加了多个类，或者这个标签有多个名字
-这个标签就可以分别具有这些类名的样式
-从而节省CSS代码,统一修改也非常方便.
-多类名选择器在后期布局比较复杂的情况下，还是较多使用的
（3）id 选择器(了解)
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML 元素以 id 属性来设置 id 选择器，
CSS 中 id 选择器以“#" 来定义。 #id名 { 属性1: 属性值1; ... } #nav { color:red; } 2.5 id 选择器 语法 注意：id 属性只能在每个 HTML 文档中出现一次。
口诀: 样式#定义,结构id调用, 只能调用一次, 别人切勿使用
| id 选择器和类选择器的区别 ① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。 ② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。 ③ id 选择器和类选择器最大的不同在于使用次数上。 ④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用 |
id示例
| 分析标签 <style> #logo{ width:168px; #图片宽度 } </style> <div> <a> <img src=”logo.png”id=”logo”> </a> </div> |
| 通用套路 (1)为啥有div父元素:负责 背景 宽度 宽度 定位 (2)为啥a 滑动小手 |
CSS 基础选择器(了解)
在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。
* {
属性1: 属性值1;
...
}
-通配符选择器不需要调用， 自动就给所有的元素使用样式
l-特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期讲)
* {
margin: 0;
padding: 0;
}
基础选择器总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
| 标签选择器 | 可以选出所有相同标签比如p | 不能差异化选择 | 较多 | p{color:red} |
| 类选择器 | 可以选中1个或者多个标签 | 可根据需求选择 | 非常多 | .nav{color:red} |
| id选择器 | 一次只能选择1标签 | id属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #nav{color:nred} |
| 通配符选择器 | 选择所有标签 | 选择太多 | 特殊情况使用 | *{color:red} |
l 每个基础选择器都有使用场景，都需要掌握
l 如果是修改样式， 类选择器是使用最多的
什么是复合选择器
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
-复合选择器可以更准确、更高效的选择目标元素（标签）
-复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
-常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
| (1)后代选择器 (掌握) |
| 后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。 标准语法 元素1 元素2 { 样式声明 } ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */ 1.2 后代选择器 (重要） -元素1 和 元素2 中间用空格隔开 -元素1 是父级，元素2 是子级，最终选择的是元素2 -元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可 -元素1 和 元素2 可以是任意基础选择器 |
| 分析标签 (1)div 背景 宽度 高度 定位 (2)ul li a |
2.关系选择器
在 html 结构中存在三种关系，“兄弟关系”、“父子关系”、“后代关系”
（2）子代选择器
- 可以选中某个元素的直接子元素，与后代不同的是子代选择器的范围更小。
- `父级元素 > 子级元素 {样式声明}`
- 层级可以向后代选择器一样延申,区别就是子代是>连接,后代是空格连接`.baba > div > div {字体颜色;}`
| 建议 |
| (1)项目网页比较复杂嵌套层次多 谨慎多用子代(精确) |
| (2)项目网页不是很复杂嵌套层次 3>5 后代 |
（3）兄弟选择器
- 同一层的关系选择器，可以选中该元素后面的兄弟元素。
- `某元素选择器 ~ 该元素后面的所有兄弟 {样式声明}`
示例练习:小米顶部导航条
-云服务器后红色字
- 需要注意的是兄弟选择器可以选到该元素后面的兄弟，而选不到之前的。
（4）相邻选择器
- 同一层的关系选择器，可以选中参照的元素后面紧挨着被参照元素的选择器。
- `某元素选择器 + 该元素后面的唯一相邻的兄弟 {样式声明}`
- 需要注意的是，相邻兄弟选择器只能选中“紧紧相邻”的一个兄弟
3.伪类选择器
- 伪类选择器的作用是匹配同一个元素，不同状态下的样式
- `选择器:伪类 {样式声明}`
- `a:link {样式声明}` 没有被打开之前，或者没被打开过（`a:link`特有）
- `a:visited {样式声明}` 访问过后（`a:visited`特有）
- `div:hover {样式声明}` 鼠标悬停
- `p:active {样式声明}` 点击激活
- `input:focus {}`属性代表 input 标签获取焦点的样式(`<input/>`标签的属性)
- `input:cheaked {}`属性代表 input 单选、复选等 type 类型被选中后的样式(`<input/>`标签的属性)
| a:link { /* 没有被打开之前，或者没被打开过 */ color: green; } a:visited { /* 访问过后 */ color: green; } div:hover { /* 鼠标移入标签后展现 */ background-color: aqua; } p:active { /* 鼠标按住元素不松手 */ background-color: blueviolet; } |
4.伪元素选择器
- CSS 伪元素用于设置元素的“指定部分”的样式
- :before 表示元素最前边的部分，紧随着标签的部分
- :after 表示元素的最后边的部分，紧随着标签的部分
- :before{content:""}:after{content:""} content 必须写
- 两个冒号 (`::`) 而不是一个冒号 (`:`)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素。大多数浏览器都支持这两种表示方式。
| /* 在元素前面的部分 */ div::before { content: "你好，"; color: red; } /* 在元素后面的部分 */ p::after { content: "❤"; color: green; } |
5.css 优先级
（1）优先级的原则
- 顺序读取的优先级：是相同类型选择器采用顺序读取后来的优先
- 选择器的优先级：不同类型选择器，按照权重原则采用(id 选择器 100,类选择器 10,元素选择器 1)
- 继承的优先级：制定样式的优先级大于继承样式的优先级
- 多个选择器一起使用的时候：根据权重值累加比较值后采用优先级
- 最高优先级：!important，直接获取最高优先级，内联样式不能加!important
（2）优先级的比重大小
按 CSS 引入方式分:`内联样式 > 内部样式 > 外部样式`（但要注意外部样式引用要在内部样式下面，才会低于内部样式的优先级）
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="./1.css" /> <style> div { width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <div style="width: 50px;height: 50px;background:green;"></div> </body> </html> |
按元素分:`id选择器（100） > 类选择器（10） > 元素选择器（1）`
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: red; } .mydiv { width: 100px; height: 100px; background-color: blue; } #odiv { width: 50px; height: 50px; background-color: green; } </style> </head> <body> <div class="mydiv" id="odiv"></div> </body> </html> |
【练习】
> 要求：做一个简易的导航列表，使用 a 标签
> 鼠标移入 a 标签的时候背景颜色变红色背景
> 默认首页文字有背景颜色红色
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> a { color: #000; } .active { background-color: red; } a:hover { background-color: red; } </style> </head> <body> <div> <a href="#" class="active">首页</a> <a href="#">新闻中心</a> <a href="#">产品列表</a> <a href="#">联系我们</a> <a href="#">招商引资</a> </div> </body> </html> |
三、尺寸和单位
- 定义宽度`width`和高度`height`可以使用长度单位：px，pt，rem，em，%等等
- 一般 pc 端网页使用 px 或 pt
- 移动端使用%，em，rem，vw，vh 等响应式单位
4.css 的语法规范以上代码写在哪里(了解一下即可)
(1)内联样式
内联样式也可以叫行内样式，就是在 html 文件中的 html 标签中，使用 style 属性的样式值来完成元素的样式渲染。
| <span style="样式声明"></span> |
- 样式声明：
- 由样式属性和值组成；
- 属性和值之间用冒号连接；
- 多个样式声明用分号分隔。
- 特点：
- 写在标签里面，缺点是影响阅读，看着乱
- 不利于修改，复用性差。
- 优点:
- 指定当前标签，更加直接
| <h1>没有加任何样式，只有标签自己的样式</h1> <h1 style="color: red;">加入字体颜色样式</h1> <h1 style="color: red;font-size: 40px;">加入字体颜色和字体大小样式</h1> <h1 style="background-color: blue;font-size: 40px;"> 加入背景颜色和字体大小样式 </h1> |
(2)内部样式
在网页的头部`<head>`标签中增加一对`<style></style>`标签，在`<style>`标签记中定义该网页的所有样式。
| <head> <meta charset="UTF-8" /> <title>Document</title> <style> 选择器 {样式列表} </style> </head> |
- 样式规则：
- 由选择器和样式声明的列表组成
- 就是把很多声明好的样式匹配给页面中的元素
- 特点：
- 需要选择器查找到元素,嵌入到 html 文件中，会影响 html 文件的大小
- 只能在当前页面使用
- 优先级低于内联样式
- 多用于测试和学习，不建议用在项目中
- 易错点（关于`<style></style>`标签的位置，会有几种情况出现）
- 写在 head 标签的哪个位置？应该在 body 标签中
- `<style></style>`标签放错位置
- 直接开始写样式，根本不管在哪个标签里，想写哪就写哪
- 专注于写样式，连结构标签都写在 style 标签中
(3)外部样式
外部样式的书写方法
| <head> <link rel="stylesheet" href="wai.css" /> </head> |
- 单独创建 css 文件，在 html 的 head 标签中 link 标签引入 css 文件。
- href 叫做超文本引用，它的属性值是需要引用 css 文件的路径。
- rel 属性指引入文件于当前 html 的关系，必写属性。
- 样式规则：与内部样式相同，由选择器和样式声明的列表组成，把很多声明好的样式匹配给页面中的元素
- 特点：
- 所有页面都可以使用
- 项目中最重要的样式使用方式
- 一般情况下级别低于内部样式，但如果外部样式在内部样式下方引用，则优先级可能高于内部样式
【练习】
> 使用 css3 种使用方式，内联，内部，外部样式将以下标签内的文字设置为三种不同的字体颜色
> `<h1>lorem</h1>`内联，背景色为粉色，字体颜色为黄色
> `<h2>lorem</h2>`内部，背景色为黄色，字体颜色为红
> `<h3>lorem</h3>`外部，背景色为红色，字体颜色为蓝色
5.控制台调试代码
- 打开控制台的方法（部分 windows 的打开方式是 f12 或者鼠标右键-检查）
- 查看百度的控制台
- 通过控制台拿到很多素材
- 控制台的 elements 展示的就是 html 标签及嵌套关系
- 找到元素的方式
- 查看嵌套方式
- 看看样式，暂时更改样式
扫一扫
1231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
