1.什么是css
是一组样式设置的规则，用于控制页面的外观样式
2.为什么使用css
实现内容与样式的分离，便于团队开发
样式复用，便于网站的后期维护
页面的精确控制，让页面更精美
3.css作用
页面外观美化
布局和定位
4.css应用方式
也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式
内部样式
在title标签下面建一个style标签 写css代码
优点：在同一个页面内部便于复用和维护。
缺点：在多个页面之间的可重用性不高。
行内样式
也称为嵌入样式，使用HTML标签的style属性定义
只对设置style属性的标签起作用
<body>
<div style="在这里写代码"></div>
</body>
</html>
优点：方便、直观 缺点：缺乏可重用性
.外部样式
使用单独的.css文件定义，然后在页面中使用link标签引入
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在这里引入外部文件 首先同级目录要有 .css 文件 结尾的样式文件 -->
<link rel="stylesheet" href="这里通过快捷键 ./ 快速引入css样式文件">
</head>
优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。
缺点：css代码由于分离到单独的css文件中，容易出现css代码过于集中，若维护不当则容易造成混乱
----5.选择器
css选择器是用来选择标签的，选出来以后给标签加样式
1标签选择器
也称为元素选择器，使用HTML标签作为选择器的名称
根据标签来选择标签，以标签开头，这种选择器影响范围大，一般用来做一些通用的设置
<style>
/* 开头是标签的名字 后面是英文的大括号 {这里面添加属性} */
div {
color: red;
}
</style>
</head>
<body>
<!-- 这里创建标签 -->
<div>div标签</div>
</body>
</html>
2类选择器
使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器
<style>
/* . 加上class类的名字 后面是英文的大括号 {这里面添加属性} */
.name{
color: red;
}
.name1{
color: black;
}
.name2{
color: blue;
}
</style>
</head>
<body>
<!-- 这里创建类标签 -->
<div class="name">我是div标签</div>
<div class="name1">我是div标签</div>
<div class="name2">我是div标签</div>
</body>
3.层级选择器(后代选择器)
<style>
/* 层级选择器，要有层级关系，根据层级关系获取子标签，给子标签添加样式 */
/* 从div里找到子类div 中间有空格 后面是英文的大括号 {这里面添加属性} */
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><p>大家好，我叫灰太狼</p></div>
</div>
<div>同学们好</div>
</body>
4.id选择器
根据id选择标签，以#开头，元素的id名称不能重复，所有id选择器只能对应于页面上一个元素，不能复
用，所以不推荐使用id作为选择器
<style>
/* # 后面跟上id的名字 后面是英文的大括号 {这里面添加属性} */
#myid {
color: pink;
}
</style>
</head>
<body>
<div id="myid">我是一个div</div>
<!-- 注意点：虽然给其他标签设置id="box"也可以设置样式，
但是不推荐这样做，因为id是唯一的，以后js通过id
只能获取一个唯一的标签对象。 -->
<div id="myid">我是一个新的div</div>
</body>
5组选择器
根据组合的选择器选择不同的标签，以,分割，如果有公共的样式设置，可以使用组选择器
<style>
/* 组选择器 多个选择器的组合，一般把相同的样式放到组选择器中 */
/* 将box1和box2和box3都设置为宽200px和高200px */
/* . 开头 加上类名字 中间用 , 隔开 */
.box1,.box2,.box3 {
width: 200px;
height: 200px;
}
/* 后面的不会覆盖 会在前面的基础上增加样式 */
.box1 {
background-color: red;
}
.box2 {
background-color: pink;
}
.box3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
6--css属性
1.字体属性 文本属性 颜色
属性 作用
font-size 字体大小
font-weight 字体粗细
font-family 设置字体
文本属性
属性 含义 说明
text-align 设置文字水平对齐方式 取值：left、center、right
text-decoration 设置文字的下划线 underline
颜色
属性 含义 说明
color 文本颜色 red、yellow
background-color 背景颜色 red、yellow
<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;
}
</style>
</head>
<body>
<div id="name">我是div标签</div>
</body>
4.CSS元素溢出
什么是CSS的元素溢出？
当子元素（标签）的尺寸超过父元素（标签）的尺寸时，此时需要设置父元素显示溢出的子元素的方
式，设置的方式是通过overflow属性来完成的。
属性 含义 说明
overflow 元素溢出 visible默认值，显示子标签溢出部分
hidden隐藏子标签溢出部分 auto如果子标签溢出，则可以滚动查看其余的内容
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
/* hidden 元素溢出 隐藏溢出的部分 */
overflow: hidden;
/* visible 显示溢出的部分 */
overflow: visible;
/* 滚动查看溢出来的部分 */
overflow: auto;
}
.box2 {
width: 200px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">我是儿子我是儿子我是儿子</div>
</div>
</body>
5.盒子模型
什么是盒子
网页其实就是一个一个盒子构成
属性 含义 单位
width 宽度 px
height 高度 px
border 设置边框 px
padding 内边距 px
margin 外边距 px
border-radius 设置边框四个角 px
<style>
/* *是通配符 将网页自带的边距都设置成为0 */
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
/*第一个值是边框的 粗细 样式 颜色*/
border: 1px solid red;
/*上下左右都是10的边距*/
/*上下10px左右40px*/
/*上右下左*/
padding: 10px 20px 30px 40px;
margin: 40px;
/*设置边框圆角*/
/*如果你想让正方形变成圆形 50%*/
border-radius: 10px;
}
</style>
</head>
<div>我叫做div</div>
<body>
