• 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>
  • 相关阅读:
    关于# define 的使用
    翻转课堂---案例1
    四则运算
    第一次随笔
    第一次随笔
    第一次随笔
    beta冲刺1
    BETA 版冲刺前准备
    Alpha 事后诸葛亮
    Alpha 答辩总结
  • 原文地址:https://www.cnblogs.com/Mr-wangxd/p/9664439.html
Copyright © 2020-2023  润新知