🔎引入方式
- 引入方式
- 内部样式
- 直接将 CSS 写入到 HTML 中的 style 标签
- 外部样式
- 将 CSS 写成一个单独的 .css 文件, 通过 HTML 的 link 标签引入
- 内联样式
- 将 CSS 属性写在元素的 style 属性中
内部样式
外部样式
🔎CSS 选择器
选择器类别 | 特点 |
标签选择器 | 能够快速的将同一类型的标签全部选择, 但是不能差异化选择 |
类选择器 | 能够差异化表示不同的标签, 可以让多个标签都使用同一个类 |
id 选择器 | 能够差异化表示不同的标签, 可以让多个标签都使用同一个 id |
后代选择器 | 跳过父元素作用于它的子元素 |
标签选择器
通过 div 标签选择器, 能够将同一类型的 div 标签全部选择
而 ccc 属于 h1 标签, 所以 div 标签选择器并未对其产生效果
类选择器
通过 .cls 类选择器, 能够差异化表示不同的标签
这里让 aaa 和 ccc 使用同一个类 cls, 因此它们产生的效果相同
而 bbb 并没有使用 cls 类, 展示的效果则是系统默认的
id 选择器
通过 id 选择器, 能够差异化表示不同的标签
这里让 aaa 和 ccc 使用同一个 id, 因此它们产生的效果相同
而 bbb 并没有使用 id 选择器, 展示的效果则是系统默认的
后代选择器
跳过 h3 的父标签 div, 直接作用于子元素 h3
而 aaa 和 bbb 的标签分别为 h1, h2. 后代选择器是 div h3, 并不产生效果
注意事项🥝
- 类选择器
- 使用 . 开头表示类选择器
- 在需要修改的标签中, 使用 class=“类名” 的格式
- 一个类可以被多个标签使用, 一个标签也能使用多个类
- 尽量避免使用纯数字, 中文, 标签名… 对类进行命名
- id 选择器
- 使用 # 开头表示 id 选择器
- id 选择器中的值和需要修改的标签中的 id 相同
- 后代选择器
- 使用 空格 分割基础选择器
🔎字体
标签 | 含义 |
font-family | 设置字体格式 |
font-size | 设置字体大小 |
font-weight | 设置字体粗细 |
font-style | 设置字体样式 |
color | 设置字体颜色 |
设置字体格式
<style> .font { font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } </style>
- 字体名称可以使用中文, 但是不建议
- (例如 font-family: “微软雅黑” )
- 多个字体之间使用逗号分隔
- (从左到右查找, 如果都找不到, 会使用默认字体)
- 字体中有空格, 需要使用引号包裹
设置字体大小
<style> .font { font-size: 50px; } </style>
- 不同的浏览器默认的字号不同, 最好给定一个数值
设置字体粗细
<style> .font { font-weight: bold; /* font-weight: 700; */ /* font-weight: 400; */ } </style>
- 可以使用数字表示粗细
- (取值范围是 100 ~ 900, 闭区间)
- 700 表示 bold, 400 表示 normal
设置字体样式
<style> .font { font-style: italic; } </style>
- font-style: italic (设置为倾斜格式)
- font-style: normal (设置为正常格式)
设置字体颜色
<style> .font { color: red; color: rgb(, , ); color: #ff0000; } </style>
- color 的写法可以分为3种
- 直接输入对应颜色的单词
- 使用
rgb(*, *, *)
*
表示 0 ~ 255之间的数字
- 使用16进制的方式表示
#ffaabb
格式可以简写成#fab
格式- 其他格式不可以简写
🔎文本
标签 | 含义 |
text-align | 设置文本对齐方式 |
text-decoration | 设置文本装饰方式 |
text-indent | 设置文本缩进 |
line-height | 设置文本行高 |
设置文本对齐方式
<style> .text { text-align: left; text-align: center; text-align: right; } </style>
- text-align: left
- 水平靠左对齐
- text-align: center
- 水平居中对齐
- text-align: right
- 水平靠右对齐
设置文本装饰方式
<style> .text { text-decoration: underline; text-decoration: none; text-decoration: overline; text-decoration: line-through; } </style>
- underline(下划线)
- none(没有装饰)
- 通常用于去除 a 标签的下划线
- overline(上划线)
- line-through(删除线)
设置文本缩进
<style> .text { text-indent: -1em; text-indent: 1em; } </style>
- 缩进的单位通常是 em
- 1em 表示当前元素的文字大小 (当前文字是 “你好”, 1em 则表示 “你好” 这2个文字的1个文字大小)
- 缩进的值
- 缩进的值为负数, 表示向左缩进
- 缩进的值为正数, 表示向右缩进
设置文本行高
<style> .text { line-height: 40px; } </style>
- 行高 = 上边距 + 下边距 + 文字大小
- (其中上, 下边距是相等的. 例如行高为40px, 文字大小为18px, 则上下边距为11px)
🔎背景
标签 | 含义 |
background-color | 设置背景颜色 |
background-image | 设置背景图片 |
background-repeat | 设置背景平铺 |
background-position | 设置背景位置 |
background-size | 设置背景尺寸 |
设置背景颜色
<style> .background { background-color: red; background-color: rgb(, , ); background-color: #ff00ff; } </style>
- background-color 的写法可以分为3种
- 直接输入对应颜色的单词
- 使用
rgb(*, *, *)
*
表示 0 ~ 255之间的数字
- 使用16进制的方式表示
#ffaabb
格式可以简写成#fab
格式- 其他格式不可以简写
设置背景图片
<style> .background { background-image: url("./dog.png"); } </style>
- url 中的路径可以是绝对路径, 也可以是相对路径
设置背景平铺
<style> .background { background-repeat: repeat; background-repeat: no-repeat; background-repeat: repeat-x; background-repeat: repeat-y; } </style>
- repeat: 平铺(默认就是平铺方式)
- no-repeat: 不平铺
- repeat-x: 水平平铺
- repeat-y: 垂直平铺
设置背景位置
<style> .background { background-image: url("./dog.png"); background-position: center; background-position: x% y%; background-position: xpos ypos; } </style>
- 背景位置用于修改背景图片的位置
- 参数有三种风格
- 方位名词
- (top left, top center, top right)
- (center left, center center, center right)
- (bottom left, bottom center, bottom right)
- 注意, 如果仅规定了一个关键词, 另一个值将是 center
- 精确单位
- (x% y%)
- 第一个是水平位置, 第二个是垂直位置
- 左上角是 0% 0%, 右下角是 100% 100%
- 注意, 如果仅规定了一个关键词, 另一个值将是 50%
- 混合单位
- (xpos ypos)
- 第一个值是水平位置, 第二个值是垂直位置
- 左上角是 0 0
- 注意, 如果仅规定了一个关键词, 另一个值将是 50%
- 可以混合使用 % 和 position 的值