css-1,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>

 

posted on 2018-09-17 19:49  _AlexWang  阅读(255)  评论(0)    收藏  举报

导航