《二 》CSS
知识点回顾：
HTML:超文本标记语言
描述内容显示在网页中
语法规则：
不区分大小写
标签成对，但是单标签
属性值必须双引号
标签固定
标签嵌套使用
常用标签：
meta
title
div
p
span
a:href
img:src
input
select
textarea
form:action&method
table：border
get和post
MIME类型：
就是标记文档的类型
格式：大类型/小类型
css:text/css
js:text/javascript
图片：image/jpg
所有图片：image/*
1、CSS是什么？
层叠样式表 (Cascading Style Sheets)
定义如何显示HTML元素的样式
2、CSS的作用是什么？
1、提高工作效率
2、多样式层叠
3、提高了内容和样式的分离
就是美化HTML显示的内容
3、CSS的语法规则
规则：
选择器{属性名称:值;属性名称:值}
eg:
h1{color:red;}
CSS不区分大小写，但是id和class选择器区分大小写
4、CSS的引入方式有多少？
1、内嵌样式
Html元素都有一个属性：style,直接在html元素内使用
eg:
<h1 style="font-size:20px">今天好好听课</h1>
2、内部样式
在html文档的<head>标签中使用
<style type="text/css">
选择器{属性名称:值}
</style>
3、外部样式表
创建css文件，在网页中的<head>中通过<link>标签引用
eg:
<link rel="stylesheet" type="text/css" href="theme.css" />
rel：文本类型，告知引用的类型
type:MIME类型
href:外部样式文件所在路径
4、导入式外部样式
@import url("外部样式文件路径")
不推荐使用，主要针对IE老版本
样式作用的优先级：
内嵌->内部->外部
就近原则
5、CSS的选择器
1、标签选择器
格式：HTML标签名称{属性名:值}
2、类选择器
要求html的标签使用class属性命名类名
格式：.类名{属性名:值}
HTML标签可以拥有同一个class
3、ID选择器
要求HTML的标签使用id属性名称，id名不可重复
格式：#id名称{属性名:值}
4、派生选择器
规则：选择器(标签、类、id) 内部标签名称{属性名:值}
就是通过标签的内部嵌套来修改指定标签的样式
5、属性选择器
规则：标签名称(可以省略)[属性名称="值"]{属性名:值}
就是通过标签的属性名称来修改指定标签的样式
6、伪类选择器
规则：标签名称:伪类名称{属性名:值}
常用的伪类：
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式。
:first-letter 向文本的第一个字母添加特殊样式。 1
:first-line 向文本的首行添加特殊样式。 1
:before 在元素之前添加内容。 2
:after 在元素之后添加内容。
6、CSS的属性
1、背景属性
background:背景色/图
background-color:背景色
background-image:背景图
图片过小，标签过大默认会出现背景重复
background-repeat:设置重复样式
取值：
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
background-position:定位，显示的位置
取值：
left
right
top
bottom
center
具体数值
background-attachment:设置背景图是否跟着一起动
取值：
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
2、文本属性
1、text-indent：缩进
2、text-align:对齐方式
3、letter-spacing: 字母的间距
4、word-spacing:单词的间距
5、text-transform:变换，大小写转换
取值：
none
uppercase
lowercase
6、 text-decoration:文本装饰
取值：
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
7、direction: 文本方向
取值：
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。
3、字体属性
1、font-family：字体类型
楷体、黑体、宋体等
2、font-style：设置是否倾斜
3、font-weight:设置字体的粗细
取值：
[100,900]
正常：400
加粗：700
4、font-size：字体大小
4、列表属性(不常用)
1、list-style-image 将图象设置为列表项标志。
2、list-style-type 设置列表项标志的类型
5、表格属性
1、width:宽
2、height:高
3、border:边框
4、text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中
5、vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：
6、轮廓属性(不常用)
1、outline-color 设置轮廓的颜色。
2、outline-style 设置轮廓的样式。
取值：
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
3、outline-width 设置轮廓的宽度。
7、CSS新增属性
CSS的注释方式：
在<style>标签下使用
/*注释内容*/
文字的尺寸
em:自动适应尺寸，方便字体的放大或缩小
1em=16px
0.75em=12px
默认字体大小16px
px：像素，表达字体大小，缩放的时候有点不好用
为了网页的实用性，推荐字体大小单位em
%:百分比表达字体大小
italic和oblique的区别？
体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。
来源：CSDN
作者：${简简单单}
链接：https://blog.csdn.net/aohongzhu/article/details/93377696