共计 11518 个字符,预计需要花费 29 分钟才能阅读完成。
1. 引入 CSS 样式表
要书写 css 款式,那 css 款式书写的地位在哪呢?
1.1 行内式(内联款式)
-
概念:
称行内款式、行间款式.
是通过标签的 style 属性来设置元素的款式
- 其根本语法格局如下:
< 标签名 style="属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;"> 内容 </ 标签名 >
实际上任何 HTML 标签都领有 style 属性,用来设置行内式。
- 案例:
<div style="color: red; font-size: 12px;"> 青春不常在,放松谈恋爱 </div>
-
留神:
- style 其实就是标签的属性
- 款式属性和值两头是
:
- 多组属性值之间用
;
隔开。 - 只能管制以后的标签和以及嵌套在其中的字标签,造成代码冗余
-
毛病:
- 没有实现款式和构造相拆散
1.2 外部样式表(内嵌样式表)
-
概念:
称内嵌式
是将 CSS 代码集中写在 HTML 文档的 head 头部标签中,并且用 style 标签定义
- 其根本语法格局如下:
<head>
<style type="text/CSS">
选择器(抉择的标签){
属性 1: 属性值 1;
属性 2: 属性值 2;
属性 3: 属性值 3;
}
</style>
</head>
<style>
div {
color: red;
font-size: 12px;
}
</style>
-
留神:
- style 标签个别位于 head 标签中,当然实践上他能够放在 HTML 文档的任何中央。
- type=”text/css” 在 html5 中能够省略。
- 只能管制以后的页面
-
毛病:
没有彻底拆散
1.3 内部样式表(外链式)
-
概念:
称链入式
是将所有的款式放在一个或多个以 .CSS 为扩展名的内部样式表文件中,
通过 link 标签将内部样式表文件链接到 HTML 文档中
- 其根本语法格局如下:
<head>
<link rel="stylesheet" type="text/css" href="css 文件门路">
</head>
-
留神:
- link 是个单标签
- link 标签须要放在 head 头部标签中,并且指定 link 标签的三个属性
属性 | 作用 |
---|---|
rel | 定义以后文档与被链接文档之间的关系,在这里须要指定为“stylesheet”,示意被链接的文档是一个样式表文件。 |
type | 定义所链接文档的类型,在这里须要指定为“text/CSS”,示意链接的内部文件为 CSS 样式表。咱们都能够省略 |
href | 定义所链接内部样式表文件的 URL,能够是相对路径,也能够是绝对路径。 |
1.4 三种样式表总结(地位)
样式表 | 长处 | 毛病 | 应用状况 | 管制范畴 |
---|---|---|---|---|
行内样式表 | 书写不便,权重高 | 没有实现款式和构造相拆散 | 较少 | 管制一个标签(少) |
外部样式表 | 局部构造和款式相拆散 | 没有彻底拆散 | 较多 | 管制一个页面(中) |
内部样式表 | 齐全实现构造和款式相拆散 | 须要引入 | 最多,强烈推荐 | 管制整个站点(多) |
2. CSS 根底选择器
2.1 标签选择器
-
概念:
标签选择器(元素选择器)是指用 HTML 标签名 称作为选择器,按标签名称分类,为页面中某一类标签指定对立的 CSS 款式。
- 语法:
标签名{属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;}
-
作用:
标签选择器 能够把某一类标签 全副 抉择进去 比方所有的 div 标签 和 所有的 span 标签
-
长处:
是能疾速为页面中同类型的标签对立款式
-
毛病:
不能设计差异化款式。
2.2 类选择器
类选择器应用“.”(英文点号)进行标识,前面紧跟类名.
-
语法:
类名选择器
. 类名 { 属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3; }
- 标签
<p class='类名'></p>
-
长处:
- 能够为元素对象定义独自或雷同的款式。能够抉择一个或者多个标签
-
留神
- 类选择器应用“.”(英文点号)进行标识,前面紧跟类名(自定义,咱们本人命名的)
- 长名称或词组能够应用中横线来为选择器命名。
- 不要纯数字、中文等命名,尽量应用英文字母来示意。
命名是咱们艰深约定的,然而没有规定必须用这些罕用的命名。
2.3 类选择器非凡用法 - 多类名
咱们能够给标签指定多个类名,从而达到更多的抉择目标。
留神:
- 各个类名两头用空格隔开。
- 多类名选择器在前期布局比较复杂的状况下,还是较多应用的。
<div class="pink fontWeight font20"> 亚瑟 </div>
<div class="font20"> 刘备 </div>
<div class="font14 pink"> 安其拉 </div>
<div class="font14"> 貂蝉 </div>
2.4 id 选择器
id 选择器应用 #
进行标识,前面紧跟 id 名
-
其根本语法格局如下:
id 选择器#id 名 {属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;}
-
标签
<p id="id 名"></p>
- 元素的 id 值是惟一的,只能对应于文档中某一个具体的元素。
- 用法根本和类选择器雷同。
id 选择器和类选择器区别
- W3C 标准规定,在同一个页面内,不容许有雷同名字的 id 对象呈现,然而容许雷同名字的 class。
id 选择器和类选择器最大的不同在于 应用次数上。
总结
- 类选择器咱们在批改款式中,用的最多。
- id 选择器个别用于页面唯一性的元素身上,和 javascript 搭配应用。
2.5 通配符选择器
-
概念
通配符抉择器用
*
号示意,* 就是 抉择所有的标签 他是所有选择器中作用范畴最广的,能匹配页面中所有的元素。 - 其根本语法格局如下:
* {属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;}
例如上面的代码,应用通配符选择器定义 CSS 款式,革除所有 HTML 标记的默认边距。
* {
margin: 0; /* 定义外边距 */
padding: 0; /* 定义内边距 */
}
- 留神:会匹配页面所有的元素,升高页面响应速度,不倡议轻易应用
2.6 根底选择器总结
选择器 | 作用 | 毛病 | 应用状况 | 用法 |
---|---|---|---|---|
标签选择器 | 能够选出所有雷同的标签,比方 p | 不能差异化抉择 | 较多 | p {color:red;} |
类选择器 | 能够选出 1 个或者多个标签 | 能够依据需要抉择 | 十分多 | .nav {color: red;} |
id 选择器 | 一次只能选择器 1 个标签 | 只能应用一次 | 不举荐应用 | #nav {color: red;} |
通配符选择器 | 抉择所有的标签 | 抉择的太多,有局部不须要 | 不举荐应用 | * {color: red;} |
根底选择器咱们一共学了 4 个,每个都有本人的价值,可能再某个中央都能用到。然而如果说,肯定要找个最罕用的,那么,必定是类选择器。
2.7 团队约定
选择器
- 尽量少用通用选择器
*
- 尽量少用 ID 选择器
- 不应用无具体语义定义的标签选择器 div span
3.font 字体
3.1 font-size: 大小
-
作用:
font-size 属性用于设置字号
p {font-size:20px;}
-
单位:
- 能够应用绝对长度单位,也能够应用相对长度单位。
- 绝对长度单位比拟罕用,举荐应用像素单位 px,相对长度单位应用较少。
留神:
- 根本用 px 了,其余单位很少应用
- 谷歌浏览器默认的文字大小为 16px
- 然而不同浏览器可能默认显示的字号大小不统一,咱们尽量给一个明确值大小,不要默认大小。个别给 body 指定整个页面文字的大小
3.2 font-family: 字体
-
作用:
font-family 属性用于设置哪一种字体。
p{font-family:"微软雅黑";}
- 网页中罕用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑
- 能够同时指定多个字体,两头以逗号隔开,示意如果浏览器不反对第一个字体,则会尝试下一个,直到找到适合的字体,如果都没有,则以咱们电脑默认的字体为准。
p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}
罕用技巧:
1. 各种字体之间必须应用英文状态下的逗号隔开。2. 中文字体须要加英文状态下的引号,英文字体个别不须要加引号。当须要设置英文字体时,英文字体名必须位于中文字体名之前。3. 如果字体名中蕴含空格、#、$ 等符号,则该字体必须加英文状态下的单引号或双引号,例如 font-family: "Times New Roman";。4. 尽量应用零碎默认字体,保障在任何用户的浏览器中都能正确显示。
CSS Unicode 字体
-
为什么应用 Unicode 字体
- 在 CSS 中设置字体名称,间接写中文是能够的。然而在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的谬误。
- xp 零碎不反对 相似微软雅黑的中文。
-
解决:
- 计划一:你能够应用英文来代替。比方
font-family:"Microsoft Yahei"
。 -
计划二:在 CSS 间接应用 Unicode 编码来写字体名称能够防止这些谬误。应用 Unicode 写中文字体名称,浏览器是能够正确的解析的。
font-family: "\5FAE\8F6F\96C5\9ED1"; 示意设置字体为“微软雅黑”。
- 计划一:你能够应用英文来代替。比方
字体名称 | 英文名称 | Unicode 编码 |
---|---|---|
宋体 | SimSun | \5B8B\4F53 |
新宋体 | NSimSun | \65B0\5B8B\4F53 |
黑体 | SimHei | \9ED1\4F53 |
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
隶书 | LiSu | \96B6\4E66 |
幼园 | YouYuan | \5E7C\5706 |
华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
细明体 | MingLiU | \7EC6\660E\4F53 |
新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
为了关照不同电脑的字体装置问题,咱们尽量只应用宋体和微软雅黑中文字体
3.3 font-weight: 字体粗细
-
在 html 中如何将字体加粗咱们能够用标签来实现
- 应用 b 和 strong 标签是文本加粗。
- 能够应用 CSS 来实现,然而 CSS 是没有语义的。
属性值 | 形容 |
---|---|
normal | 默认值(不加粗的) |
bold | 定义粗体(加粗的) |
100~900 | 400 等同于 normal,而 700 等同于 bold 咱们重点记住这句话 |
提倡:
咱们平时更喜爱用数字来示意加粗和不加粗。
3.4 font-style: 字体格调
-
在 html 中如何将字体歪斜咱们能够用标签来实现
- 字体歪斜除了用 i 和 em 标签,
- 能够应用 CSS 来实现,然而 CSS 是没有语义的
font-style 属性用于定义字体格调,如设置斜体、歪斜或失常字体,其可用属性值如下:
属性 | 作用 |
---|---|
normal | 默认值,浏览器会显示规范的字体款式 font-style: normal; |
italic | 浏览器会显示斜体的字体款式。 |
小技巧:
平时咱们很少给文字加斜体,反而喜爱给斜体标签(em,i)改为一般模式。
3.5 font: 综合设置字体款式 (重点)
font 属性用于对字体款式进行综合设置
- 根本语法格局如下:
选择器 {font: font-style font-weight font-size/line-height font-family;}
-
留神:
- 应用 font 属性时,必须按下面语法格局中的程序书写,不能更换程序,各个属性以 空格 隔开。
- 其中不须要设置的属性能够省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用。
3.6 font 总结
属性 | 示意 | 留神点 |
---|---|---|
font-size | 字号 | 咱们通常用的单位是 px 像素,肯定要跟上单位 |
font-family | 字体 | 理论工作中依照团队约定来写字体 |
font-weight | 字体粗细 | 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 |
font-style | 字体款式 | 记住歪斜是 italic 不歪斜 是 normal 工作中咱们最罕用 normal |
font | 字体连写 | 1. 字体连写是有程序的 不能随便换地位 2. 其中字号 和 字体 必须同时呈现 |
4. CSS 外观属性
4.1 color: 文本色彩
-
作用:
color 属性用于定义文本的色彩,
- 其取值形式有如下 3 种:
示意示意 | 属性值 |
---|---|
预约义的色彩值 | red,green,blue,还有咱们的御用色 pink |
十六进制 | #FF0000,#FF6600,#29D794 |
RGB 代码 | rgb(255,0,0)或 rgb(100%,0%,0%) |
-
留神
咱们理论工作中,用 16 进制的写法是最多的,而且咱们更喜爱简写形式比方 #f00 代表红色
4.2 text-align: 文本程度对齐形式
-
作用:
text-align 属性用于设置文本内容的程度对齐,相当于 html 中的 align 对齐属性
- 其可用属性值如下:
属性 | 解释 |
---|---|
left | 左对齐(默认值) |
right | 右对齐 |
center | 居中对齐 |
-
留神:
是让盒子外面的内容程度居中,而不是让盒子居中对齐
4.3 line-height: 行间距
-
作用:
line-height 属性用于设置行间距,就是行与行之间的间隔,即字符的垂直间距,个别称为行高。
-
单位:
- line-height 罕用的属性值单位有三种,别离为像素 px,相对值 em 和百分比 %,理论工作中应用最多的是像素 px
- 技巧:
个别状况下,行距比字号大 7.8 像素左右就能够了。line-height: 24px;
4.4 text-indent: 首行缩进
-
作用:
text-indent 属性用于设置首行文本的缩进,
-
属性值
- 其属性值可为不同单位的数值、em 字符宽度的倍数、或绝对于浏览器窗口宽度的百分比 %,容许应用负值,
- 倡议应用 em 作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落,1em 就是一个汉字的宽度
p {
/* 行间距 */
line-height: 25px;
/* 首行缩进 2 个字 em 1 个 em 就是 1 个字的大小 */
text-indent: 2em;
}
4.5 text-decoration 文本的装璜
text-decoration 通常咱们用于给链接批改装璜成果
值 | 形容 |
---|---|
none | 默认。定义规范的文本。勾销下划线(最罕用) |
underline | 定义文本下的一条线。下划线 也是咱们链接自带的(罕用) |
overline | 定义文本上的一条线。(不必) |
line-through | 定义穿过文本下的一条线。(不罕用) |
4.6 CSS 外观属性总结
属性 | 示意 | 留神点 |
---|---|---|
color | 色彩 | 咱们通常用 十六进制 比方 而且是简写模式 #fff |
line-height | 行高 | 管制行与行之间的间隔 |
text-align | 程度对齐 | 能够设定文字水平的对齐形式 |
text-indent | 首行缩进 | 通常咱们用于段落首行缩进 2 个字的间隔 text-indent: 2em; |
text-decoration | 文本润饰 | 记住 增加 下划线 underline 勾销下划线 none |
5. CSS 复合选择器
指标
-
了解
- 了解 css 复合选择器别离的利用场景
-
利用
- 应用后辈选择器给元素增加款式
- 应用并集选择器给元素增加款式
- 应用伪类选择器
为什么要学习 css 复合选择器
CSS 选择器分为 根底选择器 和 复合选择器,然而根底选择器不能满足咱们理论开发中,疾速高效的抉择标签。
- 目标是为了能够抉择更精确更精密的指标元素标签。
- 复合选择器是由两个或多个根底选择器,通过不同的形式组合而成的
5.1 后辈选择器(重点)
-
概念:
后辈选择器又称为蕴含选择器
-
作用:
用来抉择元素或元素组的 子孙后代
- 其写法就是把外层标签写在后面,内层标签写在前面,两头用 空格 分隔,先写父亲爷爷,在写儿子孙子。
父级 子级{属性: 属性值; 属性: 属性值;}
- 语法:
.class h3{color:red;font-size:16px;}
- 当标签产生嵌套时,内层标签就成为外层标签的后辈。
- 子孙后代都能够这么抉择。或者说,它能抉择任何蕴含在内 的标签。
5.2 子元素选择器
-
作用:
子元素选择器只能抉择作为某元素 子元素 (亲儿子) 的元素。
- 其写法就是把父级标签写在后面,子级标签写在前面,两头跟一个
>
进行连贯 - 语法:
.class>h3{color:red;font-size:14px;}
5.3 交加选择器
-
条件
交加选择器由两个选择器形成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。
- 语法:
h3.class{color:red;font-size:16px;}
- 其中第一个为标签选择器,第二个为 class 选择器,两个选择器之间 不能有空格,如 h3.special。
记忆技巧:
交加选择器 是 并且的意思。即 … 又 … 的意思
比方:p.one 抉择的是:类名为 .one 的 段落标签。
用的相对来说比拟少,不太倡议应用。
5.4 并集选择器(重点)
-
利用:
- 如果某些选择器定义的雷同款式,就能够利用并集选择器,能够让代码更简洁。
- 并集选择器(CSS 选择器分组)是各个选择器通过
,
连贯而成的,通常用于个体申明。 - 语法:
.class,h3{color:red;font-size:16px;}
- 任何模式的选择器(包含标签选择器、class 类选择器 id 选择器等),都能够作为并集选择器的一部分。
-
记忆技巧:
并集选择器通常用于个体申明,逗号隔开的,所有选择器都会执行前面款式,逗号能够了解为 和的意思。
比方 .one, p , #test {color: #F00;}
示意 .one 和 p 和 #test 这三个选择器都会执行色彩为红色。通常用于个体申明。
5.5 链接伪类选择器(重点)
伪类选择器:
为了和咱们方才学的类选择器相区别
类选择器是一个点 比方 .demo {}
而咱们的伪类 用 2 个点 就是 冒号 比方 :link{}
作用:
用于向某些选择器增加非凡的成果。比方给链接增加特殊效果,比方能够抉择 第 1 个,第 n 个元素。
因为伪类选择器很多,比方链接伪类,构造伪类等等。咱们这里先给大家解说链接伪类选择器。
- a:link / 未拜访的链接 /
- a:visited / 已拜访的链接 /
- a:hover / 鼠标挪动到链接上 /
- a:active / 选定的链接 /
留神
- 写的时候,他们的程序尽量不要颠倒 依照 lvha 的程序。否则可能引起谬误。
-
记忆法
- love hate 爱上了厌恶
- lv 包包 十分 hao
- 因为叫链接伪类,所以都是 利用交加选择器 a:link a:hover
- 因为 a 链接浏览器具备默认款式,所以咱们理论工作中都须要给链接独自指定款式。
- 理论工作开发中,咱们很少写全四个状态,个别咱们写法如下:
a { /* a 是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标通过 */
color: red; /* 鼠标通过的时候,由原来的 灰色 变成了红色 */
}
5.6 复合选择器总结
选择器 | 作用 | 特色 | 应用状况 | 隔开符号及用法 |
---|---|---|---|---|
后辈选择器 | 用来抉择元素后辈 | 是抉择所有的子孙后代 | 较多 | 符号是 空格 .nav a |
子代选择器 | 抉择 最近一级元素 | 只选亲儿子 | 较少 | 符号是> .nav>p |
交加选择器 | 抉择两个标签交加的局部 | 既是 又是 | 较少 | 没有符号 p.one |
并集选择器 | 抉择某些雷同款式的选择器 | 能够用于个体申明 | 较多 | 符号是 逗号 .nav, .header |
链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 理论开发的写法 |
6. 标签显示模式(display)重点
指标:
-
了解
- 标签的三种显示模式
- 三种显示模式的特点以及区别
- 了解三种显示模式的互相转化
-
利用
- 实现三种显示模式的互相转化
6.1 什么是标签显示模式
-
什么是标签的显示模式?
标签以什么形式进行显示,比方 div 本人占一行,比方 span 一行能够放很多个
-
作用:
咱们网页的标签十分多,再不同中央会用到不同类型的标签,以便更好的实现咱们的网页。
-
标签的类型(分类)
HTML 标签个别分为块标签和行内标签两种类型,它们也称块元素和行内元素。
6.2 块级元素(block-level)
- 例:
常见的块元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 等,其中 <div> 标签是最典型的块元素。
- 块级元素的特点
(1)比拟王道,本人独占一行
(2)高度,宽度、外边距以及内边距都能够管制。
(3)宽度默认是容器(父级宽度)的 100%
(4)是一个容器及盒子,外面能够放行内或者块级元素。
-
留神:
- 只有 文字才 能组成段落 因而 p 外面不能放块级元素,特地是 p 不能放 div
- 同理还有这些标签 h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,外面不能放其余块级元素。
6.3 行内元素(inline-level)
- 例:
常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> 等,其中 <span> 标签最典型的行内元素。有的中央也成内联元素
- 行内元素的特点:
(1)相邻行内元素在一行上,一行能够显示多个。
(2)高、宽间接设置是有效的。
(3)默认宽度就是它自身内容的宽度。
(4)行内元素只能包容文本或则其余行内元素。
留神:
- 链接外面不能再放链接。
- 非凡状况 a 外面能够放块级元素,然而给 a 转换一下块级模式最平安。
6.4 行内块元素(inline-block)
- 例:
在行内元素中有几个非凡的标签——<img />、<input />、<td>,能够对它们设置宽高和对齐属性,有些材料可能会称它们为行内块元素。
-
行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上, 然而之间会有空白缝隙。一行能够显示多个
(2)默认宽度就是它自身内容的宽度。
(3)高度,行高、外边距以及内边距都能够管制。
6.5 三种模式总结区别
元素模式 | 元素排列 | 设置款式 | 默认宽度 | 蕴含 |
---|---|---|---|---|
块级元素 | 一行只能放一个块级元素 | 能够设置宽度高度 | 容器的 100% | 容器级能够蕴含任何标签 |
行内元素 | 一行能够放多个行内元素 | 不能够间接设置宽度高度 | 它自身内容的宽度 | 包容文本或则其余行内元素 |
行内块元素 | 一行放多个行内块元素 | 能够设置宽度和高度 | 它自身内容的宽度 |
6.6 标签显示模式转换 display
- 块转行内:display:inline;
- 行内转块:display:block;
- 块、行内元素转换为行内块:display: inline-block;
7. 行高那些事(line-height)
指标
-
了解
- 能说出 行高 和 高度 三种关系
- 能简略了解为什么行低等于高度单行文字会垂直居中
-
利用
- 应用行高实现单行文字垂直居中
- 能会测量行高
7.1 行高测量
行高的测量方法:
7.2 单行文本垂直居中
行高咱们利用最多的一个中央是:能够让单行文本在盒子中垂直居中对齐。
文字的行低等于盒子的高度。
行高 = 上间隔 + 内容高度 + 下间隔
上间隔和下间隔总是相等的,因而文字看上去是垂直居中的。
行高和高度的三种关系
- 如果 行高 等 高度 文字会 垂直居中
- 如果行高 大于 高度 文字会 偏下
- 如果行高小于高度 文字会 偏上
8. CSS 背景(background)
指标
-
了解
- 背景的作用
- css 背景图片和插入图片的区别
-
利用
- 通过 css 背景属性,给页面元素增加背景款式
- 能设置不同的背景图片地位
8.1 背景色彩(color)
-
语法:
background-color: 色彩值; 默认的值是 transparent 通明的
8.2 背景图片(image)
- 语法:
background-image : none | url (url)
参数 | 作用 |
---|---|
none | 无背景图(默认的) |
url | 应用相对或绝对地址指定背景图像 |
background-image : url(images/demo.png);
- 小技巧:咱们提倡 背景图片前面的地址,url 不要加引号。
8.3 背景平铺(repeat)
- 语法:
background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数 | 作用 |
---|---|
repeat | 背景图像在纵向和横向上平铺(默认的) |
no-repeat | 背景图像不平铺 |
repeat-x | 背景图像在横向上平铺 |
repeat-y | 背景图像在纵向平铺 |
8.4 背景地位(position) 重点
- 语法:
background-position : length || length
background-position : position || position
参数 | 值 |
---|---|
length | 百分数 / 由浮点数字和单位标识符组成的长度值 |
position | top / center / bottom / left / center / right 方位名词 |
-
留神:
- 必须先指定 background-image 属性
- position 前面是 x 坐标和 y 坐标。能够应用方位名词或者 准确单位。
- 如果指定两个值,两个值都是方位名字,则两个值前后程序无关,比方 left top 和 top left 成果统一
- 如果只指定了一个方位名词,另一个值默认居中对齐。
- 如果 position 前面是准确坐标,那么第一个,必定是 x 第二的肯定是 y
- 如果只指定一个数值, 那该数值肯定是 x 坐标,另一个默认垂直居中
- 如果指定的两个值是 准确单位和方位名字混合应用,则第一个值是 x 坐标,第二个值是 y 坐标
理论工作用的最多的,就是背景图片居中对齐了。
8.5 背景附着
- 背景附着就是解释背景是滚动的还是固定的
-
语法:
background-attachment : scroll | fixed
参数 | 作用 |
---|---|
scroll | 背景图像是随对象内容滚动 |
fixed | 背景图像固定 |
8.6 背景简写
- background:属性的值的书写程序官网并没有强制规范的。为了可读性,倡议大家如下写:
- background: 背景色彩 背景图片地址 背景平铺 背景滚动 背景地位;
- 语法:
background: transparent url(image.jpg) repeat-y scroll center top ;
8.7 背景通明(CSS3)
- 语法:
background: rgba(0, 0, 0, 0.3);
- 最初一个参数是 alpha 透明度 取值范畴 0~1 之间
- 咱们习惯把 0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
- 留神:背景半透明是指盒子背景半透明,盒子外面的内容不受影响
- 因为是 CSS3,所以 低于 ie9 的版本是不反对的。
8.8 背景总结
属性 | 作用 | 值 |
---|---|---|
background-color | 背景色彩 | 预约义的色彩值 / 十六进制 /RGB 代码 |
background-image | 背景图片 | url(图片门路) |
background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
background-position | 背景地位 | length/position 别离是 x 和 y 坐标,切记 如果有 准确数值单位,则必须依照先 X 后 Y 的写法 |
background-attachment | 背景固定还是滚动 | scroll/fixed |
背景简写 | 更简略 | 背景色彩 背景图片地址 背景平铺 背景滚动 背景地位; 他们没有程序 |
背景通明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 前面必须是 4 个值 |
9. CSS 三大个性
指标:
-
了解
- 能说出 css 款式抵触采取的准则
- 能说出那些常见的款式会有继承
-
利用
- 能写出 CSS 优先级的算法
- 能会计算常见选择器的叠加值
9.1 CSS 层叠性
-
概念:
所谓层叠性是指多种 CSS 款式的叠加。
是浏览器解决抵触的一个能力, 如果一个属性通过两个雷同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉
-
准则:
- 款式抵触,遵循的准则是 就近准则。 那个款式离着构造近,就执行那个款式。
- 款式不抵触,不会层叠
9.2 CSS 继承性
-
概念:
子标签会继承父标签的某些款式,如文本色彩和字号。
想要设置一个可继承的属性,只需将它利用于父元素即可。
-
留神:
- 失当地应用继承能够简化代码,升高 CSS 款式的复杂性。比方有很多子级孩子都须要某个款式,能够给父级指定一个,这些孩子继承过去就好了。
- 子元素能够继承父元素的款式(text-,font-,line- 这些元素结尾的能够继承,以及 color 属性)
9.3 CSS 优先级(重点)
-
概念:
定义 CSS 款式时,经常出现两个或更多规定利用在同一元素上,此时,
- 选择器雷同,则执行层叠性
- 选择器不同,就会呈现优先级的问题。
1). 权重计算公式
对于 CSS 权重,咱们须要一套计算公式来去计算,这个就是 CSS Specificity(特殊性)
标签选择器 | 计算权重公式 |
---|---|
继承或者 * | 0,0,0,0 |
每个元素(标签选择器) | 0,0,0,1 |
每个类,伪类 | 0,0,1,0 |
每个 ID | 0,1,0,0 |
每个行内款式 style=”” | 1,0,0,0 |
每个!important 重要的 | ∞ 无穷大 |
- 值从左到右,右面的最大,一级大于一级,数位之间没有进制,级别之间不可超过。
- 对于 CSS 权重,咱们须要一套计算公式来去计算,这个就是 CSS Specificity(特殊性)
2). 权重叠加
咱们常常用交加选择器,后辈选择器等,是有多个根底选择器组合而成,那么此时,就会呈现权重叠加。
就是一个简略的加法计算
- div ul li ——> 0,0,0,3
- .nav ul li ——> 0,0,1,2
- a:hover —–—> 0,0,1,1
- .nav a ——> 0,0,1,1
留神:
- 数位之间没有进制 比如说:0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0,所以不会存在 10 个 div 能赶上一个类选择器的状况。
3). 继承的权重是 0
这个不难,然而疏忽很容易绕晕。其实,咱们批改款式,肯定要看该标签有没有被选中。
1)如果选中了,那么以下面的公式来计权重。谁大听谁的。
2)如果没有选中,那么权重是 0,因为继承的权重为 0。
10. CSS 正文
CSS 正文规定:
/* 须要正文的内容 */ 进行正文的,即在须要正文的内容前应用 "/*" 标记开始正文,在内容的结尾应用 "*/" 完结。
例如:
p {
/* 所有的字体是 14 像素大小 */
font-size: 14px;
}