CSS

·  阅读 465

什么是CSS

Cascading Style Sheets简称CSS,层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

诞生历程

从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。 1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯(Bert Bos)正在设计一个名为Argo的浏览器,于是他们决定一起设计CSS。 其实当时在互联网界已经有过一些统一样式表语言的建议了,但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中,一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合每个人的爱好。
哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议,1995年的www网络会议上CSS又一次被提出,博斯演示了Argo浏览器支持CSS的例子,哈肯也展示了支持CSS的Arena浏览器。 同年,W3C组织(World WideWeb Consortium)成立,CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准,层叠样式表的开发终于走上正轨。有越来越多的成员参与其中,例如微软公司的托马斯·莱尔顿(Thomas Reaxdon),他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底,CSS初稿已经完成,同年12月,层叠样式表的第一份正式标准(Cascading style Sheets Level 1)完成,成为w3c的推荐标准。
1997年初,W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。

特点

1. 样式丰富

2. 多页应用

CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用

3. 层叠

层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。

4. 页面压缩

在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程度的缩减了页面的体积,减少下载的时间。

CSS

一、选择器

通用选择器:*

允许您毫无例外地选择所有标签。这个选择器看似毫无意义,但下面我们将看到,通过将其与其他选择器结合使用,它会很有用。因此,以下规则将应用于整个页面,以定义所有元素的文本大小,包括标题(默认情况下具有较大的大小):

* {
  font-size: 14px;
}
复制代码

类型选择器:balise

正如我们在上面看到的,指出标记的名称使您可以将规则限制为单一类型的标记。因此,要将页面上的所有链接(“ a”标签)涂成蓝色,您可以按照以下示例操作:

a {
  color: blue;
}
复制代码

后代选择器: balise_mère balise_descendante

简单空间也是一种选择器。要将样式限制为页面特定区域中包含的标签,可以使用此选择器。它将仅选择名称为“ beacon_descendante”且包含在“ beacon_mere”中的信标。无论是女孩子标签,孙女标签,孙女标签,标签...好吧,我想您都明白了!请注意,该样式将应用于“ descendant_bags”标签。因此,以下CSS代码将仅选择其他<li>标签中包含的<li>标签。从HTML教程中可以看出,只有子列表的行而不是主列表的行:

li li {
  font-size: 10px;
}
复制代码

子选择器: balise_mère > balise_fille

如果您希望规则仅应用于直接子标记,则必须使用“>”选择器。例如,您想在段落内设置图像标签的样式,但如果它在链接内,则不希望设置样式。以下示例代码会将段落中的所有图像移到页面的右侧(例如杂志文章中的插图),但将图像保留在链接内的位置(例如代表ZIP文件的小图像或其他图像):

p > img {
  float: right;
}
复制代码

邻接选择器: balise + balise_suivant_immediatement

极少见的是,有时您希望为标签赋予一种样式,但前提是该样式必须先于另一个标签。因此,让我们想象一下,您的Web页面由h1标题,后面的介绍性段落,其余部分(标题,段落...)组成。您要斜体页面的介绍性段落。这是您可以执行的操作:

h1 + p {
  font-style: italic;
}
复制代码
<h1>Titre de la page</h1>
// id = change的p生效斜体样式
<p id='change'>Paragraphe d'introduction concerné par le code CSS ci-dessus, car il est juste après le titre h1.</li>
<h2>Titre du premire chapitre</h1>
<p>Paragraphe non concerné par le code CSS ci-dessus, car il est précédé d'un élément h2.</li>
复制代码

选择器分组: sélecteur_1, sélecteur_2

有时您想将相同的样式应用于多个标签或多个选择器。例如,将所有标题的背景颜色定义为必须为灰色,将文本的颜色定义为必须为蓝色。而不是这样做:

h1 {
  background-color: gray;
  color: navy;
}

h2 {
  background-color: gray;
  color: navy;
}

h3 {
  background-color: gray;
  color: navy;
}
复制代码

取而代之的是,您可以用逗号分隔标签(通常是选择器)的名称,以将样式定义分组在一起,这样可以避免代码重复。因此,将来您要修改CSS代码时,只需在一个地方进行修改,而不必忘记更改以下规则之一:

h1, h2, h3 {
  background-color: gray;
  color: navy;
}
复制代码

类选择器: .classe

现在,您可以根据其含义将样式分配给某些HTML标记。但是通常您需要更多的控制权,才能更精细地选择标签。您还需要为某些标签定义新的含义,当然还要以不同的方式设置它们的样式。每个HTML标记都可以接收一个“类”属性,您可以在其中输入您选择的名称。它仅对您有意义,并允许您使用CSS样式表进行链接。以下是带有类标记的一些示例:

<p      class="introduction"> ... </p>      
<div    class="encadre">      ... </div> 
复制代码

将类别分配给HTML标记后,就可以轻松格式化它们。只需使用“.” 然后是类名。因此,以下是如何快速设置上面刚刚看到的类的样式的方法:

.introduction { font-style: italic;}
.encadre      { border: 1px solid black; background: cyan;}
.css          { background: lightgray;}
.important    { color: red;}
.bouton       { border: 1px solid gray; background: lightgray;}
.complement   { float: right;}
.img-legende  { float: right; border: 1px solid black;}
复制代码

在CSS代码中,可以将样式应用于元素的每个类。因此,让我们以“框架”类为例。现在,我们需要两种框:一个简单的信息框和一个警告框。每个框将保留“框”类,但还将分配第二个类来指定框的性质:“信息”或“注意”:

<div class="encadre information">
  Information :<br>
  Voici un texte d'information, faites-en ce que vous voulez !
</div>

<div class="encadre attention">
  Information :<br>
  Voici un texte d'information, faites-en ce que vous voulez !
</div>
复制代码

视觉上,所有框都将具有黑色边框。但是,这两个信息框和警告框的突出之处在于它们的背景色:浅蓝色表示信息,浅红色表示警告:

.encadre {
  border: 1px solid black;
}

.information {
  background: cyan;
}

.attention {
  background: pink;
}
复制代码

ID选择器: #id

ID几乎与类相同,不同之处在于,ID只能分配给一个元素,也只能分配给一个元素。一个元素只能有一个ID(没有ID列表,用空格分隔)。例如,页面的页眉或页脚就是这种情况:每个HTML页面只能有一个。一页菜单的同上... 在HTML中,通过“ id”属性将ID分配给标签。在CSS中,我们使用#号和ID的名称来赋予其样式。 这是使用ID的HTML和CSS代码的示例。看起来像使用类的代码(在HTML中,“ id = ...”替换了“ class = ...”,而在CSS中,“#”替换了“。”):

<div id="entete">
  Hello World
</div>

<div id="pied">
  hello world
</div>
复制代码
#entete {
  border-bottom: 1px solid black;
}

#pied {
  border-top: 1px solid black;
}
复制代码

属性选择器: balise[attribut]

该选择器使您可以过滤具有特定属性的标签。例如,请记住<a>标记。根据其使用方式,它具有两个作用:

<a href="#article">Aller à l'article</a>
<h2><a name="article">Article</a></h2>
复制代码

在这里,如果要对链接应用样式,例如下划线,蓝色和鼠标悬停效果...,则可以对<a>标记进行样式设置。但是,锚点也将像链接一样成形,尽管它们不可单击。这就是为什么在HTML页面上,我建议您将锚标记的内容留空的原因。在上面的示例中,建议您在结束</a>标记后移动文本“ Article”。 但是,通过使用属性选择器,可以保持上面的HTML代码,并能够以不同的方式设置链接和锚的样式:

a[href] { color: blue; text-decoration: underline; }
a[name] { }
复制代码

还要注意,选择器的“标签”部分可以省略。因此,使用“ [name]”选择器,将选择具有“ name”属性的任何标签,而不仅仅是链接(“ a”标签)。在我们的示例中,我不建议您这样做,因为表单字段也具有name属性,因此样式也将适用于它们。

确切的属性值选择器: balise[attribut="valeur"]

为了显示使用此选择器的示例,让我们使用dir属性。此属性具有默认值“ ltr”,表示“从左到右可读的文本”(从左到右)。可以将dir属性与值“ rtl”一起使用,以一种可以从右到左阅读的语言引入文本(“ rtl”代表“从右到左”)。然后,借助CSS中的此选择器,可以以不同的方式显示这些文本:

<p> <span dir="rtl">2345</span>6789</p>
复制代码
span[dir="rtl"] {
  background-color: yellow;
}
复制代码

包含值的属性选择器: balise[attribut~="valeur"]

允许您选择标签,其属性“ attribute”包含一个由白色字符(空格,制表符...)分隔的列表,并且其中一个元素等于“ value”。这样就可以模拟具有除“ class”以外的任何属性的类的操作。请记住,HTML元素可以有多个类,用空格隔开,例如“注意框”,“信息框”……因此,以下两行是等效的:

.cadre           { ... }
[class~="cadre"] { ... }
复制代码

当然,您可以在这两个选择器的前面放置标签名称,以进一步限制所选标签。例如:div.cadre和div[class~="cadre"]是等效的,并将选择器限制为具有“ frame”类的“ div”标签。

属性选择器以一个值开头: balise[attribut|="valeur"]

用于选择标签,其属性“ attribute”包含一个由破折号分隔的列表,并且其第一个元素为“ value”。 这对于lang属性很有用,它可以包含以下代码,例如en-US(美国英语),en-GB(英国英语),fr-FR(法国法语),fr-CA(加拿大法语), fr-BE(比利时法语)...以相同字母开头的语言看起来很相似,因此可以以相同的方式设置样式。示例,无论国家/地区如何,都以不同的方式设置英语和法语的样式:

[lang|="en"] { ... }
[lang|="fr"] { ... }
复制代码

二、伪类和伪元素

伪类

存在DOM文档中,逻辑上存在但在文档树中却无须标识的“幽灵”分类

伪元素

不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中

三、选择优先级

有一种计算方法可以使您始终确保知道选择器的特异性:

  • a =如果选择器是一个“ style”属性而不是选择器,则为1;否则为0(在HTML中,元素的“ style”属性的值是样式表规则。选择器,所以a = 1,b = 0,c = 0和d = 0);
  • b =计算选择器中ID属性的数量(尖锐数量);
  • c =计算选择器中其他属性和伪类的数量(以句点开头的类,方括号中的属性,以冒号开头的伪类,而不是以冒号开头的伪元素);
  • d =计算选择器中元素名称的数量(标签名称)。
*              { ... } /* a=0 b=0 c=0 d=0 -> spécificité =    0 */
li             { ... } /* a=0 b=0 c=0 d=1 -> spécificité =    1 */
ul li          { ... } /* a=0 b=0 c=0 d=2 -> spécificité =    2 */
ul ol+li       { ... } /* a=0 b=0 c=0 d=3 -> spécificité =    3 */
h1 + *[rel=up] { ... } /* a=0 b=0 c=1 d=1 -> spécificité =   11 */
ul ol li.red   { ... } /* a=0 b=0 c=1 d=3 -> spécificité =   13 */
li.red.level   { ... } /* a=0 b=0 c=2 d=1 -> spécificité =   21 */
#x34y          { ... } /* a=0 b=1 c=0 d=0 -> spécificité =  100 */
复制代码

如果两条CSS规则具有相同的特异性,则最后一条获胜。因此,可以在CSS文件甚至第二个CSS文件中进一步覆盖或重新定义规则。

四、值的类型

长度和百分比

首选相对单位,因为相对单位可以适应查看者(无论是否有视觉障碍)和外围设备(屏幕或印刷品),并禁止绝对单位(例如,除非直接为单个外围设备定义关系)。这些值可以是正数或负数(+/-),值0不需要指定单位。

  • 相对长度单位
  1. em:字体的高度(或父标签的高度,定义相同的大小时)
  2. ex:小写x字符的高度('x')
  3. px:像素大小(在屏幕和纸张上有所不同,但是按比例计算)
  • 绝对长度单位
  1. cm:厘米(1厘米= 10毫米)
  2. mm:毫米
  3. in:英寸(1英寸= 2.54厘米)
  4. pt:点(1 pt = 1/72 in)
  5. pc:picas(1pc = 12pt)
  • 百分比

颜色

  • 对应颜色其英文名称
  • 16进制这种所谓的“ RGB”格式
  1. #rgb:如果两个“ r”相等,两个“ g”也相等,那么两个“ b”也可以缩短前面的表示法。保持相同的示例,可以将其编写为:#0c0;
  2. rgb(x,x,x)注意:如果您在掌握十六进制表示法时遇到问题,则可以使用该表示法在以10为基数的数字中写入数字。三个x是介于0和255之间(含0和255)的整数。然后将前面的示例写为rgb(0.204.0);
  3. rgb(y%,y%,y%):最后,如果使用0到100之间的数字比使用0到255之间的数字更舒适,则可以使用此表示法。ys是介于0.0和100.0(含)之间的浮点数。示例:rgb(0%,80%,0%)。

五、盒子模型

  • width ----------块内容的宽度
  • height ---------块内容的高度
  • min-width ------块内容的最小宽度
  • min-height ------块内容的最小高度
  • max-width -------块内容的最大宽度
  • max-height ------块内容的最大高度
  • border-width -----边框宽
  • border-style -----边框样式
  • border-color -----边框颜色
  • border ----------边框属性:同时具备边框的三个属性才能生效border:1px #ffffff solid
  • border-top/bottom/left/right --边框精准控制
  • margin -----------外边距:上>右>下>左 或者 全部
  • margin-top/bottom/left/right --外边距精准控制
  • padding ----------内间距: 上>右>下>左 或者 全部
  • padding-top/bottom/left/right --内间距精准控制
  • background-color --背景颜色
  • background-image --背景图片background-image: url('images/fond.png');
  • background-repeat --背景图片不重复
  • background-size ----背景图片大小
  • background-position --背景图片位置
  • background-attachment -- 背景附着力此属性很少使用,默认值为scroll,可选fixed
  • background ------五个属性无序简写

六、定位方式

display

  • flex: 弹性布局;
  • block : 将标签显示为一个块(在该块之前和之后经过一行);
  • inline : 显示内联标签;
  • none : 不显示块,也不显示其子块(就像标记不存在一样);
  • list-item : 此值的使用频率较低,它允许将标签显示为列表行(使该标签好像是<li>一样)

overflow

  • visible : 突出的内容是可见的;
  • hidden : 修剪超出块的内容;
  • scroll : 滚动条被添加到块中;
  • auto : 如果内容的大小大于块的大小,则添加一个或多个滚动条;

visibility

  • visible : 这是默认值,该块是可见的;
  • hidden : 该块是隐藏的,但与“ display:none;”不同,该块的位置是保留的。

七、其他属性

  • 字体font
  • 鼠标cursor
  • 阴影box-shadow
  • 绝对相对position

...

参考文献

1. 祝红涛,张钦.CSS网络大讲堂:清华大学出版社,2013.05:4
2. 维姆莱,波斯.CSS权威教程(第三版):清华大学出版社,2009.1:第3页
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改