web编程之第一章HTML基础
web编程之第三章CSS盒子模型
第二章 CSS基础
2.1「CSS概述」
CSS：（Cascading Style Sheet）层叠样式表
-
CSS代码风格
-
空格规范
- 属性值前面、冒号后面，保留一个空格
- 选择器（标签）和大括号中间保留空格
-
CSS标签一般书写位置
-
<head> <style> .../*样式代码写在这个位置*/ </style> </head>
-
-
-
语法格式
-
selector { property: value }- selector：选择器
- property：希望改变的该标签的属性
- value：该属性的属性值
-
2.2「CSS基础选择器」
- CSS选择器的作用
- 选择器（选择符）就是根据不同需求把不同标签选出来，这样就是选择器的作用。简单来说，就是选择标签用的。
2.2.1「标签选择器」
-
作用：是指用HTML标签名称作为选择器，按标签名称分类，为页面某一类标签指定统一的CSS样式
-
示例：
<!--标签选择器 改变所有某一类标签的样式--> <style> /* 标签（元素）选择器：写上标签名 */ p { color: green; } </style> <!--用标签选择器会改变所有P标签的样式--> <p>P标签</p> <p>P标签</p> ```
2.2.2「类选择器」
- 作用：如果想要差异化选择不同标签，单独选择一个或者某几个标签，可以使用类选择器。
-
语法：
-
为了将类选择器与元素关联，必须为class属性指定适当的值。
-
两步走：
- ⨁ CSS中定义类名和样式 \bigoplus{\textcolor{red}{\textbf{CSS中定义类名和样式}}} {} ⨁CSS中定义类名和样式
.类名 { 属性1: 属性值1; ... }- ⨁ HTML中关联调用 \bigoplus{\textcolor{red}{\textbf{HTML中关联调用}}} {} ⨁HTML中关联调用
<div class="类名"> ... </div>-
**注：**可以包含多个类名
-
<div class="类名1 类名2"> ... </div>
-
-
-
示例：
-
<style> /*类选择器口诀：样式点定义 结构类(class)调用 一个或多个 开发最常用*/ /*定义类名和样式*/ .red { color: red; } </style> <!-- 问题描述：只想改变第一个<li>标签里的颜色，其余<li>标签不改变，怎么办呢？ 答：用 类选择器 实现 --> <ul> <!--关联第一个<li>标签和类选择器--> <li class="red">我要变成红色</li> <li>我不变色</li> <li>我不变色</li> </ul>
-
2.2.3「ID选择器」
-
**作用：**可以为特定id的HTML元素（标签）指定特定的样式
-
语法：
-
HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义
-
两步走：
1.CSS中定义类名和样式
#id名 { 属性1: 属性值1; ... } 2.HTML中关联调用
<div id="id名"> ... </div>- **注：**元素的id值是唯一的，只能对应于文档中某个一个具体的元素。
- **口诀：**样式#定义，结构id调用，只能调用一次。
-
-
示例：
-
<style> #pink { color: pink; } </style> <div id="pink"> 我是id选择器，元素的id值是唯一的，只能对应于文档中某个一个具体的元素 </div>
-
2.2.4「通配符选择器」
-
作用：在CSS中，通配符选择器是所有选择器中作用范围最广的，能匹配页面中所有的元素。
-
语法：
-
通配符选择器使用“*”定义，*就是选择所有的标签。
1.CSS中定义类名和样式
{ 属性1: 属性值1; ... }2.HTML中无需调用即可生效。
-
2.3「CSS常用属性」
2.3.1「字体属性」
Font（字体）属性用于定义字体系列、大小、粗细和文字样式。
-
字体：font-family 属性
-
通常给
<body>标签设置字体（因为页面主要内容在<body>标签中）。 -
font-family 属性可以同时声明多种字体，字体之间用逗号分隔。
- 设置多个字体，会先看第一个字体你电脑是否安装，依次类推，若有此字体，则优先使用该字体。
-
示例：
-
<style> /*字体可以写中文 但是提倡写英文*/ h2 { font-family: '黑体'; } p { /*font-family: '微软雅黑';*/ font-family: "Microsoft YaHei"; } </style> <h2>黑体</h2> <p>微软雅黑</p>
-
-
-
字体大小：font-size 属性
-
该属性的值可以使用很多种长度单位。
-
相对长度
-
1）长度单位 px（最常用的单位）
- 注1：谷歌浏览器默认字体大小是16px
- 注2：标题标签
<h1>~<h6>比较特殊，需要单独指定大小
-
2）长度单位 em 和 ex
- 1 em表示的长度是其父级元素中字母m的标准宽度。
- 1 ex表示的长度是其父级元素中字母x的标准宽度。
-
-
绝对长度
单位 含义 in inch，英寸 cm centimeter，厘米 mm millimeter，毫米 pt point，印刷的点数 pc pica，1pc=12pt
-
-
示例：
-
<style> /* 1.px(像素)大小是网页最常用的单位 2.谷歌浏览器默认的文字大小为16px 3.不同浏览器可能默认显示的字号不一致，我们尽量给出一个明确值，不要默认 4.可以给body指定整个页面文字的大小，再根据特殊情况再做修改 */ body { font-size: 16px; } /*标题标签比较特殊，需要单独指定文字大小*/ h2 { font-size: 16px; } </style> <h2>设置字体大小</h2> <p>设置字体大小</p>
-
-
-
字体粗细：font-weigh 属性
-
属性值 含义 normal 默认值 正常的字体 相当于number为400 bold 粗体 相当于number为700 bolder 特粗 相当于 <strong>和<b>对象的作用lighter 细体 <number>用数字表示文本字体粗细 取值范围：100的整数倍~900
-
-
文字样式：font-style 属性
-
设置文本的风格
-
属性值 含义 normal 默认值 指定文本字体样式为正常的字体 italic 选择斜体，指定文本字体样式为斜体。对于没有斜体变量的特殊字体，将应用oblique oblique 选择倾斜体，指定文本字体样式为倾斜体。 如果当前字体没有可用的倾斜体版本，会选用斜体（italic ）替代
-
-
字体复合属性
-
字体属性可以把以上文字样式综合来写，达到节约代码量的作用。
-
格式：
-
body { font-style font-weight font-size/line-height font-family; }- 注1：不能更改顺序
- 注2：必须保留 font-size 和 font-family，否则font属性将不起作用，其他不需要的可省略
-
-
2.3.2「文本属性」
Text（文本）属性可定义文本的外观，如颜色、对齐文本、文本缩进、行间距（行高）等。
-
文本颜色：color 属性
-
用于定义文本的颜色，其取值方式有以下3中，实际工作中，用16进制的写法是最多的。
-
表示方式 属性值 预定义的颜色值 red、green、blue 十六进制 #FF0000、#FF6600、#29D794 RGB表示 rgb(255,0,0) 或 rgb(100%,0%,0%) -
示例：
-
<style> .color1 { /* 预定义的颜色 red,green,blue等*/ color: red; } /* 十六进制表示*/ .color2 { color: #ff0000; } /* RGB表示法*/ .color3 { color: rgb(255,0,0); } </style>
-
-
-
对齐文本：text-align 属性
-
设置文本内容的水平对齐方式
-
属性值 含义 left 默认值 左对齐 center 居中对齐 right 右对齐
-
-
装饰文本：text-decoration 属性
-
给文本添加下划线、删除线、上划线等。
-
属性值 含义 none 默认值 无装饰 underline 下划线 overline 上划线 line-through 删除线 -
注：链接标签
<a>自带下划线 所以我们以后可以让链接<a>不带下划线
-
-
文本缩进：text-indent 属性
- 用于指定文本第一行的缩进，通常是将段首的首行缩进。
- em是相对单位，就是当前元素（font-size）1个文字的大小。
- 在中文网页，将该属性设置为“2em”即可达到段首缩进的效果。
-
行间距：line-height 属性
- 又称：行高
- 单位：像素（px）
2.3.3「CSS引入方式」
CSS引入方式分三类：行内样式表、内部样式表、外部样式表（链接表）。
-
行内样式表：是在元素标签内部的style属性中设定CSS样式。适用于修改简单样式
-
结构如下： 原来：<div>粉红的回忆</div> 加CSS后：<div style="color=red; font-size=16px;">粉红的回忆</div> ----·style其实就是标签的属性 ----·在双引号中间，写法要符合CSS规范 ----·可以控制当前的标签设置样式 ----·由于书写繁琐并结构和样式没有分离，所以不推荐使用
-
-
内部样式表：是写到HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个
<style>标签中-
结构如下： <style> div{ color: red; font-size: 16px; } </style> ----·<style>标签理论上可以放到HTML文档的任何地方，但一般放到文档的<head>标签中 ----·通过此种方式，可以方便控制当前整个页面中的元素样式设置 ----·代码结构非常清晰，并没有实现结构和样式完全分离
-
-
外部样式表：实际开发中使用都是外部样式表。适合于样式比较多的情况。
-
核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
-
引入外部样式表分两步：
-
（1）新建一个后缀为.css的样式文件，把所有CSS代码都放入此文件中(.css文件中不需要写<style>标签 直接写样式) （2）在HTML页面中，使用<link>标签引入这个文件 语法规范：<link rel="stylesheet" href="css文件路径" /> rel:定义当前文档与被链接文档之间的关系，这里需要被指定为"stylesheet"，表示被链接的文档是一个样式表文件 ----·<link>一般放到文档的<head>标签中
-
-
2.3.4「Chrome调试工具」
-
启动快捷键：按F12
-
Ctrl+滚轮可以放大开发者工具代码大小
-
左边是HTML元素结构，右边是CSS样式
-
右边CSS样式可以改动数值（左右或者输入）和查看颜色
-
Ctrl+0复原浏览器大小
-
若点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
-
若有样式，但是样式前有黄色叹号提示，则表示样式属性书写错误
2.4「Emmet语法」
Emmet语法的前身是 Zen coding，它使用缩写来提高HTML/CSS的编写速度，Vscode内部已经集成该语法
- 快速生成HTML结构语法
-
生成标签 直接输入标签名按
tab键即可 -
想要生成多个相同的标签 加上
*就可以 比如 div*3 就可以快速生成3个div -
若有父子关系的标签 可以用
>比如 ul>li 就可以 -
若有兄弟关系的标签，用
+就可以 比如 div+p -
若有生成带有类名或者id名字的div，直接写 .demo 或者 #two
tab键就可以- 如 输入 .demo 按
tab生成<div class="demo"></div>如想给p标签生成 则加约束 如 输入 p.demo 按tab生成<p class="demo"></p>
- 如 输入 .demo 按
-
若生成的div类名是有顺序的，可以使用自增符号
$[从1开始排序]- 如 输入 .demo$*5 输出
<div class="demo1"></div>...<div class="demo5"></div>
- 如 输入 .demo$*5 输出
-
若想要生成的标签内部写内容用{}表示
- 拓展： 输入 div{连续输出5个一样的}*5 输出
<div>连续输出5个一样的</div>...<div>连续输出5个一样的</div>
- 拓展： 输入 div{连续输出5个一样的}*5 输出
- 快速生成CSS样式语法
- CSS基本采取简写形式即可
- 如 w200 按
tab生成 width:200px; - 如 lh26 按
tab生成 line-height:26px;
- 如 w200 按
- 快速格式化代码
- WebStorm自动格式化代码快捷键：
Ctrl+Alt+L
- WebStorm自动格式化代码快捷键：
2.5「CSS复合选择器」
-
复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。
-
复合选择器可以更加准确、更高效的选择目标元素（标签）
-
复合选择器是由两个或者多个基础选择器，通过不同的方式组合而成的
-
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
2.5.1 「后代选择器」（重要）
-
使用场景：后代选择器又称为包含选择器搜索引擎，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签卸载后面，中间用空格分隔。当标签发生嵌套式，内层标签就成为外出标签的后代。
-
语法：元素1 元素2 {样式声明}
- 上述语法表示选择元素1里面的所有元素2（后代元素）
-
注意：
-
元素1和元素2中间一定要用空格隔开
-
元素1是父级，元素2是子级，最终选择的是元素2
-
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
-
<style> /*我想把ol里面的小li选出来改为红色*/ /*这种情况使用 后代选择器 极为方便*/ ol li { color: red; } ol li a { color: pink; } ol li div { color: green; } </style> <ol> <li>我是ol的孩子1</li> <li>我是ol的孩子2</li> <li><a href="#">我是ol的孙子1</a></li> <li><div>我是ol的孙子2</div></li> </ol>
-
-
元素1和元素2可以是任意基础选择器
-
<style> /*给其中一个ul 设置类名 就可以区分 两个 ul了 然后 根据类名 继续使用 后代选择器 */ .nav li a { color: yellow; } </style> <ul> <li>我是ul的孩子1</li> <li><a href="#">我是ol的孙子1</a></li> </ul> <ul class="nav"> <li>我是ul的孩子1</li> <li><a href="#">我是ol的孙子1</a></li> <li><a href="#">我是ol的孙子1</a></li> <li><a href="#">我是ol的孙子1</a></li> </ul>
-
-
2.5.2 「子选择器」（重要）
-
使用场景：子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
-
语法：元素1>元素2 {样式声明}
-
上述语法表示选择元素1里面的所有直接后代（子元素）元素2
-
<style> /*只想选儿子不想选孙子等 此时可以使用 子元素选择器*/ .nav>a { color: red; } /* 或者写成 div>p>a */ .nav>p>a { color: green; } </style> <div class="nav"> <!--字变红--> <a href="#">我是儿子</a> <p> <!--字变绿--> <a href="#">我是孙子</a> </p> </div> -
元素1和元素2中间用大于号隔开
-
元素1是父级，元素2是子级，最终选择元素是元素2
-
元素2必须是亲儿子，其孙子、重孙之类的都不归它管。
-
2.5.3 「并集选择器」（重要）
-
使用场景：并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
-
并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
-
语法：元素1，元素2 {样式声明}
-
上述语法表示选择元素1和元素2。
-
<style> /*🐻大和🐻二 小🐖一家 都变成红色*/ /*约定的语法规范，我们并集选择器喜欢竖着写*/ div, p, ul li { /*任何形式的选择器都可以作为并集选择器的一部分*/ color: red; } </style> <div>🐻大</div> <p>🐻二</p> <ul> <li>小🐖佩奇</li> <li>🐖爸爸</li> <li>🐖妈妈</li> </ul> -
元素1和元素2中间用逗号分隔
-
逗号可以理解为和的意思
-
并集选择器通常用于集体声明
-
约定的语法规范，我们并集选择器喜欢竖着写
-
2.5.4 「伪类选择器」
-
使用场景：伪选择器用于某些选择器添加特殊效果，比如给链接添加特殊效果，或者选择第1，第n个元素。
-
伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover、:first-child。
-
因为伪类选择器很多，比如有链接伪类、结构伪类等。
2.5.4.1 「链接伪类选择器」
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已经被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/
-
链接伪类的使用
-
a:link 选择所有未被访问的链接
-
<!--1.通过 a:link 选出 未被访问的链接 将其颜色改为黑色 去掉下划线--> <style> /*未访问过的链接 a:link*/ a:link { color: #333333; text-decoration: none; } </style> <a href="#">小猪佩奇</a>
-
-
a:visited 选择所有已经被访问的链接
-
<!--2.通过 a:visited 选出 已经被访问的链接 将其颜色改为橙色--> <style> /*未访问过的链接 a:link*/ a:link { color: #333333; text-decoration: none; } /*已经被访问的链接 a:visited */ a:visited { color: orange; } </style> <a href="#">小猪佩奇</a>
-
-
a:hover 选择鼠标指针位于其上的链接 （同上 略）
-
a:active 选择活动链接（鼠标按下未弹起的链接）（同上 略）
-
-
链接伪类选择器注意事项
- 为了确保生效，请按照LVHA的顺序声明 :link 、:visited、:hover、:active.
<a>链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
-
链接伪类选择器实际开发中的写法
-
/* a是标签选择器 所有的链接 单独指定样式 */ a { color: #333333; text-decoration: none; } /* :hover 是链接伪类选择器 鼠标经过 */ a:hover { color: red; /* 鼠标经过的时候，由原来的 灰色 变成 红色 */ }
-
2.5.4.2 「:focus伪类选择器」
-
:focus 伪类选择器用用选取获得焦点的表单元素
- 焦点就是光标，一般情况
<input>类表单元素才能获取，因此这个选择器业主要针对于表单元素来说。
- 焦点就是光标，一般情况
-
语法
-
input:focus { background-color: yellow; }
-
-
示例
-
<style> /*把获得光标的input表单元素选择出来*/ input:focus { color: red; background-color: pink; } </style> <form> <!--哪个input元素 获得光标 那个元素的背景变为粉色--> <input type="text" /> <input type="text" /> <input type="text" /> </form>
-
2.5.4.3 「复合选择器总结」
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
| 子选择器 | 选择最近一级元素（亲儿子） | 直选亲儿子 | 较少 | 符号是大于 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号 .nav,div,p |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住 a{}和a:hover 实际开发的写法 |
| :focus伪类选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus 记住这个写法 |
2.6「CSS的元素显示模式」
了解元素显示模式可以更好的让我们布局
-
什么是元素显示模式
- 作用：网页标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页
- 元素显示模式就是元素（标签）以什么方式进行显示，比如
<div>自己独占一行，比如一行可以放多个<span>。 - HTML元素一般分为块元素和行内元素两种类型。
- （可以理解为：你想在一行放好多个元素，则使用行内元素；你想独占一行则使用块元素。）
-
块元素
-
常见的块元素有
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素 -
块元素的特点：
- 比较霸道，自己独占一行。
- 高度、宽度、外边距以及内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%。
- 是一个容器及盒子，里面可以放行内或者块级元素。
-
注意：
-
文字类的元素内不能使用块级元素
-
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>-
书写的代码：
-
在调试器中：
-
-
同理，
<h1>~<h6>等都是文字类标签，里面不能放其他块级元素
-
-
-
行内元素
-
常见的行内元素有
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内标签。有的地方也将行内元素成为内联元素 -
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 可以理解为：内部元素（或文字）的宽度是多少，它的宽度就是多少。
- 行内元素只能容纳文本或其他行内元素。
-
注意：
- 链接里面不能再放链接
- 特殊情况链接
<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
-
-
行内块元素
- 在行内元素中有几个特殊的标签，——
<img>、<input>、<td>，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素。 - 行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一个可以显示多个（行内元素特点）。
- 默认宽度就是它们本身内容的宽度（行内元素特点）。
- 宽度、行高、外边距以及行边距都可以控制（块级元素特点）。
- 在行内元素中有几个特殊的标签，——
-
元素显示模式总结
-
元素模式 **元素排列 ** 设置样式 默认宽度 包含 块级元素 一行只能放一个块级元素 可以设置宽度和高度 父级容器的100% 容器里可以包含任何标签 行内元素 一行可以放多个行内元素 不可以设置宽度和高度 它本身内容的宽度 容纳文本或其他行内元素 行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度
-
-
显示模式的转换
-
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一个模式的特性时。
-
比如想要增加链接
<a>的触发(点击)范围。-
转换成块级元素： display: block;
-
<style> a { width: 300px; height: 50px; background-color: orange; /*把行内元素<a> 转换为 块级元素 */ display: block; } </style> <a href="#">转换显示模式</a> <a href="#">a标签转换成了块级元素 自己独占一行，并且可以设置宽度和高度</a>
-
-
转换成行内元素： display: inline;
-
<style> div { width: 300px; height: 100px; background-color: pink; display: inline; } </style> <div>转换成行内元素</div> <div>div标签转换成了行内元素 一行可以放多个,并且不能设置宽度和高度</div>
-
-
转换成行内块元素： display: inline-block;
-
<style> div { width: 100px; height: 50px; background-color: skyblue; display: inline-block; } </style> <!--span原本属于 行内元素--> <span>转换成行内块元素</span> <div>span同时拥有了 行内元素 和块级元素 的特点 并且可以设置宽度和高度</div>
-
-
-
-
一个小工具的使用 snipaste
- snipaste 是一个简单强大的截图工具，也可以让你的贴图贴回到屏幕上。
- 常用快捷键：
- F1 可以截图，同时测量大小，设置箭头 书写文字等
- F3 在桌面顶置显示 (QQ截图也有固定功能)
- 点击图片，Alt可以取色 （按Shift可以切换取色模式）
- 按下 Esc 取消图片显示
-
一个小技巧 单行文字垂直居中 的代码
-
CSS没有提供给我们提供垂直居中的代码，这里我们可以使用一个小技巧来实现。
-
解决方案：让文字的行高(行间距)等于盒子的高度 就可以让文字在盒子内垂直居中。
-
未垂直居中前：
-
垂直居中后：
-
/*实现代码*/ <style> /*让文字行高等于盒子的高度*/ div { height: 40px; /*盒子的高度*/ line-height: 40px; /*文字的行间距（行高）*/ } </style>
-
-
原理
-
行高的组成部分：
-
-
-
由于上空隙和下空隙是透明的，所以我们看到的文字是垂直居中的（如上图所示）
-
若行高小于盒子的高度，文字会偏上；若行高大于文字的高度，则文字偏下。
-
-
2.7「CSS的背景」
通过CSS背景属性，给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
2.7.1「背景颜色」
-
background-color 属性定义了元素的背景颜色
-
语法格式：
background-color: color|transparent; /* color:设置背景颜色（可采用英文单词、十六进制数值、RGB等） transparent（默认值）:表示背景颜色为透明 */-
一般情况下元素背景颜色默认值是transparent（透明）
-
示例：
-
<style> div { width: 200px; height: 200px; background-color: red; } </style> <div> 我的背景色是红色 </div>
-
-
2.7.2「背景图片」
-
background-image 属性描述了元素的背景图片。实际开发中常见的logo或者一些装饰的小图片或者是超级大的背景图片，优点是非常便于控制位置。
-
语法格式：
background-image: none|url(URL);-
参数
参数值 含义 none 默认值，无背景图像。 url(URL) 使用绝对或相对地址指定背景图像。
-
2.7.3「背景平铺」
-
如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat 属性
-
语法格式：
background-repeat：repeat | no-repeat | repeat-x | repeat-y;-
参数：
参数值 含义 repeat 默认值。背景图像将在垂直方向和水平方向重复。 no-repeat 背景图像将仅显示一次。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 round 背景图像自动缩放直到适应且填充满整个容器。（CSS3） space 背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3） inherit 从父元素继承background-repeat属性值 -
示例：
<style> div { width: 300px; height: 300px; background-image: url(image/PE.jpg); background-repeat: no-repeat; } </style> <div></div>
-
2.7.4「背景图片位置」
-
利用background-position 属性可以改变图片在背景中的位置
-
语法格式
background-position: x y;-
参数代表的意思是：x坐标和y坐标。可以利用方位名词或者精确单位
-
参数值 含义 length 百分数|有浮点数和单位标识符组成的长度值 单位为（cm,mm,px等） position top（上）|center|bottom（下）|left|center|right 方位名词
-
-
参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关。
- 如果只指定一个方位名词，另一个值省略，则第二个值默认居中对齐。
-
参数是精确单位
- 如果参数值是精确坐标，则第一个必为x坐标，第二个必为y坐标
- 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
-
参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值为x坐标,第二个值为y坐标
2.7.5「背景图像固定」
-
background-attachment 属性设置背景图像是否固定或者随页面的其余部分滚动
-
background-attachment 属性后期可以制作视差滚动的效果
-
语法格式
background-attachment: scroll|fixed;参数值 含义 scroll 当页面滚动时，背景图片跟页面一起滚动，默认值 fixed 将背景图片固定在页面的可见区域
2.7.6「背景属性复合写法」
-
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中，从而节约代码量。
-
语法格式
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;这是实际开发中我们更提倡的写法，顺序没有强制性要求。
2.7.7「背景色半透明」
-
CSS3为我们提供了背景颜色半透明的效果。
-
语法格式
background: rgba(0,0,0,0.3); /* 参数： 1.前三个对应RGB（红绿蓝） 2.最后一个参数是alpha透明度，取值范围在0~1之间 */- 我们习惯把0.3的0省略掉，写为background: rgba(0,0,0,.3);
- 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
2.7.8「CSS背景总结」
| 属性 | 作用 | 属性值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值、十六进制、GRB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat、no-repeat、repeat-x、repeat-y等 |
| background-position | 背景位置 | length、position 分别是x坐标和y坐标 |
| background-attachment | 背景附着 | scroll（背景滚动）、fixed（背景附着） |
| 背景简写 | 书写更简单 | background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 |
| 背景色半透明 | 背景颜色半透明 | background: rgba(0,0,0,0.3); |
- 背景图片：实际开发中常见与logo或者一些装饰的小图片或者是超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）
2.8「CSS的三大特性」
CSS有三大非常重要的特性：层叠性、继承性、优先级。
2.8.1「层叠性」
-
相同的选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题。
-
层叠性原则：
-
样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
-
样式不冲突，不会层叠。
-
示例：
div { color: red; font-size: 18px; } div { color: pink; } <div> 哪个样式离结构近，就执行哪个样式,所以我是粉色。但是下面的样式不会把上面样式全部覆盖，因为字体大小并没有冲突。 </div>
-
2.8.2「继承性」
-
字标签会继承父标签的某种样式，如文字颜色和字号。
-
示例
div { color: red; font-size: 14px; } <div> <p>我是字标签，我会继承父标签<div>的某些样式，我的颜色是红色，字体大小是14px。</p> </div>- 我们可以在调试工具中看到继承关系：
- 我们可以在调试工具中看到继承关系：
- 作用：恰当地使用继承性可以简化代码，降低CSS样式的复杂性。
- 子元素可以继承父元素的样式包括：(text-，font-，line-，这些元素开头的可以继承，以及color属性)
-
行高的继承性
-
body { font: 12px/1.5 Microsoft YaHei; }- 行高可以跟单位也可以不跟单位，不跟单位代表当前元素文字大小的1.5倍
- 如果子元素没有设置行高，则会继承父元素行高为1.5
- 此时子元素的行高是：当前子元素文字大小的1.5倍
- body行高1.5 这样的写法最大的优点是里面的子元素可以根据自己的文字大小自动调整行高
-
2.8.3「优先级」
-
当同一个玄素指定多个选择器，就会有优先级的产生。
-
选择器相同，则执行层叠性
-
选择器不同，则根据选择器权重执行
-
选择器的权重表（从上到下权重依次增大）
选择器 选择器权重 继承 或者 *(通配符选择器) 0,0,0,0 元素(标签)选择器 0,0,0,1 类选择器，伪类选择器 0,0,1,0 ID选择器 0,1,0,0 行内样式 style=“” 1,0,0,0 !important ∞ 无穷大 -
<style> div { color: red !important; font-size: 14px; } .test { color: pink; font-size: 14px; } #demo { color: green; } </style> <div class="test" id="demo" style="color: #ff6700" > 1.优先级依次递增 2.注意：!important 优先级最高，所以执行结果文字颜色为红色！ </div>
-
-
-
-
优先级注意点：
-
权重是由4组数字组成，但是不会有进位
-
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
-
等级判断从左向右，如果某一位数值相同，则判断下一位数值
-
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
#father { /*父元素权重无穷大*/ color: red !important; } p { /*p继承的权重为0，固p自己的权重大于继承的权重，所以p标签文字的颜色为pink色*/ color: pink; } <div id="father"> <p>我自己的权重大于继承的权重，固我是pink色</p> </div>
-
-
权重叠加
-
如果是复合选择器，则会有权重叠加，需要计算权重。
<style> /* 1.执行结果li里面文字是green色，因为复合选择器会有权重叠加 2. li的权重：0,0,0,1 3.ul li的权重：0,0,0,1+0,0,0,1 =0,0,0,2 【重点：权重只会叠加，不会进位】 4.所以ul li的权重大于li的权重 */ ul li { color: green; } li { color: red; } </style>- 重点：权重只会叠加，永远不会进位。
- a:hover的权重是 0,0,1,1 【a是标签选择器0,0,0,1 :hover伪类选择器0,0,1,0】
- 重点：权重只会叠加，永远不会进位。
-
1044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
