首页前端开发CSScss规则定义?(css规则定义翻译)

css规则定义?(css规则定义翻译)

时间2023-04-27 18:06:01发布访客分类CSS浏览816
导读:css全名是层叠样式表(CascadingStyleSheets CSS规则的作用是给html标签添加“样式”,样式定义了如何显示HTML元素。css规则的标签是可以由自己的属性去定义样式的(比如表格可以自定义边框),为什么要新定义一个CS...

css全名是层叠样式表(CascadingStyleSheets)

CSS规则的作用是给html标签添加“样式”,样式定义了如何显示HTML元素。

css规则的标签是可以由自己的属性去定义样式的(比如表格可以自定义边框),为什么要新定义一个CSS来添加样式呢?因为早期的设计混乱,标签的样式属性没有“通用”性(不同的标签有不同的样式属性),相对难以去使用。

基本语法

规则

选择符

任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如,

P{ text-indent:3em}

当中的选择符是P。

类选择符

单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式。例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码:

code.html{ color:#191970}

code.css{ color:#4b0082}

以上的例子建立了两个类,css和html,供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类,例如,

PCLASS=warning> 每个选择符只允许有一个类。

例如,code.html.proprietary是无效的。/p>

类的声明也可以无须相关的元素:

.note{ font-size:small}

在这个例子,名为note的类可以被用于任何元素。

一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small,但如果网页制作者决定改变这个类的样式,使得它不再是小字体的话,那么这个名字就变得毫无意义了。

ID选择符

ID选择符个别地定义每个元素的成分。这种选择符应该尽量少用,因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如,ID选择符可以指定如下:

#svp94O{ text-indent:3em}

这点可以参考HTML中的ID属性:

PID=svp94O> 文本缩进3em/P>

关联选择符

关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性,而且因为层叠顺序的规则,它们的优先权比单一的选择符大。例如,以下的上下文选择符

PEM{ background:yellow}

是PEM。这个值表示段落中的强调文本会是黄色背景;而标题的强调文本则不受影响。

声明

属性

一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。

声明的值是一个属性接受的指定。例如,属性颜色能接受值red。

组合

为了减少样式表的重复声明,组合的选择符声明是允许的。例如,文档中所有的标题可以通过组合给出相同的声明:

H1,H2,H3,H4,H5,H6{

color:red;

font-family:sans-serif}

继承

实际上,所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值,除非另外更改。例如,一个BODY定义了的颜色> 值也会应用到段落的文本中。

有些情况是内部选择符不继承周围的选择符的值,但理论上这些都是特殊的。例如,上边界属性是不会继承的;直觉上,一个段落不会有同文档BODY一样的上边界值。

注解

样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式:

/*COMMENTSCANNOTBENESTED*/

伪类和伪元素

伪类和伪元素是特殊的类和元素,能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如,visitedlinks(已访问的连接)和activelinks(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分,例如段落的第一个字母。

伪类或伪元素规则的形式如

选择符:伪类{ 属性:值}

选择符:伪元素{ 属性:值}

伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用,如下:

选择符.类:伪类{ 属性:值}

选择符.类:伪元素{ 属性:值}

定位锚伪类

伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visitedlinks)和可激活连接(activelinks)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示,甚至不同字体大小和风格。

一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后,当网页的已访问连接被重选时,又以不同颜色、更小字体显示。这个样式表的示例如下:

A:link{ color:red}

A:active{ color:blue; font-size:125%}

A:visited{ color:green; font-size:85%}

首行伪元素

通常在报纸上的文章,例如WallStreetJournal中的,文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能,将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:

P:first-line{

font-variant:small-caps;

font-weight:bold}

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: css规则定义?(css规则定义翻译)
本文地址: https://pptw.com/jishu/10412.html
css定位属性position的值的含义?(css定位属性position的值的含义) css对div设置边框?(css给div设置边框)

游客 回复需填写必要信息