CSS基础(三)--样式及选择器

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hudie_1993/article/details/82800379

1、 样式分类

           在CSS的样式中,存在内联式、嵌入式以及外部式三种引用方式。

                  内联式:<p style="color:red;"></p>

                  嵌入式:<head>

                                      <title>Lable标签的使用</title>

                                      <style type="text/css" media="screen">

                                                 p{

                                                             color:red;

                                                             font-size: 12px;

                                                     }

                                                .newStyle{

                                                            color:red;

                                                            font-size: 12px;

                                                               }

                                              #newStyle2{

                                                            color:red;

                                                            font-size: 12px;

                                                    }

                                 </style>

                              </head>

                                      这种方式表示将某个html或者JSP中的CSS样式统一放置在head标签中

                  外部式:单独创建一个css文件,然后作为外部文件引用到某个html文件中

                       例如:

                           <link rel="stylesheet" type="text/css" href="<c:url value="/resources/custom/css/extends.css" />" />

                           <link href="style.css" rel="stylesheet" type="text/css" />

   优先级:这3中样式存在着优先级,那就是内联式>嵌入式>外部式    秉承着就近原则

2、 选择器

       一般的CSS样式会有选择符+声明构成;所谓选择符指的就是选择器(选择器可分为标签选择器、类选择器以及ID选择器),例如需要对网页中的所有p标签作样式修改,那就会如下设置样式

                                  p{

                                       color:red;

                                   }

       从上可知,p就表示选择器,而{}中的内容就表示声明。另外声明中又包含属性和值,color表示属性,需要对p标记中的内容的颜色作设置,而值为red。

      (1) 标签选择器:用于定义网页内容中某个标签所属的样式,例如:p{color:red;}

                表示的就是将网页中所有标签为p的内容颜色定义为红色。

      (2) 类选择器:表示以圆点开头所定义的样式,这个样式可以用于html中任意一个标签内

              例如:

                    样式定义:.newStyle{font-size:12px;}

                   使用方式:<span classs="newStyle"></span>

     (3) ID选择器:表示以#号开头所定义的样式,这个样式同类选择其一样可以用于定义html中任意一个标签内的样式

            例如:

                      样式定义:#newStyle2{font-weight:bold;}

                      使用方式:<span id="newStyle2"></span>

     (4) 区别:类选择器和ID选择器比较

         A、类选择器可以在文档中使用多次,而ID选择器只能使用一次

      例如:

          <p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评<span id="stress2">我</span>。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。   </p>

         B、类选择器可以对同一个元素设置多个样式,但是ID选择器只能设置一个样式

   例如:

       .stress{     color:red; } .bigsize{     font-size:25px; } <p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>

总结:ID选择器类似于ID一样,表示一种唯一性,因此对于需要多种样式进行引用,比较适合使用类选择器

三者比较:ID选择器>类选择器>标签选择器

3、 补充

   (1)子选择器

      a、概念

        子选择器主要可以用于对已经设定样式的子元素再次设置样式

      b、使用方式

         通过‘>’号的形式
         

             .food{
                   font-size:12px;
                }

             .food>li{border:1px solid red;}

           <ul class="food">
                 <li>水果
                    <ul>
                      <li>香蕉</li>
                      <li>苹果</li>
                      <li>梨</li>
                    </ul>
                 </li>
                <li>蔬菜
                   <ul>
                      <li>白菜</li>
                      <li>油菜</li>
                      <li>卷心菜</li>
                   </ul>
                </li>
         </ul>

  呈现:

                                            

        含义:表示将"food"样式后的第一代子元素的样式的边框设置为红色(仅限于最靠近的子元素)

 (2) 包含选择器

     a、概念

           包含选择器一般指的是对于选择标签下的后辈元素

    b、使用方式

          通过空格的形式        

                  .first{
                        font-size:12px;
                      }

                  .first span{border:1px solid red;}
                   <ul class="first">
                        <li>水果
                           <ul>
                             <li>香蕉</li>
                             <li>苹果</li>
                             <li>梨</li>
                           </ul>
                        </li>
                      <li>蔬菜
                          <ul>
                            <li>白菜</li>
                            <li>油菜</li>
                            <li>卷心菜</li>
                          </ul>
                      </li>
                  </ul>

呈现:

                                                     

     含义:表示将"first"样式后的所有为li的后辈元素的样式的边框都设置为红色

  (3) 通用选择器

       a、 概念

                从字面上看,即表示可以适用于整个HTML中的样式

       b、使用方式

                *{color:red;}

(4) 伪类选择器

       a、 概念

           伪类选择器主要针对于HTML中不存在的标签(即标签的某种状态,例如a标签【鼠标滑过、鼠标点击等状态】)设置样式

       b、 使用方式

            a:hover{color:red;}

(5) 分组选择器

       a 、概念

                对于多个不同标签设置同样的样式

      b、 使用方式

                h1,span{color:red;}

4、 重要性【!important】

    在设置样式时,有时需要为某个样式设置最高权值,使用!important设置样式的权值,可以对同类型的样式设置更高的优先级。例如:

                   案例一

                           p{color:red;}

                           p{color:blue;}

                           <p>你们好!</p>

                   案例二

                           p{color:red !important;}

                           p{color:blue;}

                         <p>你们好!</p>

     讲解:按照正常的规则案例一中会根据就近原则,后面的样式会覆盖之前的样式,因此在界面上会显示蓝色的字体;

案例二中由于在前一个样式中添加!important,则对前一个样式增加了权值,且权值高于后者样式,因此在界面中会显示红色字体。

                  案例三

                         #Box div{

                               color:red;

                        }

                     .important_false{

                              color:blue;

                       }

                     .important_true{

                              color:blue !important;

                     }

         <div id="Box">

                <div class="important_false">这一行末使用important</div>

                <div class="important_true">这一行使用了important</div>

       </div>

讲解:首先需要明白一点是ID选择器的权值要高于类选择器,因此第一行字体一定会显示红色字体;第二行字体中的样式由于应用到了!important,因此即使ID选择器高于类选择器,但是!important的权值要高于ID选择器,所以第二行字体会显示蓝色字体。

5、 字体样式

  1.4.1 text-indent

    (1) 概念

         属性规定文本块中首行文本的缩进

    (2) 使用方式

        例如为p标签设置样式: .p{text-indent:2em;}

1.4.2 line-height

  (1) 概念

      属性规定文本块中行间距

(2) 使用方式

      例如为p标签设置样式:

            .p{line-height:2em;}

1.4.3 letter-spacing/word-spacing

  (1) 概念

      以上两个属性表示的是文字或者单词的间距

  (2) 使用方式

            <head>

                <title>!important的使用方式</title>

                 <style type="text/css">
                     .test1{letter-spacing:10px;}

                     .test2{word-spacing:20px;}
                </style>

          </head>
          <body>
              <p class="test2">你们好</p>
              <p class="test2">hello world!</p>
          </body>

截图如下:

强调:此处在使用letter-spacing属性是,对于中文间距以及字母间距,word-spacing仅仅针对于单词间的排版,对字母使用letter-spacing属性之后,截图如下

 

展开阅读全文

没有更多推荐了,返回首页