MDC-css教程——基础知识

笔记类文章

完全摘录自

• MDN-css

什么是css

Cascading Style Sheets

css 并非仅仅用于浏览器，也不仅仅局限于视觉展现。按照 CSS 的正式术语来讲，将文档呈现给用户的程序称为用户代理(UA)。浏览器只是用户代理的其中之一

CSS帮助您将文档信息的内容 和如何展现它的细节相分离：

• 避免重复
• 更容易维护
• 为不同的目的，使用不同的样式而内容相同

css如何工作

文档内容与相应样式结合，处理过程分为两个阶段：
1.将标记语言与css转化为DOM
2.将DOM展示出来

html标记，是一个元素，也可以是一个容器，其单标签要以/结尾

DOM是一种树形结构。 每个元素和非空文本都可以看做是树形结构上的一个结点。DOM结点不再是容器，但是，它可以作为子结点的父类结点而存在。

层叠与继承

层叠来源：

• 浏览器对HTML定义的默认样式
• 用户定义的样式
• 开发者定义的样式，又可以分三种：
  • 定义在外部文件（外链样式）
  • 定义在页面head标签内部的style标签（内联样式）
  • 定义在特定元素身上（行内样式）

关系：开发者 > 用户 > 浏览器

用户定义样式：用户通过浏览器引入样式表，或者自己设置一些样式

继承来源：
父级标签

关系：
自身的样式 > 继承父标签

！important

强制最高优先级

用户自定义样式，会覆盖开发者样式。等等，类似这种默认优先级，都会改变

选择器

strong {
  color: red

这个叫规则，花括号内的叫声明
同一个声明中的 属性和值组成一个名值对（property-value pairs），名值对用分号分隔.

类选择器：

• "."

ID选择器：

• "#"

如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。

以将多个选择器组合起来构成更确定的选择器

方括号的形式指定其他属性。比如，选择器 [type='button'] 选中所有 type 属性为 button 的元素。

方括号的形式指定其他属性。比如，选择器 [type='button'] 选中所有 type 属性为 button 的元素。

伪类选择器

加在选择器后面的用来指定元素状态的关键字，可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式

列表：

• :link
• :visited
• :hover
• :focus
• :first-child
• :nth-child
• :nth-last-child
• :nth-of-type
• :first-of-type
• :last-of-type
• :empty
• :target
• :enabled
• :disabled

关系选择器

• A（空格）E
  后代选择器
• A > E
  子代选择器
• E:first-child
  任一是其父母结点的第一个子节点的元素E
• B + E
  兄弟选择器
• B ~ E
  B元素后面的拥有共同父元素的兄弟元素E

通配符 ( * )

表示任意元素

注意事项

• 注意利用选择器的优先级，避免大量class id
• 避免复杂的依赖元素关系的规则

css可读性

注释：
/* */

书写格式

文本样式

font:

• 字体风格（斜体，粗体等）
• 字体大小/行高：
  一个比较容易实现的策略是给顶级的文档元素指定一个系统内置的值如medium，然后再给它的子元素设置个相对值。
  行高用来指定行与行之间的距离。
• 字体——写成一个字体列表，
• text-decoration：装饰，下划线什么的
• font- variant:small-caps：小型大写字母

颜色

• 浏览器支持的文字命名的颜色
  颜色文字对照表
  有的浏览器可能不支持此种方式，所以， 不建议使用这种

• rgb
  #000000格式：
  两位两位分，分别是红，绿，蓝

rgb()格式：
eg：rgb(128, 0, 0)纯红

• 属性
  color、background-color等

content

在css中指定内容——文本 图片

一个缺点：国际化，样式表中的文本，翻译很成问题

• 通过伪元素添加内容——文本，图片（图片用url）
  ::before、::after

• background 用url添加图片背景

Lists

list-style属性指定列表 的 标记样式

无序列表——css有三种标记样式

• disc
• circle
• square
  对应实心小圆圈，空心小圆圈，实心方块

有序列表——5种

• decimal
• lower-roman
• upper-roman
• lower-latin
• lower-latin

list-style属性，还有更细致的，分开的写法

计数器

可以用计数器来计数任何元素
要想计数，你必须定义一个计数器

想要开始计数的元素，在他之前的元素上设置counter-reset，比如它的父元素，或者兄弟节点。

为你想要计数的元素设置counter-increment值为，counter-reset属性设置的计数器名字

一般，都把这个写在伪元素里边，比如::before

在::before中，设置content属性，值为counter()，括号里为计数器名字，在设置计数器类型（此项选填——值为有序列表的值）

计数器更复杂的使用

盒模型

元素 -> 内边距 -> 边框 -> 外边距

内边距跟元素背景颜色一样，外边距总是透明

用border来设置边框样式

Paste_Image.png

使用none 、hidden明确移除边框，设置边框颜色为transparent使其不可见

margin——外边距
padding——内边距
border——边框

都可以细分为（上下左右），可单独设置

当你使用外边距和内边距来调整元素的布局时，你的样式规则会与浏览器的默认规则以复杂的方式相互作用。

不同的浏览器布局元素的方式不一样。直到你的样式表修改默认样式，结果可能看起来相似。有时这可能让你的样式表给出令人惊讶的结果。

更多信息——盒模型

表格

表格是一个矩形网格中的信息安排。一些表格相当复杂，不同的浏览器对复杂的表格将会有不同的展示结果。

表格结构

在表格中，信息显示在一个个的单元格（cell）中.

在页面横向上一条直线的单元格构成了行（row）。

在一些表格中，行可能被分组。表格开始的特定的行组是表头 （header）。表格最后的特定行组是表尾（footer）。表格中主要的行就是表体（body），这些表体也可能被分组。

在页面纵向上一条直线的单元格构成了列（column），但是在CSS表格中，列的使用是受限的。

可以用CSS将一个单元格扩展到多行或者多列来构造复杂表格

边框

单元格没有外边距。
但是单元格有边框和内边距。默认情况下，边框被表格的border-spacing
属性值间隔。你也可以通过设置表格的border-collapse
属性值为collapse来完全移除间隔。

<caption>
元素是用在整个表格的一个标签。默认下，它显示在表格的顶部。
可以设置 <caption>
的caption-side
属性值为bottom来将标签移到表格的底部。
想要样式化caption的文本，可以使用任何常规的文本属性。

caption：元素 (or HTML 表格标题元素) 展示一个表格的标题， 它常常作为<table> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被CSS样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。" style="color: rgb(33, 122, 192); text-decoration: none; margin: 0px; padding: 0px; border: 0px;">

可以通过为表格元素指定empty-cells
属性值show来显示空单元格（就是其边框和背景）。

你也可以指定empty-cells: hide;来隐藏边框和背景，那么如果一个单元格的父元素设置了背景，背景将通过空单元格显示出来。

表格的更多细节
Full property table

媒体

假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法。

CSS通过使用@media
的格式来对特定的媒介指定适配规则。

示例
站点导航，h5中使用<nav>标签
在打印网页时候，不需要nav，那么可以添加一条适配规则，使得在打印时候，隐藏它

@media print {
  #nav-area {display: none;}
  }

常见媒介类型写法：

• screen 彩色计算机显示
• print 打印（分页式媒体）
• projection 投影
• all 所有媒体（默认）

其他指定媒介类型的规则

• 在样式表通过link，加入到文档时：
  在<link>标签上添加media属性，来指定媒介类型

• 在css文件中，在样式表开头，使用 @import
  一个url引入另外的样式表，同时定义媒介类型

Media类型

打印

CSS有一些特性能够支持打印和分页媒体。
@page
规则能够设置页间距，对于双面打印，还可以分开设置 @page:left
和 @page:right。

对于打印媒介，可以使用适当的长度单位，像是英寸(in)、点（1pt = 1/72 inch）、厘米（cm）还有毫米（mm）。这等同于使用em来配合字体大小和百分比。
可以通过使用 page-break-before
, page-break-after
和 page-break-inside
属性来控制文档内容的分页边界。

更多细节：
想获取更多细节，请参考CSS规范中的 Paged media 部分。
像CSS的其他特性一样，打印也依赖于你的浏览器及其设置。例如，在打印的时候Mozilla浏览器支持默认的间距，页眉和页脚。而当其他用户打印你的文档时，你无法预知他会使用的什么样的浏览器和设置，因此你也不能完全控制打印情况。

用户界面

下面有五种特殊的选择器:

• E:hover
  
  当鼠标悬浮任何E元素上

• E:focus
  
  当元素获得键盘焦点

• E:active
  
  当元素是当前的活动元素

• E:link
  
  当元素超链接到一个url但是用户还没有访问过

• E:visited
  
  当元素超链接到一个url但是用户已经访问过

cursor
属性指定鼠标的形状：

• pointer 指示超链接
• wait 表明程序无法接受输入
• progress 表明程序正在运行，但是仍可以接受输入
• default 默认（通常是箭头）

outline
属性通过创建轮廓来表明获得键盘焦点。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。它的作用相当于 border
属性，但与其不同的是它不能指明个别方向。

一些其他的用户界面特性通常会通过属性来应用。例如，禁用或者只读的元素可以设置 disabled 属性和 readonly 属性。选择器可以通过方括: [disabled]

更多用户界面

或者 [readonly]来指定这些属性。