第三阶段 03_JavaWeb基础_Css

CSS介绍

1.什么是CSS?

  CSS(Cascading Style Sheet,层叠样式表)是由W3C的CSS工作组创建和维护的。。。。。。想要了解CSS的介绍内容,自行百度。主要功能就是让HTML页面展示的更加美观。

 

2.CSS的优点

  1.表现和内容分离

     2.易于维护和改版

     3.缩减页面代码,提高页码的浏览速度

   4.结构清晰,容易被搜索引擎搜索到

 

3.CSS的注释

  /*    */  中间存放被注释的内容

 

4.CSS的使用

   A:内联样式格式:<标签 sytle="属性:属性值; 属性:属性值...">

     例:<p style="font-size:18px; color:red">

    B:内部样式表:

     (1)内部样式表格式

      <style type="text/css">

        选择符1{属性:属性值;属性:属性值....}

        选择符2{属性:属性值;属性:属性值....}

         ......

      </style>

    (2)组合选择符的格式

     <style type="text/css">

           选择符1,选择符2,....,{属性:属性值;属性:属性值....}

        </style>

   C:链入外部样式表

      (1)<link>标签链接样式表文件

       <link rel="stylesheet" href="外部样式表文件名.css" type="text/css">  

       (2)import

       <style type="text/css">

        @import url("外部样式表的文件名1.css");

        ......

      </style>

5.CSS的选择器

  要想将CSS样式应用用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式的样式规则部分称位选择器

  (1)元素选择器

    标记选择器是指用HTML标记名称作为选择器,按标志记名称分类,格式如下

    标记名{属性1:属性值;属性2;属性值;}

    例:

      h1{

        color:red;

        font-size:100px;

     }

  (2)id选择器

     id选择器使用"#"进行标识,后面紧跟id名,其基本语句如下:

         #id{属性1:属性值;属性2:属性值}

    例:

     <style type="text/css">

      #demo1{

        color:red;

      }

     </style>

     <h1 id="demo1">HelloWorld</h1>  

  (3)类选择器

      类选择器使用"."(英文点号)进行标识,后面紧跟类名,格式如下:

             .类名{属性1:属性值;属性2:属性值}

     例:

      .myClass{

        font-size:100px;

      }

     <h1 class="myClass">HelloWorld</h1>

    (4)属性选择器

      在标签后使用中括号标记,格式如下:

            标签名[标签属性="标签属性值"]{属性1:属性值}

    例:

      <style>

        input[type="text"]{

          background-color:yellow;

        }

      </style>

   (5)包含选择器

      包含选择器,两个标签之间使用空格,给指定父标签的后代设置样式,格式如下:

        父标签 后代标签{属性1:属性值;.....}

     例:

       <style>

          #di div{

            color:red;

          }

       </style> 

 

总结: 

   主要讲解了什么是CSS,CSS的使用,以及CSS的选择器,常用的是前3个,后2个了解即可,写的不是很好,希望谅解,下一篇博客讲解CSS的样式              

猜你喜欢

转载自www.cnblogs.com/BaiZe258/p/9224055.html