CSC8018_Web Technologies（Topic3）

CSS

风格与结构的分离
- 控制-潜在地控制每一个页面中的项目
- 更好地风格管理

严格XHTML和严格HTML
4.01两个不推荐使用的HTML
格式支持CSS

Selector	Pattern matched
p	All <p>
.special	<anytag class="special">
p.special	All <p class="special">
#thisBox	The only <anytag id="thisBox">
#thisBox p	All <p> nested anywhere inside the only <anytag id="thisBox">
#thisBox > p	All <p> that are direct children of <anytag id="thisBox">
#thisBox p.special	All <p class="special"> nested anywhere inside the only tag with the id of thisBox
div#thisBox p	All <p> nested anywhere inside the only <div id="thisBox">

 
http://www.w3.org/TR/CSS2/selector.html

CSS支持多种度量单位
独立于其他页面计算的绝对单位
内容和/或浏览器默认值
- 用于精确布局
- 包括像素（px）、点（pt）、毫米（mm）
相对于其他单位按比例计算的相对单位
页面内容或浏览器默认值
- 例如当前可用的宽度、默认文本大小等。
- 包括百分比（%）、Ems（em）、Exes（ex）
- 也可用于文本的特殊相对单位，例如小，大，x-大.等
好的设计是两者的结合

用于快速和/或精确地设置框属性
- 尽可能减少所需的代码量，设计页面样式

Declaration	Result
border-width: 20px;	Width 20px on all 4 sides
border-left-width: 20px;	Width 20px on left-hand side only
margin: 20px 40px;	Margin 20px top/bottom, 40px left/right
padding: 20px 40px 10px 30px;	Padding set for top/right/bottom/left
border: 20px solid blue;	20px, solid, blue border on all 4 sides

CSS2只允许一个图像一个盒子
CSS3允许多个图像

CSS position property

Value	Description
static	Default non-positioned value. Not normally set unless to specify an override of other positioning
relative	Leaves element in the page flow, but allows it to be displayed in an offset position
absolute	Removes element from page flow and allows it to be positioned anywhere
fixed	Removed element from page flow and fixes it to the browser viewport. Rest of page can now scroll behind

CSS：媒体类型

Media	Intended device
all	pply to all outputs (default）
screen	Computer screens
print	Printed media (and Print Preview)
tv	TV like devices (low res, limited scrolling)
projection	Data projectors
handheld	Small devices (small screens, ltd bandwidth)
braille	Braille tactile feedback devices
embossed	Braille printers

Lesson 14: Cascading Style Sheets

层叠样式表（CSS）是调整网页视觉外观的主要方法。保持样式指令与它们所应用的语义超文本文档分离（关注点分离）有很大的好处：一组样式指令（样式表）可以用来对几十个、几百个或几千个网页进行样式化，而不会混淆其中一个网页的语义信息。

在HTML中集成CSS

有四种方法可以将样式指令集成到HTML文档中：

    内部样式：CSS指令包含在<style>HTML head部分的元素中。定义的样式扩展到当前HTML文档。这对于单个HTML文档或特定于页面的样式是理想的。
    外部样式：CSS作为外部资源提供。HTML文档通过HTML head部分中的元素链接到它想要使用的样式表<link>。这种方法允许在多个HTML页面上重用单个样式表，从而避免了代码的重复，并确保了页面之间的一致性。如果你有多个HTML页面，这是首选的方式。
    内联样式：CSS指令通过元素定义中的style属性直接与单个HTML元素相关联。这通常是一种用样式注释元素的糟糕方法，应该只用于原型设计或特殊情况，因为它违反了关注点分离并妨碍了可伸缩性。
    导入样式：CSS允许通过@import指令导入其他样式表。这是一种简洁的方式，例如，链接到HTML页面中的单个主样式表，并让该主样式表导入专用的子样式表。

Lesson 15: Units, Colors, & Fonts

单位

CSS提供了大量的单位来指定尺寸，如字体大小，行高，边距，图像尺寸等，这些单位可以大致分为绝对单位和相对单位。

绝对单位：

mm	millimeters
cm	centimeters
in	inches (1in = 96px = 2.54cm)
px	pixels (1px = 1/96th of 1in)
pt	points (1pt = 1/72 of 1in)
pc	picas (1pc = 12 pt)

相对单位

em	Relative to the font-size of the element (2em means 2 times the size of the current font)
ex	Relative to the x-height of the current font (rarely used)
ch	Relative to the width of the "0" (zero)
rem	Relative to font-size of the root element
vw	Relative to 1% of the width of the viewport
vh	Relative to 1% of the height of the viewport
vmin	Relative to 1% of viewport's smaller dimension
vmax	Relative to 1% of viewport's larger dimension
%	Relative to the parent element

颜色

在CSS中也有很多方法来表示颜色。我们已经看到命名的颜色，如在颜色：绿色。然而，只有少数几种颜色被命名。通常情况下，你可以通过RGB三元组：rgb（136，0，0）或十六进制值：#880000（三对十六进制值，范围从00到ff=255）或更短的#800来引用颜色。是否选择RGB三进制值取决于您的偏好，因为它们会产生相同的颜色定义。

CSS3通过Alpha通道支持透明度。要控制颜色值的透明度，请在RGB三元组中添加一个介于0和255之间的第四个值，或者另一个十六进制值。例如，不透明度为75%的绿色可以写成rgb（136，0，0，191）或#880000bf。

字体

字体由font-family指令定义。这个指令的值接受一个逗号分隔的字体列表。浏览器将遍历此列表，直到第一次出现可用字体，因为它是由用户的操作系统（CSS 2）提供的，或者因为它已作为Web字体（CSS3）提供。一个典型的字体堆栈看起来像这样：

font-family: "Noto Serif", "Times New Roman", Times, serif;

Lesson 16: CSS Selectors

CSS选择器定义CSS规则的范围。它们决定了HTML文档的哪些部分应用了相应的CSS声明。

基本选择器

基于元素的选择器使用标记名来选择该类型的所有HTML元素。例如：

ol { list-style-type: lower-roman; }

这将导致所有有序列表都使用小写罗马数字（i，ii，iii，iv，.）

基于类的选择器选择在其class属性中声明命名类的所有HTML元素。例如：

.framed { border: 1px solid red; }

HTML元素可以声明使用多个类。为了实现这一点，class属性可以在所谓的class列表中包含多个空格分隔的类名：

<p class="framed important updated">...<p>

ID选择器使用HTML元素的id属性来精确地设置该元素的样式。由于id在HTML文档中必须是唯一的，因此这些规则只适用于单个元素。例如：

#main-menu { font-size：1.5rem; }

可以匹配HTML元素

<nav id="main-menu">... </nav>

通用选择器（或通用选择器）选择所有元素。这有时用于所谓的重置样式，以摆脱浏览器默认值，但也可以在更复杂的模式中与其他选择器组合时很好地使用：

* { padding：0; }

基本的选择器可以组合在一起，以加强CSS规则的应用。例如

p.framed {. }

将只匹配“框架”类的段落，而不匹配“框架”类的任何其他段落或其他元素。

伪类和伪元素

CSS提供伪类来选择某些HTML标记，就好像它们有显式的类注释一样。例如，选择器p：first-child将选择父元素中的第一个子元素。内容设计者可以用类名显式地注释段落元素，但是CSS即使在没有显式的类声明的情况下也提供了这种伪类访问。一些伪类接受参数。例如，p：nth-child（3）选择任何段落，该段落是其父段落的第三个子段落。

伪类在表示网站的动态状态时特别方便，例如a：hover用于选择当前鼠标悬停的链接，a：visited用于选择用户访问过的链接，input：focus用于选择当前关注的表单小部件，等等。

所有CSS支持的伪类的完整列表都可以通过W3Schools获得指向外部网站的链接。

与伪类密切相关的是伪元素：CSS允许我们将HTML文档的某些部分视为明确标记了标记。例如p：：first-letter匹配每个段落的第一个字母，即使这个字母没有显式包含在它自己的HTML元素中。同样，这在无法显式标记相应内容的情况下特别有趣，例如p：：first-line（因为在内容创作时通常不知道换行符将出现在呈现的文本中的何处）。

特别有趣的伪元素是：：before和：：after，它们可用于从CSS中向HTML文档添加内容（因此无需修改文档内容的语义）：

a.further-reading::before { content:" (see also "; }
a.further-reading::after { content: ")"; }

Combinators组合

CSS选择器可以组合起来精确控制文档的哪一部分应该精确匹配。例如

nav a { text-decoration：none; }

将删除元素中任何地方出现的超链接（）中的所有下划线（文本装饰）<a><nav>。在这里，超链接可以嵌套在nav元素中的任何深度，并且不一定需要是直接子元素。如果选择被限制为直接子级，CSS提供了另一个组合子。例如

nav &gt; ul { list-style-type：none; }

将从元素的直接子元素的无序列表中删除项目符号<nav>，但不会应用于嵌套导航列表中的子列表。这是一个有用的CSS规则，用于下拉导航菜单和类似的页面元素。

与子选择器相反，兄弟组合器允许您选择兄弟。或者像在h2 + p中那样直接兄弟选择直接跟随二级标题的任何段落，或者像在th ~ td中那样间接选择出现在表格标题单元格之后的任何表格单元格（在同一表格行中）。

另一个非常有用的组合子是分组组合子，它允许将CSS规则应用于几个匹配选择器中的任何一个。例如

h1，h，2 h，3 { font-variant：small-caps; }

都能与一到三级的任何标题相匹配

特异性

有了所有这些不同的选择元素的方法，有时可能看起来不明确哪个CSS声明适用于元素。请考虑以下情况。以下形式的HTML代码片段：

<div id="main">
   <article>
       <p class="important">我们应该给这篇课文涂什么颜色？</p>
   </article>
</div>

CSS样式表包含以下三个规则：

#main p { color：blue; }
产品p { color：绿色; }
p.important { color：red; font-weight：bold; }

级联

“级联样式表”的名字来源于样式声明如何通过文档级联的事实。默认情况下，许多样式声明都设置为特殊值inherit。这意味着属性的当前值应该从周围的元素中获取。例如，如果我们定义

body { color：white; background-color：blue; }

那么这些颜色设置将不仅应用于body标签中存在的文本，而且应用于body元素的任何后代中找到的文本。没有必要（也没有好处）为标题、段落、列表等再次设置相同的指令，因为所有这些都将默认继承文本和背景颜色。只有当浏览器的默认样式（或另一个CSS规则）重新定义了一个属性时--例如，超链接元素（<a>）重新定义了文本颜色--才需要再次显式定义。

充分利用级联、特异性和描述性选择器是优秀CSS设计的标志。这些概念使你能够编写简洁、清晰和健壮的CSS。与它们作对，你最终会得到一个臃肿、混乱、容易崩溃的CSS噩梦。

Lesson 17: The CSS Box Model

盒子属性

网页是由嵌套的块组成的--无论它们在视觉上看起来是否是“块状”的。每个块都有一个相关的CSS框，允许Web内容创建者修改其视觉尺寸。盒子模型由以下组件组成：

content box	The rectangle where the content goes. Content size is either determined automatically or via the CSS properties width and height.
padding	White space directly around the content. By default 0 but can be set (for all sides or individually) using the CSS padding property.
border	A visual border around the box, separated by white space through padding. By default 0, but can be set (for all sides or individually) using the CSS border property. Content box and padding area can be styled with the background properties.
outline	Component added in CSS3 that surrounds the border and can be styled just like the border, but does not take up space in the box model.
margin	White space surrounding the border. Browsers use various defaults for different elements (e.g. headings, paragraphs, figures, etc). Can be set (either for all sides or individually) with the CSS margin property.

最后，值得注意的是，CSS规范要求浏览器折叠垂直边距。例如，如果一个段落样式声明了1em的垂直边距，那么两个相邻的垂直段落将仅由1em分隔，而不是2em。也就是说，第一个元素的底部边距和第二个元素的顶部边距不相加。相反，最大差值决定了它们的分离。例如，如果一个元素声明了一个顶边距，而它的第一个子元素也声明了顶边距，也会发生同样的情况。这两者不会相加，但子对象的边距将延伸到父对象的内容框之外。因此，边距是一个提示，提示应该包围的白色空间和元素的数量。它不应被理解为元素尺寸的一部分。但奇怪的是，水平边缘不会发生边缘崩溃。

Box-sizing

请注意，整个框的大小通常由内容加上填充加上边框的大小确定。因此，例如，如果内容占用或显式分配了200像素的宽度，并且框在所有方向上定义了30像素的填充和20像素的边框，则可见框的总宽度将为200+2*30+2*20 = 300像素！然而，边缘不会被算作盒子本身的一部分。

为了演示，这里有一<div>个固定宽度为20 em的元素和虚线轮廓。在它是一个段落与100%的宽度，0.5em填充和0.25em虚线轮廓。查看内容如何从父对象中流出，因为父对象无法同时容纳子对象内容和填充：

可以通过设置box-sizing属性来修改此行为。默认值是（刚刚描述过的）值内容框。另一种方法是border-box，在这种情况下，指定的宽度或高度决定了框从边框到边框的尺寸，内容被赋予减去边框和填充后剩余的空间。后一种设置有时在追求像素完美设计时是有益的。

显示属性

可以使用CSS display属性控制将元素视为块元素还是内联元素。这个属性允许覆盖标签的默认分类，分为块级和内联元素。该物业最重要的价值是：

none：元素根本不显示，并完全从文档模型中取出。

inline：元素以内联方式显示，即使它通常是块级元素。

block：元素显示为一个block元素，并获得一个关联的CSS框。

内联块：这种显示模式下的元素将在其上下文中以内联方式呈现（它不会引入新的垂直堆叠块），但它仍然具有关联的框模型，因此可以控制尺寸，填充，边框等。

属性的其他值包括表和列表。它们的呈现方式类似于块级元素，但不会扩展到整个可用宽度。此外，CSS3还引入了更多的显示模式flex和grid。

Lesson 18: CSS Positioning

CSS框的位置通过属性float或position控制。请记住，只有具有CSS框的块元素才能被定位。这些属性对内联元素没有影响。

浮动元件

浮动是改变浏览器如何排列页面内容的最古老的方法。它最初是作为HTML3的一部分引入的，并在CSS1中引入了更强的关注点分离。如果一个元素声明了float属性（可能的值为left或right），它将被从自然流中取出。例如，本节右侧的浮动橙子框出现在本段落之前的HTML中。由于浮动元素被从流中取出，因此它将不再占用整个可用宽度，而是由元素内容确定其宽度。一旦它的尺寸被计算出来，浮动元素就会根据属性的值被移动到父级内容框的左边框或右边框，而水平位置保持不变。最后，浏览器将通过将任何内容向右（向左）移动来在父元素中腾出空间，否则这些内容将与浮动内容冲突。

相对定位

CSS 2引入了相对、绝对和固定定位，主要是为了给予更多的控制权来控制整个页面的布局。第一个，也是最简单的，是相对定位。位置：相对原因和元素相对于其在自然流中的原始位置被移位。位移的偏移量通过特性left、right、top和bottom控制。元素不会从流中取出。这意味着上下文将显示一个空的位置，相对定位的元素通常会去那里。相对定位也不会腾出空间来容纳新位置上的移位内容，因此可能会出现重叠。

在这个例子中，这个橙子内联块相对于其在流中的自然位置的左侧和顶部定位0.25 em。浏览器不关心位移是否会导致图元重叠。CSS指令是display：inline-block; position：relative; top：0.25em; left：0.25em;

绝对定位

绝对定位类似于浮动。一个绝对定位的元素被从流中取出（它再次确定了由内容而不是上下文确定的宽度和高度），并相对于它在HTML元素层次结构中的祖先之一放置。作为定位锚的元素是第一个父元素（或父元素的父元素等）它本身声明了一个不同于static的位置（默认位置）。如果没有祖先声明位置，则<html>将与视口对应的元素作为锚元素。要使元素成为祖先，通常将该元素的位置设置为相对位置，而不添加任何位移。定位的元素将被放置在父元素的填充框中，偏移量由属性left、right、top和/或bottom给出。padding box比content box更常用的原因是，这允许使用padding为定位的元素腾出空间。

与浮动类似，绝对定位将定位的元素从流中取出，并根据内容需求重新计算其尺寸。与浮动类似，绝对定位从祖先元素的维度确定元素的新位置。对于float，祖先总是（直接）父代，但对于绝对定位，祖先可以控制。Float元素只能锚定在左边或右边，而绝对定位允许锚定内容在祖先的顶部或底部。浮动元素相对于内容框定位，而绝对定位相对于填充框定位。最后，绝对定位不会导致浏览器为定位的元素腾出空间，因此不会像float元素那样引入内容包装。

固定和粘性定位

position：fixed定位一个元素，就像position：absolute一样。但是，它不是将元素固定到页面上的某个位置，而是将元素固定到视口（浏览器窗口）上的某个位置。不同之处在于，即使滚动页面，固定位置的元素也将保持在其最初确定的位置。这可以用于导航元素的巨大效果，以便它们在浏览器窗口中始终可见。