css-1,css的三種引入方式基本選擇器

時間 2019-11-16

標籤 css 三種引入方式基本選擇器欄目 CSS 简体版

原文原文鏈接

<!--
    （1）CSS 層疊樣式表
            做用：修飾網頁結構


    （2）css的三種引入方式
            權重： 優先級高 權重大  誰在頁面誰的權重大
            - 行內樣式
                注意：行內樣式的優先級是最高的
            - 內接樣式
            - 外接樣式

    （3）基本選擇器
         id選擇器 #
                選中的是特性 惟一的，不能重複  （與js有關係）
         標籤選擇器
                選中的是頁面中共性的標籤
         類選擇器  .
                選中的也是頁面中共性的標籤，類名能夠有多個
         通配符選擇器
                一般是對頁面進行重置樣式表

    border: 1px solid #e0e0e0                   設置input的邊框顏色和寬度
    <a href="javascript:void(0);">百度一下</a>  去除a 標籤的下劃線
    text-decoration: underline;                 普通文字加下劃線
    cursor: pointer;                            顯示小手的狀態
-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css三種引入方式 和四種基本選擇器</title>
    <!-- 外接樣式 -->
    <link rel="stylesheet" href="./index.css">

    <!--內接樣式-->
    <style type="text/css">
        /*內接樣式*/

        /*1 選擇器  選中的是 ‘共性’ */
        span{
            color: green;
            font-size: 30px;
        }
        /*組合選擇器*/
        ul,ol{
            list-style: none;
        }

        /*2 類選擇器  .類名  選中的也是共性 能夠有多個*/
        .active{
            color:blue
            font-size: 30px;
        }

        /*3.id選擇器  選中的是‘特性’ # id是惟一的*/
        #p1{
            color: green;
        }

        /*4. 通配符選擇器 * 在之後工做中不要用這個  */

        /*一開始佈局頁面若是寫css,必定要重置*/

        /*  將全部的邊界空隙都設置爲 不空格
        *{
            padding: 0;
            margin: 0;

        }
        */
        a{
                /*清除a標籤的下劃線*/
            text-decoration: none;
        }
        .baidu{
            color: blue;
            /*加下劃線*/
            text-decoration: underline;
            /*顯示小手的狀態*/
            cursor: pointer;
        }
        input{
            border: none;
            width: 400px;
            height: 40px;
            border: 1px solid #e0e0e0;
            font-size: 22px;
        }


    </style>

    <!--引入js文件-->
    <!--js文件中的內容 ：  alert(22222)    網頁提示;-->
    <script type="text/javascript" src="./javascript/index.js"></script>
</head>
<body>
    <!-- 行內樣式 的優先級是最高最高的 -->
    <p style="color: red; font-size: 30px;">行內樣式</p>
    <span style="color: purple;">行內樣式2</span>

    <p id="p1">p1的id</p>
    <p id="p2">p2的id</p>

    <ul>
        <li class="active">
            王先生
        </li>
    </ul>
    <!--a 標籤的下劃線被去掉了  javascript:void(0); 點擊不變化正常是錨點點擊刷新-->
    <a href="javascript:void(0);">百度一下</a>
    <span class="baidu">百度一下</span>
    <input type="text">



</body>
</html>