我的笔记之——CSS的定义、基本语法及选择器的使用

一、CSS的定义

        1、什么是css

               Cascading Style Sheet

              层叠样式表

              级联样式表

              样式表

         2、作用：

                  实现了内容和表现的分离

                  提高了代码的可重用性和可维护性

 

二、css样式表的使用方式

        使用方式共分三种，使用任何一种都可以更改页面的样式。

       1、内联方式

             内联样式： 将css样式定义在HTML的标签中

             特点：不通用，只能定义某一标签的单独样式。

      2、内部样式表

            将一系列样式定义在HTML的<head>中

            特点：当前网页任何一个标签都可以使用，体现出可重用性。

      3、外部样式表

           将样式定义在外部的css文件中，可以由任何一个页面进行样式表的引用。

           特点：真正意义的实现了样式表的可重用性

 

三、内联方式的css

       定义在HTML标签中的style属性里

      <h2 style="样式规则"></h2>

     css的语法：

               样式规则：属性名称：属性值

                                          color:red

               多个规则之间用;进行区分

                background-color:blue;color:red;

 

四、内部样式表

        样式内容出现在<head>中的<style>中

       <head>

 <title></title>

 <style>

      </style>

     </head>

      样式组成：选择器和样式声明

     选择器：决定哪些元素能够使用定义好的规则

     样式声明：由一对大括号包围着的样式规则

     选择器

     {

      /*样式规则*/

属性名称：属性值;

属性名称：属性值;

      }

 

五、外部样式表

      step1：创建一个文件以css为后缀

      step2:在文件中写与代码相关的选择器

      step3:在页面中对css文件进行引用

 

<head>

<link rel="stylesheet" type="text/css" href="引入样式表的地址"/>

<style>

@import "css/style.css";

/*其他样式定义*/

</style>

</head>

　　

 

六、css样式表特征

      1、继承性

            大部分的样式属性是可以被继承的

         <body>

              <p></p>

         </body>

     2、层叠性

         可以为一个标签定义多个样式表

    3、优先级

         样式定义冲突时，会根据样式规则的优先级进行应用样式

         级别最高：内联样式

         其次：内部样式表和外部样式表，就近原则

    4、调整优先级

         !important

         语法：

         选择器{属性：属性值 !important;}

 

七、选择器

         规定了哪些元素能够使用定义好的样式

       1、通用选择器

      表示：*

      可以与任何一个元素匹配

      多数用在设置网页整体的默认样式

      *{

       font-size:12px;

       font-family:"Microsoft Yahei;"

      }

　　

     2、元素选择器

      由HTML元素名称作为选择器

      作用：用于修改当前选择器所对应的元素的默认样式

      表示：元素名称

     

p
{
font-size:12px;
}
div
{
color:red;
}

    3、类选择器

      语法：.className

      注意：类的名字不能以数字开始

      使用：能够附带class属性的元素都能使用类选择器，将元素的class属性设置为类名即可

      一个标签也可以同时引入多个类

      

<p class="important solid"></p>

　　

   类选择器和元素选择器结合使用：

                  能够实现对某种元素中不同样式的细分控制。又称为“分类选择器”

                  语法：元素选择器.类选择器{}

                               p.important{}

 

      4、id选择器

           特点：作用于指定id属性值得元素上

           语法：#idname{}

          #<head>{...}

             <div id="head"></div>

         id属性：

         1、标识元素的唯一的值

         2、引用样式表中的id样式

  

     5、群组选择器

           选择器的声明是以逗号隔开的选择器列表

           作用：将相同的规则用于多个元素中

           语法：选择器1，选择器2...{}

 

     6、后代选择器

<div>

  <span>

    <span><span>

  </span>

</div>

　作用：根据元素的位置关系，找到元素，然后改掉样式

 

     7、子代选择器

           子代：只描述父子关系的，标签嵌套也局限于父子关系的嵌套

     

   <fieldset>
     <span class="s1"><span>
        <div>
            <span class="s2"></span>

      </div>
   </fieldset>

　　

       span.s1是fieldset的子代元素

       span.s2是div的子代元素

       span.s2是fieldset的后代元素

       语法：

              选择器1>选择器2{}

              fieldset>span{}

              fieldset>.s1{}

 

     8、伪类选择器

          作用：为一些选择器添加特殊的效果，多数表示的是一个元素（选择器）的不同状态

         语法：

                   通过  ：作用结合符

                   选择器：伪类选择器

       伪类的分类：

          链接伪类

   动态伪类

   目标伪类

   元素状态伪类

   结构伪类

   否定伪类

 

链接伪类：

                    ：link尚未访问过的链接

                    ：visited:访问过的连接状态

 a:link{}

 a:visited{]

动态伪类：

  ：hover 鼠标悬停在元素上的状态

  ：active 元素被激活时的状态

  ：focus 元素在获取焦点时的状态

 

  需要掌握：

   :link

   :visited

   :hover

   :active

 

    9、选择器的优先级

 <div id="d1" class="red"></div>

 div{color:blue;}

 #d1{color:red;}

 .red{color:yellow;}

 内联>ID>类（伪类）>元素

 

    10、尺寸

             在HTML中哪些元素适合使用尺寸属性

             1、所有的块级元素

                 div h1 p oi ul

             2、大部分行内元素不适合使用尺寸属性span

             3、存在width与height属性的元素img，table...

 

    11、border:边框

            方向：left,right,top,bottom

           大小：width

           样式：style

           颜色：color

 

    12、边框阴影

             box-shadow:向方框添加阴影

             box-shadow:h-shadow v-shadow blur spread color inset

            【 h-shadow:必选，水平阴影偏移距离

                  v-shadow:必选，垂直阴影偏移距离

                  blur:可选，模糊程度

                  spread:可选，阴影尺寸

                  color：可选阴影颜色

                   inset：可选，将外部阴影改成内部阴影】

   

     13、图片边框

     由图片作为元素的边框的显示效果

     border-image:src width repeat

     repeat:

        repeat:平铺

        round:铺满

       stretch:拉伸

  border-image-source:图片的路径

  border-image-source:url(img/aa.jpg);

  border-image-width:图片边框宽度

  border-image-repeat:边框平铺  repeat，round，stretch

   

     14、轮廓

              轮廓（outline）是绘制于元素周围的一条线，在边框的外围

             语法：

               outline：color  style width;

               outline-color:

               outline-style:

               outline-width:

posted @ 2018-05-03 14:30  Cristina_Guan  阅读(1035)  评论(0)  编辑  收藏  举报