ife2018 零基础学院 day 4

时间 2019-11-24

标签 ife2018 ife 零基础学院 day 繁體版

原文原文链接

第四天，背景边框列表连接和更复杂的选择器

背景，边框，列表，连接相关属性

背景

元素的背景是指，在元素内容、内边距和边界下层的区域。html

属性	描述
background-color	为背景设置一个纯色。
background-image	把图像设置为背景。线性渐变是经过linear-gradient()函数传入的，它是一个background-image属性的值。
background-position	指定背景应该出如今元素背景中的位置。
background-repeat	指定背景是否应该被重复(平铺)。
background-attachment	当内容滚动时，指定元素背景的行为
background	在一行中指定以上五个属性的缩写。简写属性，做用是将背景属性设置在一个声明中。
background-size	容许动态调整背景图像的大小。

边框

W3School 边框
 MDN 边框编程

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每一个边框有 3 个方面：宽度（border-width）、样式（border-style），以及颜色（border-color）。浏览器

列表

W3SChool 列表
 MDN 列表函数

列表有三种：无序列表、有序列表、描述列表ssr

能够在 <ul> 或 <ol> 元素上设置的三个属性：代理

list-style-type ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。
list-style-position ：设置在每一个项目开始以前，项目符号是出如今列表项内，仍是出如今其外。
list-style-image ：容许您为项目符号使用自定义图片，而不是简单的方形或圆形。

连接

W3School 连接
 MDN 连接指针

连接存在时处于不一样的状态，每个状态均可以用对应的伪类来应用样式:code

a:link - 普通的、未被访问的连接

a:visited - 用户已访问的连接

a:hover - 鼠标指针位于连接的上方

a:active - 连接被点击的时刻

a:focus - 连接被选中。一个连接当它被选中的时候 (好比经过键盘的 Tab 移动到这个连接的时候，或者使用编程的方法来选中这个连接 HTMLElement.focus()) 它可使用 :focus 伪类来应用样式。

CSS 各类选择器的概念，使用方法及使用场景

MDN 选择器
 W3C 选择器htm

简单选择器（Simple selectors）

经过元素类型、class 或 id 匹配一个或多个元素。

类型选择器（又名元素选择器）

在 W3C 标准中，元素选择器又称为类型选择器（type selector）。
此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。这是选择全部指定类型的最简单方式。

针对某个HTML元素设置样式

html {color:black;} 
h1 {color:blue;}

类选择器

类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。由你本身选择一个名字。一样值得一提的是，文档中的多个元素能够具备相同的类名，而单个元素能够有多个类名(以空格分开多个类名的形式书写)。

.类型名A{}，对类型名为A的元素设置样式，一个HTML文档中能够匹配多个元素

ID选择器

ID选择器由哈希/磅符号 (#)组成，后面是给定元素的ID名称。任何元素均可以使用id属性设置惟一的ID名称。由你本身选择的ID是什么。这是选择单个元素的最有效的方式。

#ID名A{}，对ID名为A的元素设置样式，一个HTML文档中只能匹配一个元素

属性选择器（Attribute selectors）

经过属性 / 属性值匹配一个或多个元素。

CSS 2 引入了属性选择器。

[attr]：该选择器选择包含 attr 属性的全部元素，不论 attr 的值为什么。

[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的全部元素。

[attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的全部元素，好比位于被空格分隔的多个类（class）中的一个类。

把包含标题（title）的全部元素变为红色，能够写做：

*[title] {color:red;}

伪类（Pseudo-classes）

伪类和伪元素
概念：

匹配处于肯定状态的一个或多个元素，好比被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。

使用方法：

一个 CSS 伪类（pseudo-class）是一个以冒号(:)做为前缀的关键字，当你但愿样式在特定状态下才被呈现到指定的元素时，你能够往元素的选择器后面加上对应的伪类（pseudo-class）。

伪元素（Pseudo-elements）

概念：

匹配处于相关的肯定位置的一个或多个元素，例如每一个段落的第一个字，或者某个元素以前生成的内容。

使用方法：

伪元素（Pseudo-element）跟伪类很像，但它们又有不一样的地方。它们都是关键字 —— 但此次伪元素前缀是两个冒号 (::) —— 一样是添加到选择器后面达到指定某个元素的某个部分。

组合器（Combinators）

这里不只仅是选择器自己，还有以有效的方式组合两个或更多的选择器用于很是特定的选择的方法。例如，你能够只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。

Combinators	Select
A B	匹配任意元素，知足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
A > B	匹配任意元素，知足条件：B是A的直接子节点
A + B	匹配任意元素，知足条件：B是A的下一个兄弟节点（AB有相同的父结点，而且B紧跟在A的后面）
A ~ B	匹配任意元素，知足条件：B是A以后的兄弟节点中的任意一个（AB有相同的父节点，B在A以后，但不必定是紧挨着A）

多用选择器（Multiple selectors）

这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面，以将一组声明应用于由这些选择器选择的全部元素。

Combinators	Select
A,B	匹配知足A（和/或）B的任意元素

CSS 选择器的优先级

选择器的优先级

CSS 是 Cascading Style Sheets 的缩写，这暗示层叠（cascade）的概念是很重要的。在最基本的层面上，它代表CSS规则的顺序很重要，但它比那更复杂。什么选择器在层叠中胜出取决于三个因素（这些都是按重量级顺序排列的——前面的的一种会否决后一种）：

重要性（Importance）

在CSS中，有一个特别的语法可让一条规则老是优先于其余规则：!important。

相互冲突的声明将按如下顺序适用，后一种将覆盖先前的声明：

在用户代理样式表的声明 (例如：浏览器在没有其余声明的默认样式).
用户样式表中的普通声明（由用户设置的自定义样式）。
做者样式表中的普通声明（这是咱们设置的样式，Web开发人员）。
做者样式表中的重要声明
用户样式表中的重要声明

专用性（Specificity）
一个选择器具备的专用性的量是用四种不一样的值（或组件）来衡量的，它们能够被认为是千位，百位，十位和个位——在四个列中的四个简单数字：
千位：若是声明是在style 属性中该列加1分（这样的声明没有选择器，因此它们的专用性老是1000。）不然为0。
百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。

源代码次序（Source order）

若是多个相互竞争的选择器具备相同的重要性和专用性，那么第三个因素将帮助决定哪个规则获胜——后面的规则将打败先前的规则。