CSS样式

时间:2019-03-19
本文章向大家介绍CSS样式,主要包括CSS样式使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

CSS简介

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

属性和属性值

属性

属性的名字是一个合法的标识符,它们是CSS语法中的关键字。一种属性规定了格式修饰的一个方面。例如:color是文本的颜色属性,而text-indent则规定了段落的缩进。
要掌握一个属性的用法,有六个方面需要了解。具体叙述如下:
①该属性的合法属性值(legal value)。显然段落缩进属性text-indent只能赋给一个表示长度的值,而表示背景图案的background.image属性则应该取一个表示图片位置链接的值或者是关键字none表示不用背景图案。
②该属性的默认值(initial value)。当在样式表单中没有规定该属性,而且该属性不能从它的父级元素那儿继承的时候,则浏览器将认为该属性取它的默认值。
③该属性所适用的元素(Applies to)。有的属性只适用于某些个别的元素,比如white-space属性就只适用于块级元素。white-space属性可以取normal、pre和nowrap三个值。当取normal的时候,浏览器将忽略掉连续的空白字符,而只显示一个空白字符。当取pre的时候,则保留连续的空白字符。而取nowrap的时候,连续的空白字符被忽略,而且不自动换行。
④该属性的值是否被下一级继承(inherited)。
⑤如果该属性能取百分值(percentage),那么该百分值将如何解释。也就是百分值所相对的标准是什么。如margin属性可以取百分值,它是相对于margin所存元素的容器的宽度。
⑥该属性所属的媒介类型组(media groups)。

属性值

①整数和实数
这和普通意义上的整数和实数没有多大区别。在CSS中只能使用浮点小数,而不能像其他编程语言那样使用科学记数法表示实数,即1.2E3在CSS中将是不合法的。下面是几个正确的例子,整数:128、-313,实数:12.20、1415、-12.03。
②长度量
一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位,因而长度单位也分为相对长度单位和绝对长度单位。
相对长度单位有:em——当前字体的高度,也就是font.size属性的值;ex——当前字体中小写字母x的高度;Dx——一个像素的长度,其实际的长度由显示器的设置决定,比如在800木600的设置下,一个像素的长度就等于屏幕的宽度除以800。
另一一点值得注意的是,子级元素不继承父级元素的相对长度值,只继承它们的实际计算值。
③百分数量(percentages
百分数量就是数字加上百分号。显然,百分数量总是相对的,所以和相对长度量一样,百分数量不被子级元素继承。

选择器

类型选择器

CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器),可以向这种元素类型的每个实例上应用声明。例如,以下简单规则的选择器是H1,因此规则作用于文档中所有的H1元素:
1
H1 {color:red}

 

简单属性选择器

CLASS属性

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲,可以使用CLASS属性来分类元素,在样式表中创建规则来引用CLASS属性的值,然后浏览器自动将这些属性应用到该组元素。
类选择器以标志符(句点)开头,用于指示后面是哪种类型的选择器。对于类选择器,之所以选择句点是因为在很多编程语言中它与术语“类”相关联。翻译成英语,标志符表示“带有类名的元素”。

ID属性

ID属性的操作类似于CLASS属性,但有一点重要的不同之处:ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。
需要注意的是,ID选择器的标志符是散列符号(#)。标志符用来提醒浏览器接下来出现的是ID值。

STYLE属性

尽管在选择器中可以使用CLASS和ID属性值,STYLE属性实际上可以替代整个选择器机制。不是只具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值),STYLE属性的值实际上是一个或多个CSS声明。
通常情况下,使用CSS,设计者将把所有的样式规则置于一个样式表中,该样式表位于文档顶部的STYLE元素内(或在外部进行链接)。但是,使用STYLE属性能够绕过样式表将声明直接放置到文档的开始标记中。

组合选择器类型

可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器,可以更加精确地处理希望赋予某种表示的元素。例如,要组合类型选择器和类选择器,一个元素必须满足两个要求:它必须是正确的类型和正确的类以便使样式规则可以作用于它。

外部信息:伪类和伪元素

在CSS1中,样式通常是基于在HTML源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行,但是它无法实现设计者希望获得的一些常见的设计效果。
设计伪类和伪元素可以实现其中的一些效果。这两种机制扩充了CSS的表现能力。在CSS1中,使用伪类可以根据一些情况改变文档中链接的样式,如根据链接是否被访问,何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素,可以更改元素的第一个字母和第一行的样式,或者添加源文档中没有出现过的元素。
伪类和伪元素都不存在于HTML;也就是说,它们在HTML代码中是不可见的。这两种机制都得到了精心设计以便能够在CSS以后的版本中做进一步地扩充;也就是说实现更多的效果。

我已经实践了哪些内容