CSS3第一部分

一、简介

    是一个层叠级联样式表(Cascading Style Sheet)

    作用:美化网页

  优势:

    1、内容和表现分离

    2、网页结构表现统一、可以实现复用

    3、样式十分丰富

    4、可以单独使用css文件

    5、利用SEO,容易被搜索引擎收录

二、快速入门

语法:(每一个声明,最好使用分号结尾)
    选择器{
声明1;
声明2;
声明3;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范,<stype> 可以编写css代码
        每一个声明,最好使用分号结尾-->
    <!--语法
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
    <h1>我是标题</h1>
</body>
</html>

 三、CSS的导入方式

    1、行内样式

        在标签元素中

<h1 style="color: red">我是标题</h1>

    2、内部样式

        在head标签中   

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--,内部样式-->
    <style>
        h1{
            color: aqua;
        }
    </style>
</head>

    3、外部样式

        在head标签中,利用link标签引入外部的css样式文件

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

     它们的优先级:就近原则(谁离编写代码内容进,谁的优先级就越高)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--,内部样式-->
    <style>
        h1{
            color: aqua;
        }
    </style>
    <!--外部样式-->
    <link href="../css/style.css" rel="stylesheet">
</head>
<body>
    <!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
    <h1 style="color: red">我是标题</h1>
</body>
</html>

  拓展:外部样式的两种写法

      链接式:link

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

      导入式(是CSS2.1特有的):@import url(“css文件地址”)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import url("../css/style.css");
    </style>
</head>

   区别:

    1、link和import的语法结构不同,

    2、link是html标签,只能放入html源代码中使用

      import可以看作css样式,作用是引入css样式功能

    3、import在html使用时候需要<style type="text/css">标签,同时可以直接“@import url(css文件路径地址)”;

    本质上两个使用选择区别不大,但为了软件中编辑布局网页html代码,一般使用link比较多,也推荐使用link

四、CSS选择器

    作用:选择页面上的某一个或者某一个元素

  1、基本选择器

      优先级 :id>class>标签

     a、标签选择器  :会选择到页面上相同的标签元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--标签选择器
     会选择到页面上相同的标签元素-->
    <style>
        h1{
           /* color: yellow;或者*/
            color: #3aaa11; //设置字体颜色
        }
        p{
            font-size: 10px;  //字体大小
        }
    </style>
</head>
<body>

  <h1>我是标题</h1>
  <p>我是标题1</p>
  <h1>我是标题2</h1>
</body>
</html>

     b、类选择器(class)

        格式:.class的名称{ }

        好处:可以多个标签归类,是同一个class,可以复用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器
            格式:.class的名称{ }

          好处:k可以斗个标签归类,是同一个class,可以复用*/
        .text{
            color: aquamarine;

        }
        .title{
            color: #3aaa11;
        }
    </style>
</head>
<body>
    <h1 class="title">我是标题</h1>
    <h1 class="text">我是标题1</h1>
    <h1 class="title">我是标题2</h1>
    <p class="title">我是标题2</p>
</body>
</html>

     c、id选择器

       id必须保证全局唯一,不能重复

      格式 :#id名称{ }

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器:
             id必须保证全局唯一
            格式 :#id名称{}*/
        #t1{
            color: yellow;
        }
        .t2{
           color:orange;
        }
        h1{
            color: aqua;
        }
    </style>
</head>
<body>
    <h1 id="t1" >我是标题</h1>
    <h1 class="t2" >我是标题1</h1>
    <h1 class="t2">我是标题2</h1>
    <h1>我是标题2</h1>
</body>

   2、层次选择器

    a、后代选择器 (如:祖爷爷、爷爷、父亲、自己)

        在某个元素的后面

/*后代选择器*/

        body p{
            color: aquamarine;
        }

    b、子选择器   一代,儿子

 /*子选择器*/
        body >p{
            color: orange;
        }      

    c、相邻选择器(相邻兄弟选择器) 同辈      :只有一个,相邻(向下)

 /*相邻选择器(相邻兄弟选择器)
            只有一个,相邻(向下)*/
.active + p{ background: red; }

    d、通用选择器(通用兄弟选择器):当前选中的向下的所有兄弟元素

 /*通用选择器(通用兄弟选择器)
          当前选中的向下的所有兄弟元素
        */
        .active ~p{
            background: aqua;
        
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*后代选择器*/
       /* body p{
            color: aquamarine;
        }*/
        /*子选择器*/
        body >p{
            color: orange;
        }
        /*相邻选择器(相邻兄弟选择器)
            只有一个,相邻(向下)*/
        .active + p{
            background: red;
        }

        /*通用选择器(通用兄弟选择器)
          当前选中的向下的所有兄弟元素
        */
        .active ~p{
            background: aqua;
        }

    </style>
</head>
<body>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
    <p>p4</p>
    <ul>
        <li>
            <p>5</p>
        </li>
        <li>
            <p>6</p>
        </li>
        <li>
            <p>7</p>
        </li>
    </ul>
</body>
</html>

   3、伪类选择器

      伪类:条件

  /*ul第一个子元素*/
        ul li:first-child{
            background: aqua;
        }
/*ul最后一个子元素*/
        ul li:last-child{
            background: orange;
        }
 /*只选择p1 :定位到父元素,选择当前第一个元素
        选择当前p元素的父级元素,选择父级元素的第一个,并且是当前元素才生效
        */

        p:nth-child(1){
            background:yellowgreen;
        }
 /*选择父元素下p元素的第二个类型*/
        p:nth-of-type(2){
            background: yellow;
        }
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>

    <!--避免使用class,id选择器-->
    <style>
        /*ul第一个子元素*/
        ul li:first-child{
            background: aqua;
        }
        /*ul最后一个子元素*/
        ul li:last-child{
            background: orange;
        }
        /*只选择p1 :定位到父元素,选择当前第一个元素
        选择当前p元素的父级元素,选择父级元素的第一个,并且是当前元素才生效
        */

        p:nth-child(1){
            background:yellowgreen;
        }
        /*选择父元素下p元素的第二个类型*/
        p:nth-of-type(2){
            background: yellow;
        }

    </style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p4</p>
<ul>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>
</body>
</html>

CSS3第一部分

   4、属性选择器

          1、  id和class结合

       2、格式:标签名[选择器名]{      }

      3、= 绝对等于、*= 包含这个元素、^= 以这个开头、$= 以这个结尾

<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: yellowgreen;
            text-align: center;
            color: bisque;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*让存在id的属性的元素,选中
         格式:a[]{ }
         =绝对等于
         *=包含这个元素
         ^=以这个开头
         $= 以这个结尾
        */
        /*a[id]{
            background: yellow;
        }*/
        a[id=t1]{
            background: #ffffff;
        }
        /*class 中含有last的元素*/
        a[class *="last"]{
            background: orange;
        }
        /*选择href中以href开头的元素*/
        a[href ^=http]{
            background: blueviolet;
        }
        /*选择href中以png结尾的*/
        a[href$=png]{
            background: blue;
        }

    </style>
</head>
<body>
    <p class="demo">
        <a href="http://www.baidu.com"  class=" first title" id="t1">1</a>
        <a href="#" class="title1" target="_blank" title="text">2</a>
        <a href="images/123.html" class="title2">3</a>
        <a href="image/123.png" class="title2">4</a>
        <a href="image/123.jpg" class=" last title2">5</a>
        <a href="abc" class="title2">6</a>
        <a href="/abc/text.doc" class="last title">7</a>
    </p>

</body>
</html>

CSS3第一部分

 

 

 

      

 

CSS3第一部分

上一篇:微信小程序豆瓣电影项目的改造过程经验分享


下一篇:【GitHub】上传代码通用操作等(附下载单个文件夹或文件)