【前端】【html/css】前端学习之路(一):CSS选择器的类别

CSS选择器的类别

1.标签选择器

(1)基本格式

标签名 {

        属性1:属性值1;  属性2:属性值2;  属性3:属性值3; 

or

元素名{

        属性1:属性值1;  属性2:属性值2;   属性3:属性值3;

}

(2)示例

 
 
    <style>
        h1{
            font-size: 20px;
            color: red;
            font-weight: normal;
        }
    </style>
<h1>The violent delights have violent ends</h1>

2.类选择器

 (1)基本格式

  .类名{

        属性1:属性值1;   属性2:属性值2;   属性3:属性值3; 

}

    类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

注意:

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器。

3.不要纯数字、中文等命名, 尽量使用英文字母来表示。


(2)示例

    <style>
        .test{
            font-size: 10px;
            color: pink;
            font-weight: bold;
        }
    </style>
<h2 class="test">The violent delights have violent ends</h2>

    多类名可以叠加,如:

<h2 class="test test2">The violent delights have violent ends</h2>

3.id选择器

(1)基本格式

#id名{

        属性1:属性值1;   属性2:属性值2;  属性3:属性值3; 

 }

    元素的id值是唯一的,只能对应于文档中某一个具体的元素。

   与类选择器相比,用法虽然相似,但是id选择器只能使用一次,不能多次重复,而类选择器则可以在多个表单控件上多次使用。 

(2)示例

    <style>
        #test{
            font-size: 30px;
            color: green;
            font-weight: bold;
        }
    </style>
<h2 id="test">The violent delights have violent ends</h2>

4.通配符选择器

(1)基本格式

    所有选择器中作用范围最广的,能匹配页面中所有的元素。

* { 

    属性1:属性值1;   属性2:属性值2;   属性3:属性值3; 

 }

    但是在真正的编程中比较少用。

(2)示例

    <style>
        *{
            margin: 0;                    /* 定义外边距*/
            padding: 0;                   /* 定义内边距*/
        }
    </style>
<h1>The violent delights have violent ends</h1>

<h2 class="test">The violent delights have violent ends</h2>

<h2 id="test">The violent delights have violent ends</h2>

<h2 >The violent delights have violent ends</h2>





猜你喜欢

转载自blog.csdn.net/yongqianbao4519/article/details/80734496