关于css:CSS总结学习一

55次阅读

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

留神：

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

正文完
css
发表至： css
2021-04-28
 0
关于css:多个CSS-居中方案你可能还不知道
关于css:你是这样的-CSS19个唯美的边框我的项目又有亮点了
简析CSS盒模型Box-Model
关于前端:positionsticky-粘性定位的几种巧妙应用