Heim > Web-Frontend > HTML-Tutorial > CSS的三种选择器_html/css_WEB-ITnose

CSS的三种选择器_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:54:07
Original
993 Leute haben es durchsucht

标签选择器

标签选择器其实就是html代码中的标签。如右侧代码编辑器中的、

CSS的三种选择器_html/css_WEB-ITnose。例如下面代码:

p{font-size:12px;line-height:1.6em;}
Nach dem Login kopieren

上面的css样式代码的作用:为p标签设置12px字号,行间距设置1.6em的样式。

类选择器

类选择器在css样式编码中是最常用到的,如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。

语法:

<strong>.</strong>类选器名称{css样式代码;}
Nach dem Login kopieren

注意:

1、英文圆点开头

2、其中类选器名称可以任意起名(但不要起中文噢)

使用方法:

第一步:使用合适的标签把要修饰的内容标记起来,如下:

<span>胆小如鼠</span>
Nach dem Login kopieren

第二步:使用class="类选择器名称"为标签设置一个类,如下:

<span <strong>class="stress"</strong>>胆小如鼠</span>
Nach dem Login kopieren

第三步:设置类选器css样式,如下:

.stress{color:red;}/*<strong>类前面要加入一个英文圆点</strong>*/
Nach dem Login kopieren

ID选择器

在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:

1、为标签设置id="ID名称",而不是class="类名称"。

2、ID选择符的前面是井号(#)号,而不是英文圆点(.)

右侧代码编辑器中就是一个ID选择符的完整实例。


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage