专业网站建设品牌,十四年专业建站经验,服务6000+客户--广州京杭网络
免费热线:400-683-0016      微信咨询  |  联系我们

css选择器3个基本类型,css规则定义_CSS学习

当前位置:网站建设 > 技术支持
资料来源:网络整理       时间:2023/3/4 1:43:57       共计:3584 浏览

css选择器3个基本类型,css规则定义?

基本语法

规则

选择符

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

P { text-indent: 3em }

当中的选择符是P。

类选择符

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

code.html { color: #191970 }

code.css { color: #4b0082 }

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

<P CLASS=warning>每个选择符只允许有一个类。

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

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

.note { font-size: small }

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

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

ID 选择符

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

#svp94O { text-indent: 3em }

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

<P ID=svp94O>文本缩进3em</P>

关联选择符

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

P EM { background: yellow }

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

声明

属性

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

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

组合

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

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

color: red;

font-family: sans-serif }

继承

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

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

注解

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

/* COMMENTS CANNOT BE NESTED */

伪类和伪元素

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

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

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

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

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

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

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

定位锚伪类

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

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

A:link { color: red }

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

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

首行伪元素

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

P:first-line {

font-variant: small-caps;

font-weight: bold }

css后代选择器可以写几个?

css后代选择器可以写5个,本来css的后代选择器可以选择多个,但是层级越深,效率越低,所以最好写5个就行

css样式表的三种方式?

按照css样式书写的位置(或者引入的方式),CSS样式表可以分为以下三大类: 1、行内样式表(行内式)

行内样式就是使用style属性直接把CSS代码添加到HTML的标记中,即作为HTML标记的属性标记存在。

2、内部样式表(嵌入式)

内部样式表是把css样式写在<head>标签中,并用<style>标签去声明如果 CSS 样式被放置在网页文档外部的文件中,则称为外部样式表,一个 CSS 样式表文档就表示一个外部样式表。

3、外部样式表(链接式)

如果 CSS 样式被放置在网页文档外部的文件中,则称为外部样式表,一个 CSS 样式表文档就表示一个外部样式表。

实际上,外部样式表也就是一个文本文件,扩展名为.css。当把CSS样式代码复制到一个文本文件中后,另存为.css文件,则它就是一个外部样式表。

css样式语法?

css的样式语法是:

1、css规则由选择器和一条或多条声明两个部分构成;

2、选择器通常是需要改变样式的HTML元素;

3、每条声明由一个属性和一个值组成;

4、属性和属性值被冒号分隔开。css样式语法规则由两个主要的部分构成:选择器,以及一条或多条声明。

版权说明:
本网站凡注明“广州京杭 原创”的皆为本站原创文章,如需转载请注明出处!
本网转载皆注明出处,遵循行业规范,如发现作品内容版权或其它问题的,请与我们联系处理!
欢迎扫描右侧微信二维码与我们联系。
·上一条:css选择器类型怎么定,css超链接link怎么用_CSS学习 | ·下一条:常用于全局设置的css选择器是,css3哪年出现_CSS学习
同类资讯

Copyright © 广州京杭网络科技有限公司 2005-2024 版权所有    粤ICP备16019765号 

广州京杭网络科技有限公司 版权所有