微控圈（MCU Loop） - CSS
type: channel
link: https://www.mculoop.com/tag/CSS/
items: CSS 学习笔记

CSS 学习笔记
type: item
date: 2018-12-04T16:00:00+00:00
description: 什么是 CSS CSS 是 Cascading Style Sheets（层叠样式表）的缩写，用于定义如何显示 HTML 中的元素。 如何理解“层叠” 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中： 浏览器缺省设置 外部样式表 引用外部样式表文件： 内部样式表 样式直接定义在 HTML 文档头部： 内联样式 在元素标签内使用 style 属性定义样式： This is a paragraph 按从上到下的顺序，优先级逐渐提升。 CSS 语法 CSS 的基本语法为：selector {property: value;} 在一条定义中，可以有多个选择器，选择器间用逗号隔开（选择器的分组）；也可以有多条“属性-值”对，使用分号隔开。 h1,h2,h3,h4,h5,h6 { color: green; font-family: Times, "Times New Roman", serif; } CSS 选择器 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。 这个段落是红色。 这个段落是绿色。 派生选择器 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。例如下面的样式定义了 id="sidebar" 元素下的 p 元素的样式（注意使用了空格作为分隔符）： #sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } 类选择器 类选择器以一个点号定义，类（class）与 id 的区别是，id 一般在 HTML 中的定义是唯一的。 This heading will be center-aligned This paragraph will also be center-aligned. 选择器列表 CSS 选择器用于选择要使用样式的网页元素。 选择器 实例 实例描述 .class .intro 选择 class="intro" 的所有元素 .class1.class2 .name1.name2 选择 class 属性中同时有 name1 和 name2 的所有元素 .class1 .class2 .name1 .name2 选择作为类名 name1 元素后代的所有类名 name2 元素 #id #firstname 选择 id="firstname" 的元素 * * 选择所有元素 element p 选择所有 元素 element.class p.intro 选择 class="intro" 的所有 元素 element,element div, p 选择所有 元素和所有 元素 element element div p 选择 元素内的所有 元素 element>element div > p 选择父元素是 的所有 元素 element+element div + p 选择紧跟 元素的首个 元素 element1~element2 p ~ ul 选择前面有 元素的每个 元素 [attribute] [target] 选择带有 target 属性的所有元素 [attribute=value] [target=_blank] 选择带有 target="_blank" 属性的所有元素 [attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素 [attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素 [attribute^=value] a[href^="https"] 选择其 src 属性值以 "https" 开头的每个 元素 [attribute$=value] a[href$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 元素 [attribute*=value] a[href*="w3schools"] 选择其 href 属性值中包含 "w3schools" 子串的每个 元素 :active a:active 选择活动链接 ::after p::after 在每个 的内容之后插入内容 ::before p::before 在每个 的内容之前插入内容 :checked input:checked 选择每个被选中的 元素 :default input:default 选择默认的 元素 :disabled input:disabled 选择每个被禁用的 元素 :empty p:empty 选…