CSS和文档

层叠样式表CSS

文章目录

CSS和文档
一、Web样式简介
二、元素
- 1.置换元素和非置换元素
- 2.元素的显示方式
三、把CSS应用带HTML上
- 1.link标签
- 2.style元素
- 3.@import指令
- 4.HTTP链接
- 5.行内样式
三、样式表中的内容
- 1.标记
- 2.规则的结构
- 3.厂商前缀
- 4.处理空白
- 5.CSS注释
五、媒体查询
- 1.用法
- 2.简单的媒体查询
- 3.媒体类型
六、特性查询

一、Web样式简介

CSS的目标是提供一个简单的声明式样式语言，而且具有一定的灵活性，能为文档编写人员和用户提供等同的杨世华功能。

二、元素

元素（element）是文档结构的根基。HTML中常用的元素有p、table、span、a和div等。

1.置换元素和非置换元素

置换元素（replaced element）指用来置换元素内容的部分不用文档内容直接表示。
非置换元素（nonreplaced element）即元素的内容由用户代理（通常是浏览器）在元素自身生成的框中显示。

2.元素的显示方式

块级元素（默认）生成一个填满父级元素的内容区域的框，旁边不能有其他元素。即块级元素在元素框的前后都“断行 ”。
行内元素在一行文本内生成元素框，不打断所在行。
注意：在HTML中，块级元素不能出现在行内元素中，但是CSS并不限制它们的显示方式，相互之间可以嵌套。

三、把CSS应用带HTML上

1.link标签

外部样式表

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />

外部样式表保存为纯文本文件，扩展名通常是.css。
注意：外部样式表不能包含任何文档标记，只用有CSS规则和CSS注释。如果外部样式表中有标记，可能导致部分或全部样式失效。

属性	值	说明
rel	stylesheet
type	text/css	通过link标签加载数据类型
href	URL	地址可以是绝对地址或者相对地址
media	一个或者多个媒体描述符	指明媒体的类型和具有的功能

候选样式表
候选样式表定义方式为把rel属性的值设为alternate stylesheet。仅当用户选择自己时，文档才会使用候选样式表渲染。

2.style元素

嵌入式样式表/文档样式表
style元素也是一种引入样式表的方式，直接写在文档中：

<style type="text/css">…</style>

3.@import指令

链接的外部样式表中也有@import指令：

@import url(sheet2.css);

link与@import主要区别在于句法和指令的位置。@import指令在style元素内部，而且必须放在其他CSS规则前面，否则不会起作用。并且@import指令导入的每个样式表都会使用无法指定候选样式表，也可以显示导入的样式表应用于何种媒体。
想在外部式样式表中再引用link标签，可以使用@import指令。

4.HTTP链接

在Apache中，若想HTTP首部方式，可以在.htaccess文件中引用CSS文件。例如：

Header add Link "</ui/testing.css>;rel=stylesheet;type=text/css"

5.行内样式

如果只想为单个元素提供少量样式，不值得动用嵌入式样式表或外部样式表，可以利用HTML元素的style属性设置行内样式，例如：

<p style="color:gray;">

注意：style属性的值只能是一系列规则声明，而不能包含整个样式表。因此不能在style属性中使用@import指令，也不能有完整的规则。通常不建议使用style属性。

三、样式表中的内容

1.标记

样式表中不能有标记。

2.规则的结构

一个规则由两个基本部分构成：选择符和声明块。声明块由一个或多个声明组成，而一个声明包含一个属性和对应的值。
选择符定义文档中的哪部分受影响。

3.厂商前缀

厂商前缀的一般格式是一个英文破折号、一个标注和一个英文破折号。

4.处理空白

解析时，连续的空白会合并成一个空白。

5.CSS注释

CSS注释放在/* 、*/ 之间，也可以分成多行，但不能嵌套。

五、媒体查询

创作人员通过媒体查询定义浏览器在何种媒体环境中使用指定的样式表。

1.用法

link元素的media属性。
style元素的media属性。
@import声明的媒体描述部分。
@media声明的媒体描述符部分。

2.简单的媒体查询

媒体查询包含描述媒体类型的词组和对媒体参数的说明，决定块中的CSS何时应用。

3.媒体类型

媒体查询最基本的形式媒体类型由CSS2引入。媒体类型就是指明不同媒体的标注：

all 用于所有展示媒体。
print 为有视力的用户打印文档时使用，也在预览效果时使用。
screen在屏幕媒体上展示文档时使用。

应用方式：

<link href="print-color.css" type="text/css" media="screen,print"><style type="text/css" media="screen,print">…</style>@import url（frobozz.css) screen,print;@media screen,print{…}

六、特性查询

特性查询功能指根据用户代理是否支持特定的CSS 属性及其值来应用一段样式。

CSS权威指南(1)相关推荐

css权威指南第四版_16个非常有用的CSS伪选择器，你千万不要错过了！
英文 | https://blog.bitsrc.io/css-pseudo-selectors-you-never-knew-existed-b5c0ddaa8116译文 | https://jue ...
《CSS权威指南》--附录
<CSS权威指南>--附录虽然一条规则中的声明可以按照任何顺序写出来,但我背后还是有一个优先级顺序: 1. display 及相关声明: 2. position 及相关的声明: 3. m ...
css权威指南pdf
下载地址:网盘下载内容简介 · · · · · · 这本书提供了对CSSl和CSS定位的完整的描述,同时也给出了CSS2的概述.书中对CSS的每个属性都做了详细的探究,同时讨论了各个属性之间如何协 ...
CSS权威指南之css声明，伪类，文本处理--(简要笔记一)
1.css层叠的含义后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒. 3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换. ...
CSS权威指南（第三版）
很早就买了这本书,之前都是断断续续地看,前段时间总算是花时间系统的把它看了一遍.严格的说是第二次才把这本书系统的看完,之前是因为很多知识点看不懂,所以没有系统看.虽然这一次也有好多知识点没有看懂.但是 ...
css权威指南 note2
样式表: 外部样式表(external style sheet) <link rel="stylesheet" type="text/css" href= ...
读书笔记《CSS权威指南》
阅读本书主要目的: 自从学会CSS以来,虽然熟练掌握了其使用方法和技巧,但对其底层的原理和实现并不清晰,阅读本书想进一步系统化的学习和深入研究其本质,对这门前端基础语言从熟练使用到真正理解. 第1章 ...
CSS权威指南（一）CSS概述
文章目录 1.元素 2.引入样式表 3.样式表 4.媒体查询 5.特性查询 1.元素 (1)置换元素和非置换元素置换元素,指用来置换元素内容的部分不由文档内容直接表示.比如img标签. 非置换元素, ...
翻译《CSS权威指南》第3版第1章有感
昨晚第一章终于翻译完了,今天一直在想其中在 1.4.5 注释章节提示中的一段文字: One way to create "nested" comments accidentall ...
CSS权威指南之选择器补充
1.给拥有两种类属性的标签内加css样式 <!DOCTYPE html> <html lang="en"> <head><meta cha ...

CSS权威指南(1)