Day20_9 前端入门之CSS样式
目录
一、CSS样式的概述
二、CSS样式的使用
CSS的引入方式
HTML的基础选择器
字体与文本样式
复合选择器
背景样式
显示模式
一、CSS样式的概述
解析：
1.CSS的定义为：层叠样式表（Cascading style sheets）
2.CSS的主要作用：给页面中的HTML标签设置样式
3.样式通常存储在样式表中
4.外部样式表可以极大提高工作效率
5.外部样式表通常存储在 CSS 文件中
6.多个样式定义可层叠为一个
二、CSS样式的使用
-
CSS的引入方式
引入方式如下表：
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
|---|---|---|---|
| 内嵌式 | CSS写在style标签中 | 当前页面 | 小案例 |
| 外联式 | CSS写在单独的CSS文件中，通过link标签引入 | 多个页面 | 项目中 |
| 行内式 | CSS写在标签的style属性中 | 当前标签 | 配合js使用 |
使用演示如下代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<!-- 3.外部（外链）样式 -->
<link rel="stylesheet" href="css/index.css">
<!-- 2.内嵌式 -->
<style>
h2 {
color: bisque;
font-size: 50px;
}
</style>
</head>
<body>
<!--
1.行内样式-----写在标签的style属性中
2.内部（内嵌）样式
3.外部（外链）样式
css样式属性：
（1）文本样式属性
1)color 字体颜色
值的表示
方式1----- 16进制--#f00----推荐使用;
方式2----- 颜色的英文单词--red;
方式3----- rgb三原色--rgb(255,0,0);
-->
<!-- 1.行内样式 -->
<h1 style="color:#f00 ;font-size: 50px;">标题1</h1>
<h1 style="color:red ;font-size: 50px;">标题2</h1>
<h1 style="color:rgb(255, 0, 0) ;font-size: 50px;">标题3</h1>
<!-- 2.内嵌式 -->
<h2>标题4</h2>
<!-- 3.外部（外链）样式 -->
<h3>标题5</h3>
</body>
</html>
<!-- 3.外部（外链）样式 css文件代码 -->
/* h3 {
font-weight: normal;
color: #f00;
font-family: "宋体";
} */
-
HTML的基础选择器
1.标签选择器：
解析：
结构：标签名{ CSS属性名：属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
特别注意：
1. 标签选择器选择的是一类标签，而不是单独某一个
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
使用演示如下图：
2.类选择器
解析：
1.结构：.类名 { css属性名：属性值； }
2. 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
3. 特别注意：
3.1、所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
3.2、类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3.3、 一个标签可以同时有多个类名，类名之间以空格隔开
3.4、 类名可以重复，一个类选择器可以同时选中多个标签
使用演示如下图：
3.id选择器
解析：
1.结构：#id属性值 { css属性名：属性值； }
2. 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
3.特别注意：
1. 所有标签上都有id属性
2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选中一个标签
使用演示如下图：
4.通配符选择器
解析：
1. 结构：* { css属性名：属性值； }
2. 作用：找到页面中所有的标签，设置样式
3. 特别注意：
1. 开发中使用极少，只会在极特殊情况下才会用到
2. 在基础的小页面中可能会用于去除标签默认的margin和padding（后续讲解）
使用演示如下图：
-
字体与文本样式
1.字体样式：
作用如下：
（1）设置字体大小：font-size
（2）设置字体粗细：font-weight
（3）设置字体样式：font-style
（4）设置字体类型：font-family
2.文本样式：
作用如下：
（1）设置文本缩进：text-indent
（2）设置文本水平对齐方式：text-align
（3）设置文本修饰：text-decoration
3. line-height行高
应用于：
（1）让单行文本垂直居中可以设置 line-height : 文字父元素高度
（2）网页精准布局时，会设置 line-height : 1 可以取消上下间距
行高如下图所示：
4.文本颜色
作用：
（1）文字颜色：color
（2）背景颜色：background-color
颜色属性值表示如下图所示:
-
复合选择器
1.后代选择器：空格
1. 作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素
2. 选择器语法：选择器1 选择器2 { css }
3. 结果： 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
4.特别注意：
1. 后代包括：儿子、孙子、重孙子……
2. 后代选择器中，选择器与选择器之前通过 空格 隔开
2.子代选择器: >
1. 作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素
2. 选择器语法：选择器1 > 选择器2 { css }
3. 结果： 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
4. 注意点：
4.1、子代只包括：儿子
4.2、子代选择器中，选择器与选择器之前通过 > 隔开
3.并集选择器：，
1.作用：同时选择多组标签，设置相同的样式
2.选择器语法：选择器1 ， 选择器2 { css }
3.结果： 找到 选择器1 和 选择器2 选中的标签，设置样式
4. 特别注意：
4.1、 并集选择器中的每组选择器之间通过 , 分隔
4.2、 并集选择器中的每组选择器可以是基础选择器或者复合选择器
4.3、 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
4.hover伪类选择器
1.作用：选中鼠标悬停在元素上的状态，设置样式
2.选择器语法：选择器:hover { css }
3.特别注意： 1. 伪类选择器选中的元素的某种状态
5.小结表
6.选择使用代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<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>
/* 后代选择器 */
/* ul li {
border: 1px solid #f00;
} */
/* 子代选择器 ---直接子元素 */
/* .list>li {
border: 1px solid #f00;
} */
/* 并集选择器----对使用当前css样式的所有选择器有效 */
/* .list>li,
p {
border: 1px solid rgb(26, 223, 112);
} */
/* :hover伪类选择器 */
/* .list li:hover {
background-color: cornflowerblue;
font-size: 40px;
color: #fff;
} */
/* ol li:first-child {
background-color: #f00;
}
ol li:last-child {
background-color: aquamarine;
}
ol li:nth-child(3) {
background-color: #00f;
} */
/* ol li:nth-child(2n) {
background-color: rgb(14, 125, 66);
}
ol li:nth-child(2n+1) {
background-color: rgb(218, 12, 30);
} */
ol li:nth-child(even) {
background-color: rgb(14, 125, 66);
}
ol li:nth-child(odd) {
background-color: rgb(218, 12, 30);
}
/* ol li {
background-color: rgb(15, 186, 49);
} */
/* ol li:nth-child(n+3) {
background-color: rgb(218, 12, 30);
} */
/* ol li:nth-child(-n+3) {
background-color: rgb(218, 12, 30);
} */
/* 练习1：隔行背景变色---奇数行为红色，偶数行为绿色 */
/* 练习2：前3个的背景颜色行为红色，其他行为绿色 */
</style>
</head>
<body>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ol>
<ul class="list">
<li>列表1
<!-- <ul>
<li>ABC</li>
</ul> -->
</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
<p>段落</p>
</body>
</html>7.结构伪类选择器
解析：
1.作用与优势： 作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
2.使用场景：常用于查找某父级选择器中的子元素
选择器表如下：
n的使用注意点：1. n为：0、1、2、3、4、5、6、…… 2. 通过n可以组成常见公式
常用n公式如下表所示：
-
背景样式
1.背景颜色：
1.属性名：background-color
2. 属性值：颜色取值：关键字、rgb表示法、rgba表示法、十六进制……
3.特别注意：
3.1、背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
3.2、背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
2.背景图片：
1.属性名：background-image
2. 属性值：background-imgge:url（图片地址）
3.特别注意：
3.1、背景图片中url中可以省略引号
3.2、背景图片默认是在水平和垂直方向平铺的
3.3、背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
3.背景平铺（就是将背景铺满整个页面）
1.属性名：background-repeat（bgr）
2.属性值如下图如：
4.背景位置
1.属性名：background-position
2. 属性值：background-position：水平方向位置 垂直方向位置 （具体如下图）
3.特别注意：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
5.背景相关属性连写
1.属性名：background
2.属性值：单个属性值的合写，取值之间以空格隔开
3.书写顺序：推荐：background：color image repeat position
4.省略问题：可以按照需求省略
5.特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()
6.特别注意点：如果需要设置单独的样式和连写
6.1、要么把单独的样式写在连写的下面 6.2、要么把单独的样式写在连写的里面
-
显示模式
1.块级元素：
1.属性：display：block
2.显示特点：
2.1、独占一行（一行只能显示一个）
2.2、 宽度默认是父元素的宽度，高度默认由内容撑开
2.3、可以设置宽高
3.代表标签： div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
2.行内元素
1.属性：display：inline
2. 显示特点：
2.1、一行可以显示多个
2.2.、宽度和高度默认由内容撑开
2.3、不可以设置宽高
3.代表标签： a、span 、b、u、i、s、strong、ins、em、del……
3.行内块元素
1.属性：display：inline-block
2.显示特点：
2.1、一行可以显示多个
2.2、可以设置宽高
3.代表标签： input、textarea、button、select……
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
4.元素显示模式转换
1.目的：改变元素默认的显示特点，让元素符合布局要求
2. 语法使用如下图：
