CSS基本语法20200526

基本语法：

    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样的样式} */
        p{
            color: red;
            /* font-size是字体大小，px为像素 */
            font-size: 20px;
        }

画3个不同颜色盒子案例：

    <style>
        .box{
            width: 100px;
            height: 100px;
        }
        .red{
            /* 背景颜色 */
            background-color: red;
        }
        .green{
            /* 背景颜色 */
            background-color: green;
        }
    </style>

    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>

1.多类名使用

    <!-- 类名间必须用空格隔开 -->
    <div class="red green"></div>

2.ID选择器
用#表示，只允许1个人调用

    <style>
        #yellow{
            color: yellow;
        }
    </style>
    <div id="yellow">MJ</div>

文本属性：

    <style>
        #yellow{
            /* 颜色：color */
            color: rgb(80, 28, 28);
            /* 对齐方式：text-align */
           text-align: left;
           /* 装饰文本：text-decoration ,underline下划线。overline上划线。line-through删除线。none取消线类型*/
           text-decoration: underline;
           /* 首行缩进：text-indent，用em相对单位 */
           text-indent: 2em;
           /* 行间距：line-height */
           line-height: 2em;
        }
    </style>

外部样式表：

调试工具

Emment语法
1.快速生成HTML语法

快速格式化代码

后代选择器


子选择器


并集选择器


链接伪类选择器

基本使用：

    <style>
        /* a:link是未被访问 */
        a:link {
            color: black;
            text-decoration: none;
        }

        /* a:visited是访问过的链接 */
        a:visited {
            color: yellow;
        }

        /* a:hover是鼠标经过后的链接 */
        a:hover {
            color: skyblue;
        }

        /* a:active是鼠标按下后未弹起的链接 */
        a:active {
            color: springgreen;
        }
    </style>

focus伪类选择器

    <style>
        input:focus {
            background-color: skyblue;
        }
    </style>
    <input type="text">
    <input type="text">
    <input type="text">

106