CSS基础篇（一）
一、什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示HTML元素
- 样式通常存储在样式表中
- 把样式添加到 HTML4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS文件中
二、样式表的分类?
行内样式
第一阶段 行内样式表（首次提出结构和样式相分离)
用法： 在标签内添加一个style属性
内部样式
第二阶段 内部样式表
用法： 在head标签里面添加一个style标签
外部样式
第三阶段 外部样式表（完全实现了结构和样式的相分离）
用法： 在外部新建一个CSS为后缀的文件 然后使用link标签进行引入。
三种样式优先级
行内样式>内部样式
行内样式>外部样式
内部样式（style）与外部样式（link）谁在后面谁的优先级越高，也就执行谁的样式，通常可以理解为就近显示原则
执行顺序：从上到下执行，同样的属性优先级高的会覆盖优先级低的
代码如下（示例）：
//内部样式与外部样式的优先级比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
font-size: 20px;
color: green;
background-color: red;
}
</style>
<link rel="stylesheet" href="1.css">
</head>
<body>
<span>内部样式与外部样式的优先级比较</span>
</body>
</html>
1.css中的代码
span{
font-size: 10px;
color: blue;
}
浏览器运行结果如下：
由此可以看出，谁的样式在后面谁的优先级越高，同样的属性优先级高的会覆盖优先级低的；不同的属性，不管它的优先级是高还是低都会显示出来
颜色表示法
- 单词表示法（例如：red、green、blue等）
- 十六进制表示法（使用#开头）
- RGB三原色表示法（范围0-255）
- RGBA表示法（在RGB基础上新添加了a,a是透明度的含义，a的取值 范围是0-1）
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
color: red;
}
.div2{
color: #0000FF;
}
.div3{
color: rgb(0, 255,0);
}
.div4{
color: rgba(0, 255,0,0.3);
}
</style>
</head>
<body>
<div class="div1">这是用单词表示法显示文本的颜色</div>
<div class="div2">这是用十六进制表示法显示文本的颜色</div>
<div class="div3">这是用RGB三原色表示法显示文本的颜色</div>
<div class="div4">这是用RGBA表示法显示文本的颜色</div>
</body>
</html>
浏览器运行结果如下：
背景样式
background-color 背景颜色
background-image 背景图片（ url（里面填的是背景地址））
background-repeat 背景图片平铺
- repeat 默认X Y都平铺
- repeat-x 横向平铺
- repeat-y 纵向平铺
- no-repeat 不平铺
background-size 背景图片大小
- value1 value2 （写确切的数值）
- % % 宽高 （写百分比的形式）
- cover 等比放大 铺满全部区域为止
- contain 等比放大 直到背景图像的右边或者下边停止
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
height: 100px;
width: 100px;
background-color: skyblue;
}
.div2{
height: 200px;
width: 200px;
border: 1px solid red;
/* 上面一行代码的含义是给div2设置一个宽度为1px、颜色为红色的实线 */
background-image: url(狗.jpg);
}
.div3{
height: 300px;
width: 300px;
border: 1px solid red;
background-image: url(狗.jpg);
background-repeat: no-repeat;
/* no-repeat 不平铺
repeate 默认x,y都平铺
repeat-x 横向平铺
repeat-y 纵向平铺 */
}
.div4{
height: 400px;
width: 400px;
border: 1px solid red;
background-image: url(狗.jpg);
background-repeat: no-repeat;
background-size: 350px,350px;
/* 上面一行是设置背景图片的大小 */
}
</style>
</head>
<body>
<div class="div1">这是给div1设置背景颜色</div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>
浏览器运行结果如下：
字体样式
font-size 属性设置文本的大小。
font-family 属性设置文本的字体类型。
font-style主要是用于指定斜体文字的字体样式属性。字体倾斜(font-style:italic)
color 字体颜色
font-weight 字体得的粗细 取值范围是（100-900） 数值越大加粗越明显，bold等同900效果
text-decoration: 设置字体划线
- none 取消文本下划线，一般用在取消超链接自带的下划线上。
- underline 下划线
- overline 上划线
- line-through 中划线
text-indent: 2em; 首行文本缩进2个中文字符
text-align 文本的水平对齐方式（center:居中；left:左对齐；right：右对齐）
line-height 文本的垂直对齐方式（当一行的行高等于父级的高度的时候 就会产生垂直居中的一个效果）
letter-spacing 设置字体间隙
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div2{
font-size:20px;
font-family:"宋体";
font-style:italic;
}
.div3{
font-size:25px;
font-family:"仿宋";
color:red;
}
.div4{
font-size:25px;
font-family:"仿宋";
color:red;
font-weight:bold;
}
.div5{
text-decoration: underline;
text-indent: 1em;
}
.div6{
text-decoration: overline;
text-indent: 2em;
}
.div7{
text-decoration: line-through;
text-indent: 3em;
}
</style>
</head>
<body>
<div class="div1">这是一段没有设置任何样式的div标签</div>
<div class="div2">font-size:20px;（文字大小）font-family:"宋体";（文字类型）font-style:italic;（文字倾斜）</div>
<div class="div3">font-size:25px;font-family:"仿宋";color:red;（文字颜色）</div>
<div class="div4">font-size:25px;font-family:"仿宋";color:red;（文字颜色）;font-weight:bold;（字体加粗）</div>
<div class="div5">这是设置了字体下划线，首行文本缩进1个中文字符的一段内容</div>
<div class="div6">这是设置了字体上划线，首行文本缩进2个中文字符的一段内容</div>
<div class="div7">这是设置了字体中划线，首行文本缩进3个中文字符的一段内容</div>
</body>
</html>
浏览器运行结果如下：
代码如下（示例）：
// 设置文本的水平垂直位置和文本的字体间隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
text-align: center;
}
.div2{
text-align: center;
letter-spacing:2px;
}
.div3{
text-align: center;
width: 200px;
height: 200px;
background-color: aqua;
/* 为了使水平垂直效果明显，我们给该div设置了宽度高度和背景颜色 */
line-height: 200px;
/* 当一行的行高等于父级的高度的时候 就会产生垂直居中的一个效果 */
}
</style>
</head>
<body>
<div class="div1">使用{text-align:center}让文本对齐</div>
<div class="div2">使用{text-align:center}让文本对齐,并且设置字体之间的间隙为2px</div>
<div class="div3">文字水平垂直居中</div>
</body>
</html>
浏览器运行结果如下：
CSS中的基础选择器
标签选择器
直接写上标签名
id选择器
1.在标签中设置一个通用属性 id 并且给好id名
2.在样式表中 通过 #id名{} 进行使用
*注意*：
1.id选择器是唯一的，但是这个唯一不是说一个id名只能出现一次，而是说一个标签里面只能有id名
2.要注意按照编程规范，id名在一个文件中有且只有一个（存在）
类选择器
又称class选择器
1.在标签中设置一个通用属性class 并且给好类名
2.在样式表中 通过 .class名{} 进行使用
*注意*
class选择器 可以有多个类名 不同类名可以写不同的样式
通配符选择器
可以改变所有标签的样式 用法： *{}
优先级
id选择器 > 类选择器 （class） > 标签 > 通配符选择器（*）
选择器的命名规范
1. 要做到见名知意,采用驼峰式命名，可以使用字母、数字、下划线（_）、短线（-）相结合命名
2. 不能以数字开头(class选择器必须以字母开头)
3. 不能用中文字符