css-1,css的三种引入方式 基本选择器




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>

    
    
    <script type="text/javascript" src="./javascript/index.js">script>
head>
<body>
    
    <p style="color: red; font-size: 30px;">行内样式p>
    <span style="color: purple;">行内样式2span>

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

    <ul>
        <li class="active">
            王先生
        li>
    ul>
    
    <a href="javascript:void(0);">百度一下a>
    <span class="baidu">百度一下span>
    <input type="text">



body>
html>

 

转载于:https://www.cnblogs.com/Mr-wangxd/p/9664439.html

你可能感兴趣的:(css-1,css的三种引入方式 基本选择器)