一、通用选择符的应用
通用选择符*,它的应用办法切实css里间接应用 *{属性名:值}
,在以后引入了该css的页面中,所有元素都会领有该款式属性和值。在理论开发中,通用选择符个别比拟少用!
二、标签选择器的应用
什么是标签选择器,简略点说就是间接用标签名来设置css款式,如下根本构造:
<html> <body> <div> <div> <p>这是第一段</p> </div> <div> <p>这是第一段</p> </div> </div></body></html>
如果咱们设置p元素的字体色彩为红色,那么所有p元素的字体将变成红色,大小将变成25像素。
p{ color:red; font-size:25px;}
上面咱们来给div元素设置属性,代码如下:
div{ width:100px; border:10px solid blue;}
这样一来,咱们将看到页面显示显示出三个宽度为100像素并且边框为10像素的蓝色长方形。
任何元素都能够设置本人的css属性,如果有多个同名元素,应用标签选择器将为所有同名元素设置雷同的属性!个别在我的项目开发中,咱们须要很审慎的抉择应用标签选择器。
三、id选择器
id选择器,应用形式为#id名{属性名:属性值},咱们来看下以下构造代码
<html><body> <div> <div> <p id="one">这是第一段</p> </div> <div> <p>这是第一段</p> </div> </div></body></html>
#one{ width:1000px; background:yellow; }
通过以上的属性设置,咱们将在页面看到变动。带有id="one"的p元素的宽度为1000像素,背景色彩为黄色。而没有带id="one"的p元素则没有变动。留神:在一个文档中,id名具备唯一性,只能有一个!
四、类选择器
类选择器,应用.csss名{属性名:值},咱们看看上面这个 构造代码
<div> <div class="two"></div> <div>这是没有class属性的<div> <div class="two">这是有属性的</div> </div>
通过css代码为这个构造增加款式
div{ width:300px; heigth:300px; border:1px solid red; } .two{ background:red; }
当初咱们会发现页面呈现了三个宽高为300像素的方框,然而第一个和第三个的背景色彩为红色。因为这两个有class="two",而第二个没有。