🔎这里是【前端网页】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS样式表入门概述以及基本语法格式和选择器
文章目录
1.CSS 概述
1.1什么是 CSS
1.1入门案例
2. CSS 基本语法格式
3. 选择器
3.1 标签选择器
3.2 类选择器
3.3 ID 选择器
3.4 扩展：通配符选择器
3.5 扩展：属性选择器
1.CSS 概述
1.1什么是 CSS
CSS (Cascading Style Sheets) ：层叠样式表
层叠：一层一层叠加
样式表：存储样式的地方，多个样式
CSS 通常称为 CSS 样式或层叠样式表，主要用于设置 HTML 页面中的文本内容（字
体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外
观显示样式。
CSS 可以使 HTML 页面更好看， CSS 色系的搭配可以让用户更舒服， CSS+DIV 布
局更佳灵活，更容易绘制出用户需要的结构。
CSS 作用：修饰 HTML 页面，更丰富多彩地展示超文本信息
1.1入门案例
步骤 1 ：创建一个 HTML 文件
步骤 2 ：在 HTML 上创建一个标签
步骤 3 ：标签中新增一个 style 属性，并修改 style 属性值
效果：
因为 HTML 属性在单独使用时有一定的局限性，所以要配合 CSS 样式代码才可以展示更为丰富的
效果。
2. CSS 基本语法格式
放置规范：
在 <style> 标签内容体中书写 css 样式代码。
<style> 标签放置在 <head> 标签之中。
格式规范：
选择器名称 { 属性名 1 ：属性值 1 ；属性名 2 ：属性值 2 ；…… .}
选择器：即指定 CSS 样式作用在哪些 HTML 标签上
代码规范：
属性名和属性值之间是键值对关系；
属性名和属性值之间 用 “:” 连接，最后“ ; ”结尾；
例如： font-size:120px;
如果一个属性名有多个值，多个值之间用 空格 隔开。
例如： border :5px solid red;
CSS 注释： /* 注释内容 */
等同于 java 的多行注释
示例：
效果：
3. 选择器
3.1 标签选择器
标签选择器：即以 HTML 标签名作为选择器名称。
作用：选择 CSS 样式代码 作用于 对应标签名的标签上。
格式：
标签名 {
/*CSS 样式代码 */
}
适用范围：适用于将相同样式
作用在多个同名标签上
准备代码：
<span>我是 span111111111111</span>
<span>我是 span222222222222</span>
<span>我是 div111111111111</span>
<span>我是 div222222222222</span>
示例：
效果：
3.2 类选择器
每个 HTML 标签都有一个 class 属性， class 属性值即为类名
类选择器：即以 HTML 的类名（
class 属性值）作为选择器名称。
作用：选择 CSS 样式代码 作用于 对应类名的 HTML 标签上
格式：
. 类名 {
/*CSS 样式代码 */
}
适用范围：适用于将样式 一次作用在相同类名的标签上。（即使标签名不同）
准备代码：
<span>span1：我是黑色</span>
<span class="redF">span2：我是红色</span>
<div>div：我是黑色</div>
<div class="redF">div2：我是红色</div>
示例：
效果：
注意：
1 、如果需要选择多个，例如同时使用 c1 和 c2 多个样式：
2 、类选择器命名时，词组之间可以通过中横线来分隔：
例如： main-top
main-middle
main-bottom
3.3 ID 选择器
每个 HTML 标签都有一个 id 属性， id 的属性值必须在本页面是唯一的。
id 选择器：即以 HTML 的 id （
id 属性值）作为选择器名称。
作用：选择 CSS 样式代码 作用于 某个规定 id 值的 html 标签上
格式：
#id 值 {
/*CSS 样式代码 */
}
适用范围：适用于将样式 作用某个标签上。（更有针对性）
注意：
必须人工保证 ID 值在本页面唯一。
准备代码：
<span>span1：我是黑色</span>
<span>span2：我是黑色</span>
<div>div1：我是黑色</div>
<div id="d1">div2：我是红色</div>
<div id="d2">div2：我是红色</div>
示例：
效果：
注意：
class 属性是为了美工 通过类选择器 调整页面样式
id 属性更多是为了程序员 通过 JS 操作页面
3.4 扩展：通配符选择器
CSS 支持使用 * 作为通配符，表示任意元素
上述案例中，因为使用 * 代表任意元素，这里 <h1> 和 <h2> 两个标签都被修改了样式。
注意：不建议使用，会降低页面加载速度。
3.5 扩展：属性选择器
每个标签将来都会设置不同的属性及属性值，
我们可以通过标签的属性及属性值来将样式作用于特点标签上。
格式：
标签名 [ 属性名 =’ 属性值 ’] {
/*css 样式代码 */
}
准备代码：
<font size="3">黑色字体 1111</font>
<font size="5">黑色字体 2222</font>
<font size="7">红色字体</font>
示例：
效果：
