1.什么是css
是一组样式设置的规则，用于控制页面的外观样式
2.为什么使用css
1. 实现内容与样式的分离，便于团队开发
2. 样式复用，便于网站的后期维护
3. 页面的精确控制，让页面更精美
3.css作用
1. 页面外观美化
2. 布局和定位
4.css应用方式
也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式
4.1.内部样式
在title标签下面建一个style标签 写css代码
优点：在同一个页面内部便于复用和维护。
缺点：在多个页面之间的可重用性不高。
4.2.行内样式
也称为嵌入样式，使用HTML标签的style属性定义
只对设置style属性的标签起作用
优点：方便、直观
缺点：缺乏可重用性
4.3.外部样式
使用单独的.css文件定义，然后在页面中使用link标签引入
优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。
缺点：css代码由于分离到单独的css文件中，容易出现css代码过于集中，若维护不当则容易造成混乱
5.选择器
css选择器是用来选择标签的，选出来以后给标签加样式
5.1.标签选择器
也称为元素选择器，使用HTML标签作为选择器的名称
根据标签来选择标签，
以标签开头
，这种选择器影响范围大，一般用来做一些通用的设置
<head>
<!-- 网页采用utf-8的编码格式 -->
<meta
charset
=
"UTF-8"
>
<meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<!-- 网页标题 -->
<title>
Document
</title>
<style>
/* 直接写css代码 */
</style>
</head>
<div
style
=
"在这里写css代码"
></div>
<head>
<!-- 网页采用utf-8的编码格式 -->
<meta
charset
=
"UTF-8"
>
<meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<!-- 网页标题 -->
<title>
Document
</title>
<!-- 引入css文件 -->
<link
rel
=
"stylesheet"
href
=
"index.css"
>
</head>
5.2.类选择器
使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器
5.3.层级选择器(后代选择器)
<style>
div
{
color
:
red
;
}
</style>
<body>
<div>
我是div标签
</div>
</body>
<style>
.name
{
color
:
red
;
}
.sex
{
color
:
orangered
;
}
</style>
<body>
<div
class
=
"name"
>
我是div标签
</div>
<div
class
=
"name"
>
我是div标签
</div>
<div
class
=
"sex"
>
我是div标签
</div>
</body>
<!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>
/* 层级选择器，要有层级关系，根据层级关系获取子标签，给子标签添加样式 */
div div
{
color
:
red
;
}
div
.box1
{
color
:
aqua
;
}
/* div div p{
color: brown;
} */
div p
{
color
:
brown
;
}
</style>
</head>
<body>
<div>
<div>
哈哈哈
</div>
<div
class
=
"box1"
>
嘿嘿嘿
</div>
<div>
5.4.id选择器
根据id选择标签，
以#开头
，元素的id名称不能重复，所有id选择器只能对应于页面上一个元素，不能复
用，所以不推荐使用id作为选择器。
5.5.组选择器
根据组合的选择器选择不同的标签，
以,分割
，如果有公共的样式设置，可以使用组选择器
<!-- 层级选择器不一定必须是父子关系，祖孙关系的子标签也可以找到 有后代关系都适用于这个层级选择
器 -->
<p>
大家好，我叫灰太狼
</p>
</div>
</div>
<div>
同学们好
</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>
#myid
{
color
:
pink
;
}
</style>
</head>
<body>
<div
id
=
"myid"
>
我是一个div
</div>
<!-- 注意点：虽然给其他标签设置id="box"也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id
只能获取一个唯一的标签对象。 -->
<div
id
=
"myid"
>
我是一个新的div
</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>
/* 组选择器 多个选择器的组合，一般把相同的样式放到组选择器中 */
/* 将box1和box2和box3都设置为宽200px和高200px */
.box1
,
.box2
,
.box3
{
width
:
200px
;
height
:
200px
;
}
/* 后面的不会覆盖 会在前面的基础上增加样式 */
.box1
{
background-color
:
red
;
}
属性
作用
font-size
字体大小
font-weight
字体粗细
font-family
设置字体
6.css属性
6.1.字体属性
.box2
{
background-color
:
pink
;
}
.box3
{
background-color
:
blue
;
}
</style>
</head>
<body>
<div
class
=
"box1"
></div>
<div
class
=
"box2"
></div>
<div
class
=
"box3"
></div>
</body>
</html>
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<!-- 网页采用utf-8的编码格式 -->
<meta
charset
=
"UTF-8"
>
<meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<!-- 网页标题 -->
<title>
Document
</title>
<!-- 以内部样式为例 -->
<style>
#name
{
/* font-size 设置字体大小 */
font-size
:
20px
;
/* font-size 设置字体粗细 */
font-weight
:
400
;
/* 设置字体 */
font-family
:
'仿宋'
;
/* 设置文字水平对齐方式 */
text-align
:
center
;
/* 设置文字的下划线 */
text-decoration
:
underline
;
/* 文本颜色 */
color
:
blue
;
/* 背景颜色 */
background-color
:
pink
;
属性
含义
说明
text-align
设置文字水平对齐方式
取值：left、center、right
text-decoration
设置文字的下划线
underline
属性
含义
说明
color 文本颜色
background-color 背景颜色
属性
含义
说明
overflow 元素溢出
visible默认值，显示子标签溢出部分
hidden隐藏子标签溢出部分
auto如果子标签溢出，则可以滚动查看其余的内容
6.2.文本属性
6.3.颜色
6.4.CSS元素溢出
什么是CSS的元素溢出？
当子元素（标签）的尺寸超过父元素（标签）的尺寸时，此时需要设置父元素显示溢出的子元素的方
式，设置的方式是通过overflow属性来完成的。
}
</style>
</head>
<!-- body包裹的称为内容区域 -->
<body>
<div
id
=
"name"
>
我是div标签
</div>
</body>
</html>
div {
color: #f7f2f2;
background-color: red;
}
<!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>
.box1
{
width
:
100px
;
height
:
100px
;
background-color
:
red
;
6.5.盒子模型
什么是盒子
网页其实就是一个一个盒子构成
overflow
:
auto
;
}
.box2
{
width
:
200px
; 宽度200
height
:
50px
; 高度50
background-color
:
green
;
}
</style>
</head>
<body>
<div
class
=
"box1"
>
<div
class
=
"box2"
>
xxxxxxxxxxxx输入自己想要的内容
</div>
</div>
</body>
</html>
属性
含义
单位
width 宽度
height 高度
border 设置边框
padding 内边距
margin 外边距
border-radius 设置边框四个角
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
