【网页前端】CSS样式表入门概述以及基本语法格式和选择器
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS样式表入门概述以及基本语法格式和选择器
文章目录
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>示例：
效果：
腾讯云开发者
