CSS

一、什么是 CSS

是一组样式设置的规则，用于控制页面的外观样式

二、为什么使用 CSS

实现内容与样式的分离，便于团队开发
样式复用，便于网站的后期维护
页面的精确控制，让页面更精美

三、CSS 作用

页面外观美化
布局和定位

四、CSS 应用方式

也称为 CSS 引用方式，有三种方式：内部样式、行内样式、外部样式

1. 内部样式

在 title 标签下面建一个 style 标签写 css 代码

<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>
/* 直接写css代码 */
</style>
</head>

2. 行内样式

也称为嵌入样式，使用 HTML 标签的 style 属性定义
只对设置 style 属性的标签起作用

<div style="在这里写css代码"></div>

3. 外部样式

使用单独的 .CSS 文件定义，然后在页面中使用 link 标签引入

<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>

行内样式大于内部样式大于外部样式
离标签越近优先级越高

五、选择器

1. 标签选择器

也称为元素选择器，使用 HTML 标签作为选择器的名称

<!-- 以内部样式为例 -->
<style>
div {

}
</style>
<body>
<div>我是div标签</div>
</body>

2. 类选择器

使用自定义的名称，以.号作为前缀，然后再通过 HTML 标签的 class 属性调用类选择器

<!-- 以内部样式为例 -->
<style>
.name{

}
</style>
<body>
<div class="name">我是div标签</div>
<div class="name">我是div标签</div>
<div class="name">我是div标签</div>
</body>

3. id选择器

使用自定义名称，以# 作为前缀，然后通过 HTML 标签的 id 属性进行名称匹配

<!-- 以内部样式为例 -->
<style>
#name{

}
</style>
<body>
<div id="name">我是div标签</div>
</body>

六、css属性

1. 字体属性

属性	作用
font-size	字体大小
font-weight	字体粗细
font-family	设置字体

代码示例:

<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: '仿宋';
}
</style>
</head>
<!-- body包裹的称为内容区域 -->
<body>
<div id="name">我是div标签</div>
</body>

2. 文本属性

只能控制文字

属性	含义	说明
line-height	行高	行之间的高度
text-align	水平对齐	取值：left、center、right

3. 颜色

属性	含义	说明
color	文本颜色	red 红色、yellow 黄色
background-color	背景颜色	red 红色、yellow 黄色

div{
color: #f7f2f2;
background-color: red;
}

4. 盒子模型

什么是盒子
网页其实就是一个一个盒子构成

属性	含义	单位
width	宽度	px
height	高度	px
border	设置边框	px
padding	内边距	px
margin	外边距	px
border-radius	设置边框四个角	px 如果设置为50%当前盒子会变成⚪

div{
height: 100px;
width: 100px;
border: 1px solid #000;
padding: 10px;
margin: 10px;
border-radius: 10px;
}

5. 盒子上下左右

上：top
下:bottom
左：left
右：right

6. 清除自带的网页内外边距

*{
padding: 0px;
margin: 0px;
}

七、案例