zoukankan      html  css  js  c++  java
  • 前端开发之CSS入门篇

    一、CSS介绍和语法

    二、CSS引入方式

    三、基本选择器

    四、高级选择器

    五、伪类选择器

    六、伪元素选择器

    1️⃣  CSS介绍和语法

      1、 CSS的介绍

      (1)为什么需要CSS?

      使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,
    我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,
    并且修改的时候需要逐个修改,费心费力。而此时CSS就出现了。
      CSS的出现解决了以下问题:
        首先,将HTML页面的内容与样式的分离;其次,提高了Web开发的效率。

      (2)什么是CSS?
      CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中。
    也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
      
      (3)CSS的优势
        一是内容与表现分离;二事网页的表现统一,容易修改;三是丰富的样式,使页面布局更加灵活;
    四是减少网页的代码;五是运用独立页面的CSS,有利于网页被搜索引擎收录。

      (4)如何使用CSS?
      通常会把样式规则的内容都保存在CSS文件中,此时该CSS文件被称为外部样式表,然后在HTML文件中
    通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件,并按照该
    文件中的样式规则渲染HTML文件。

    2、CSS语法
      (1)CSS基础语法
        CSS语法分为两部分:
        选择器和声明
        声明由属性和值组成,多个声明之间用分号隔开。
          
    语法:
        选择器{
                声明1;
                声明2;
                声明3;   
    }
    
      例如:
                h2{
                    color:green;
                    font-size:20px;
                }    

      (2)代码注释

        方法:/*代码注释写在这里*/

    2️⃣  CSS引入方式

      网页中引入CSS样式有三种: 

        1、内联样式
        2、行内样式表
        3、外部样式表
            ①链入式
            ②导入式

      (1)内嵌方式

        style 标签

        例如:
        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css的引入方式1</title>
    <!--CSS引入的方式一--> <style> h2{ color:green; /*这是注释*/ font-size: 20px; } </style> </head> <body> <div> <h2>这是二号标题</h2> </div> </body> </html>

      (2)行内样式

      示例如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css的引入方式2</title>
    </head>
    <body>
        <div>
            <p style="font-size: 30px;color:red">这是一个段落标签</p>
        </div>
    </body>
    </html>

      (3)外联样式表--链接式

        link 标签

        例如:index.css为css样式表文件

        index.css文件如下

        p{

          color:pink;

          font-size:30px;

        }

        然后在HTML文件中通过link标签引入,语法:<link rel="stylesheet" type="text/css" href="index.css"/>

        示例如下:

     <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>css_1</title>
            <link rel="stylesheet" type="text/css" href="index.css"/>
        </head>
        <body>
            <div>
                <p >这是一个段落标签</p>
            </div>
        </body>
        </html>
    View Code

      (4)外联样式表--@import url()方式 导入式

        同样导入index.css

        语法如下:   

     <style>
               @import url(index.css);
           </style>
     注意:@import url() 必须写在文件最开始的位置

        示例如下:

     <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>css_1</title>
                <style>
                    @import "index.css";
                </style>
            </head>
            <body>
                <div>
                    <p >这是一个段落标签</p>
                </div>
            </body>
            </html>
    View Code

      链接式与导入式的区别:  

         1、<link/>标签属于XHTML,@import是属性css2.1
         2、使用<link/>链接的css文件先加载到网页当中,再进行编译显示
         3、使用@import导入的css文件,客户端显示HTML结构,再把CSS文件加载到网页当中
         4、@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的

    3️⃣  基本选择器

      1、何为选择器?

       在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,

    某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,

    找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。

      2、基础选择器的种类

      (1)标签选择器

      (2)ID选择器

      (3)类选择器

      (4)通用选择器

        2.1 标签选择器

          顾名思义,标签选择器就是通过标签名来选择元素。

        示例:   

    <style>  
    p{
             color:red;
             font-size:30px;
        }
    </style>
         表示将所有的p标签设置字体颜色为红色,字体大小为30像素。
    View Code

          2.2 ID选择器

          通过元素的ID值选择元素。

          语法:       

      <style>
             #select{
             color: gold;
             font-size: 30px;
                  }
     </style>

          示例:   

    <!DOCTYPE html>
                <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <title>css_1</title>
                        <style>
                            #select{
                                color:gold;
                                font-size: 30px;
                            }
                        </style>
                    </head>
                    <body>
                        <div id="select">
                            <p >这是一个段落标签</p>
                        </div>
                    </body>
                </html>
    View Code

        2.3  类选择器

          (1)所谓类就是class,.class与id非常相似,任何的标签都可以加类,类是可以重复的,我们要学会归类;

          (2)同一个标签中可以带有多个类,用空格隔开,有公共类的概念;

          (3)不要试图用一个类将我们的页面写完,这个标签可以携带多个类,设置共同的样式;

          (4)每个类要尽可能的小,有公共的概念,能够让更多的标签通过样式类选择元素。

          语法:

      .c1{
                    color:orange;
            }
    // 注意,类选择器名称前面用点“.”与其他选择器区分。

          示例:  

     <!DOCTYPE html>
            <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>css_1</title>
                    <style>
                        .c1{
                            color: orange;
                            font-size: 30px;
                        }
                    </style>
                </head>
                <body>
                    <div class="c1">
                        <p >这是一个段落标签</p>
                    </div>
                </body>
            </html>
    View Code

          

        2.4  通用选择器

        使用 “ * ”选择所有元素。

        语法:

          *{

          color:pink;

          }

        示例: 

      <!DOCTYPE html>
            <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>css_1</title>
                    <style>
                        *{
                            color: #1b9dec;
                        }
                    </style>
                </head>
                <body>
                    <div >
                        <p >这是一个段落标签</p>
                    </div>
                    <div>
                        <p>这是另一个段落标签</p>
                    </div>
                </body>
            </html>
    View Code

    4️⃣  高级选择器

      1、高级选择器的种类

        ① 并集选择器:多个选择器通过逗号连接而成,同时声明多个风格相同样式。

        ② 交集选择器:有两个选择器连接构成,选中二者范围的交集,两个选择器之间不能有空格,

              第一个必须是标签选择器。第二个必须是类选择器或者ID选择器。

        ③ 后代选择器:外层的选择器写在前面,内层的选择器写在后面,之间用空格分隔标签嵌套时,

              内层的标签称为标签的后代。

        ④ 子元素选择器:通过“>”连接在一起而成,仅作用于子元素。

        ⑤  属性选择器:选择带有指定属性的元素,或选取带有指定属性和值的元素。

        ⑥  毗邻选择器:找到所有紧挨在选择器后面的第一个选择器,设置属性。

        ⑦  弟弟选择器:找到所有紧挨在选择器后面同级的选择器,设置属性。

      2、并集选择器 

        <style>
            h3,h4{
                color:red;
                font-size: 20px;
            }
        </style>

       3、交集选择器(第一个必须是标签选择器,第二个必须是类选择器或者ID选择器。)

        ① 第一个为标签选择器,第二个为ID选择器。   

     <style>
            p{
                width: 120px;
                font-size: 25px;
            }
            #sect1{
                color:blue;
            }
            p#sect1{
                font-style: italic;
                font-family: "Adobe 宋体 Std L";
            }
        </style>

       ② 第一个为标签选择器,第二个为类选择器。   

      <style>
            h3{
                width: 200px;
               color:orange;
            }
            .sect2{
               font-size: 20px;
            }
            h3.sect2{
                background-color: #1b9dec;
            }
        </style>

      4、后代选择器

      示例:

     <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>css_1</title>
            <style>
                <!--方法1:-->
                div p{
                color: red;
                font-size: 30px;
                }
                <!--方法2:-->
                div div p{
                    color:green;
                }
                <!--方法3:-->
                .box div p{
                    color: blue;
                }
            </style>
        </head>
        <body>
              <div class="box">
                <div>
                    <p>后代选择器1</p>
                 </div>
                <p>后代选择器2</p>
              </div>
        </body>
    </html>
    View Code

      5、子代(子元素)选择器

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>css_1</title>
            <style>
                /*<!--子代选择器-->*/
            div>p{
                    font-size: 30px;
                color: #1da7ee;
                }
    
            </style>
        </head>
        <body>
            <div>
                <p>子代选择器</p>
            </div>
        </body>
    </html>
    View Code

      6、属性选择器

       (1)方式一:根据属性查找   

     <style type="text/css">
                label[for]{
                color:greenyellow;
                font-size: 20px;
                }
            input[type]{
                width: 80px;
                color:greenyellow;
            }
        </style>
            <!--属性选择器-->
        <div>
            <form action="">
                <p><label for="user">用户名:</label>
                    <input type="text" name="" id="user">
                </p>
                <p>
                    <label for="pwd">密码:</label>
                    <input type="password" name="" id="pwd">
                </p>
    
            </form>
        </div>
    View Code

       (2)方式二:根据属性和值查找 

       <style type="text/css">/* <!--查找所有属性与指定的属性值相同的元素-->*/
            label[for="pwd"]{
                    color: red;
                font-size: 25px;
    
                }/* <!-- ^ 查找找到所有属性对应的属性值以指定值开头的元素-->*/
            label[for^="VIP"]{
                color: darkred;
                font-size: 28px;
            }/* <!-- $ 表示查找所有属性对应的属性值以指定值结尾的元素-->*/
            label[for$="2"]{
                color:pink;
            }/*<!-- * 表示查找标签所有属性中包含(字符串包含)指定值的元素-->*/
            label[for*="user"]{
                color:#5bc0de;
                font-size: 18px;
            }/*<!--查找标签所有属性(有多个值或值以空格分割)中有一个值为指定值的元素-->*/
            input[type~="submit"]{
                color:royalblue;
                height: 25px;
            }
    
        </style>
        <div>
            <form action="">
                <p><label for="user">用户名:</label>
                    <input type="text" name="" id="user">
                </p>
                <p>
                    <label for="pwd">密码:</label>
                    <input type="password" name="" id="pwd">
                </p>
                <p>
                    <label for="VIP1">vip1等级</label>
                    <label for="VIP2">vip2等级</label>
                </p>
    
                <p>
                    <label for="user2">用户名2:</label>
                    <label for="user3">用户名3:</label>
                </p>
    
                <p>
                    <input type="text" name="" size="30px" placeholder="输入关键词">
                    <input type="submit" name="" width="3px" placeholder="搜索">
                </p>
    
            </form>
        </div>
    View Code

    5️⃣  伪类选择器

     <style type="text/css">
            /*<!--没有访问过的超链接a标签样式-->*/
            .test ul li.item1 a:link{
                color:orange;
            }
            /*<!--访问过的超链接a标签样式-->*/
            .test ul li.item2 a:visited{
                color: yellowgreen;
            }
            /*<!--鼠标悬停在元素上的应用样式-->*/
            .test ul li.item3 a:hover{
                color: #93fff3;
            }
            /*<!--鼠标点击瞬间的样式-->*/
            .test ul li.item4 a:active{
                color: #ffc2d9;
            }
            /*<!--input输入框获取焦点时样式-->*/
            .test ul li.item5 input:focus{
                outline: #b4ffc2;
                background-color: #dae3ff;
            }
    
            /*<!--选中任一一个(从0开始,但0表示什么都没选)-->*/
            .test ul li:nth-child(2){
                font-size: 8px;
                color:darkgray;
            }
            /*<!--n表示选中所有,0表示什么都没选-->*/
            .test ul li:nth-child(n){
                font-family: "Adobe 楷体 Std R";
                font-size: 30px;
            }
            /*<!--选中偶数-->*/
            .test ul li:nth-child(2n){
                font-size: 20px;
                }
            /*<!--选中奇数-->*/
            .text ul li:nth-child(2n-1){
                font-size: 30px;
            }
            /*<!--隔几换色-->*/
            .test ul li:nth-child(4n+1){
                /*<!--每隔3个换一种-->*/
                font-size: 40px;
                color: #fdffb5;
            }
        </style>
    
         <div class="test">
            <ul>
                <li class="item1">
                    <a href="#">没有访问过的超链接a标签样式</a>
                </li>
    
                <li class="item2">
                    <a href="#">访问过的超链接a标签样式</a>
                </li>
    
                <li class="item3">
                    <a href="#">鼠标悬停在元素上的应用样式</a>
                </li>
    
                <li class="item4">
                    <a href="#">鼠标点击瞬间的样式</a>
                </li>
    
                <li class="item5">
                    <input type="text" name="" placeholder="在此处输入">
                </li>
    
                <li class="item6">
                    <a href="#">我是倒数第二个</a>
                </li>
    
                <li class="item7">
                    <a href="#">我是最后一个</a>
                </li>
    
            </ul>
        </div>

      完整案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪类选择器(“爱恨原则love hate”)</title>
        <style type="text/css">
            /*<!--没有访问过的超链接a标签样式-->*/
            .test ul li.item1 a:link{
                color:orange;
            }
            /*<!--访问过的超链接a标签样式-->*/
            .test ul li.item2 a:visited{
                color: yellowgreen;
            }
            /*<!--鼠标悬停在元素上的应用样式-->*/
            .test ul li.item3 a:hover{
                color: #93fff3;
            }
            /*<!--鼠标点击瞬间的样式-->*/
            .test ul li.item4 a:active{
                color: #ffc2d9;
            }
            /*<!--input输入框获取焦点时样式-->*/
            .test ul li.item5 input:focus{
                outline: #b4ffc2;
                background-color: #dae3ff;
            }
            /*<!--选中第一个元素-->*/
            .test ul li:first-child{
                font-size: 25px;
                color:brown;
            }
            /*<!--选中最后一个元素-->*/
            .test ul li:last-child{
                font-size: 25px;
                color: #a195ff;
            }
            /*<!--选中任一一个(从0开始,但0表示什么都没选)-->*/
            .test ul li:nth-child(2){
                font-size: 8px;
                color:darkgray;
            }
            /*<!--n表示选中所有,0表示什么都没选-->*/
            .test ul li:nth-child(n){
                font-family: "Adobe 楷体 Std R";
                font-size: 30px;
            }
            /*<!--选中偶数-->*/
            .test ul li:nth-child(2n){
                font-size: 20px;
                }
            /*<!--选中奇数-->*/
            .text ul li:nth-child(2n-1){
                font-size: 30px;
            }
            /*<!--隔几换色-->*/
            .test ul li:nth-child(4n+1){
                /*<!--每隔3个换一种-->*/
                font-size: 40px;
                color: #fdffb5;
            }
        </style>
    </head>
    <body>
        <div class="test">
            <ul>
                <li class="item1">
                    <a href="#">没有访问过的超链接a标签样式</a>
                </li>
    
                <li class="item2">
                    <a href="#">访问过的超链接a标签样式</a>
                </li>
    
                <li class="item3">
                    <a href="#">鼠标悬停在元素上的应用样式</a>
                </li>
    
                <li class="item4">
                    <a href="#">鼠标点击瞬间的样式</a>
                </li>
    
                <li class="item5">
                    <input type="text" name="" placeholder="在此处输入">
                </li>
    
                <li class="item6">
                    <a href="#">我是倒数第二个</a>
                </li>
    
                <li class="item7">
                    <a href="#">我是最后一个</a>
                </li>
            </ul>
        </div>
    </body>
    </html>
    View Code

    6️⃣  伪元素选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style type="text/css">
            /*<!--为文本的首字母设置特殊样式-->*/
            p:first-letter{
                color: #6f42c1;
                font-size: 20px;
            }
            h3:first-letter{
                color:yellowgreen;
                font-size: 25px;
            }
            /*!*<!--在元素的内容前面插入新内容(注意,要配合content属性使用)-->*!*/
            p:before{
                content: "hello";
                font-family: "Adobe 宋体 Std L";
            }
            h3:before{
                content: "world";
                font-family: "Microsoft YaHei UI";
            }
            /*!*<!--在元素的内容后面插入新内容(注意,要配合content属性使用),使用很频繁-->*!*/
            p:after{
                content: "every";
                font-size: 30px;
            }
            h3:after{
                content: "one";
                font-size: 30px;
            }
            span{
                font-size: 50px;
                color:cornflowerblue;
            }
        </style>
    </head>
    <body>
        <!--<div>-->
            <!--<p>这是伪元素选择器</p>-->
            <!--<h3>这是一个段落</h3>-->
        <!--</div>-->
        <div>
            文档文档           文档文档<span>文档</span>文档文档文档文档文档文档
            &nbsp;&nbsp;&nbsp;文档文档文档文档文档文档
            <img src="fav.ico" alt=""><img src="fav.ico" alt=""><img src="fav.ico" alt="">
            <img src="fav.ico" alt="">
            <img src="fav.ico" alt="">
        </div>
    </body>
    </html>
  • 相关阅读:
    docker创建tomcat容器
    【转载】张一鸣:为什么 BAT 挖不走我们的人才?
    Elastic认证考试,请先看这一篇
    vs code 初始化vue项目框架
    Idea集成git常用命令
    pxc搭建mysql集群
    mysql无限级分类
    Java面试题大全
    SpringMVC和Spring
    Redis高级特性
  • 原文地址:https://www.cnblogs.com/schut/p/9279054.html
Copyright © 2011-2022 走看看