6.div+css基础学习一 引用样式和选择器的使用

1、引用样式表

层叠样式表 Cascading Style Sheets 简称 css


CSS百度百科：https://baike.baidu.com/item/CSS/5457?fromtitle=%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8&fromid=524980


如何使用样式：
    外部样式表：
    链接式：<link rel="stylesheet" type="text/css" href="mystyle.css">
    导入式：import 导入样式：
            <style type="text/css">
                       @import url(my.css);
            </style>


    内部样式表：没行结束都使用分号、需要使用<style>双标签括起来
    .div1{ 
        background: red;
        width: 100px;
        height: 100px;
        color: blue;
    }

    行内样式表：
    <p style="color: red; margin-left: 20px">
        This is a paragraph
    </p>


样式表的基础语法：h1{ color:red;font-size:14px;}
//h1是选择器 color是属性 red是值
//用花括号包围声明

2、选择器的使用

常用的选择器：类选择器、元素选择器、ID选择器、* 通配符选择器、群组选择器、后代选择器


类选择器：
        .demo1{ 
            color:red;
        }
        <div class="demo1">
            demo1
        </div>


元素选择器：
        p{ 
            color: red;
        }


ID选择器：名字唯一的
        #demo2{ 
            color:grey;
        }


* 通配符选择器：
        *{ 
            margin: 0px;
            padding: 0px;
        }

            
群组选择器：
        .div1,.div2{ 
            width: 400px;
            height: 400px;
        }
            
        .div1{ 
            background: red;
        }
        .div2{ 
            background: blue;
        }
    
                    
后代选择器：
        .ul1 li{ 
            color: red;
        }

2021.08.03 (0:26:47)