02-css的选择器

<html>
    <head>
        <meta charset="utf-8">
        <title>css的选择器</title>
        <!--
            css的选择器：
                标签选择器：
                    标签名{样式名1：样式值1；……}
                    作用：将当前网页内的所有该标签增加相同的样式
                id选择器：
                    #标签的id属性值{样式名1：样式值1；……}
                    作用：给某个指定的标签添加指定的样式
                类选择器：
                    .类选择器名{样式名1：样式值1；……}
                    作用：给不同的标签添加相同的样式
                全部选择选择器
                    *{样式名1：样式值1；……}
                    作用：选择所有的HTML标签，并 添加相同的样式
-----------------------------------------------------------------------------
                组合选择器：
                    选择器1，选择器2，……{样式名1：样式值1；……}
                    作用：解决不同的选择器之间重复样式的问题
                子标签选择器：
                    选择器1 子标签选择器{样式名1：样式值1;……}
                属性选择器：
                    标签名[属性名=属性值]{样式名1：样式值1;……}
                    作用：选择某标签指定具备某属性并且属性值为某属性值的标签
            css的使用过程：
                1、声明css代码域
                2、使用选择器选择要添加样式的标签
                    根据需求来。
                        使用*选择器来给整个页面添加基础样式
                        使用类选择器给不同的标签添加基础样式
                        使用标签选择器给某类标签添加基础样式
                        使用id、属性选择器、style属性声明方式给某个标签添加个性化样式。
                3、书写样式单
                    边框设置
                        border:solid 1px;
                    字体设置:
                        font-size:10px;设置字体大小
                        font-family:"黑体";(设置字体的格式)
                        font-weight：bold;设置字体加粗
                    字体颜色设置
                        color:颜色;
                    背景颜色设置
                        background-color:颜色;
                    背景图片设置
                        background-img:url(图片的相对路径);
                        background-repeate:no-repeate;设置图片不重复
                        bacground-size:cover;图片平铺整个页面
                    高和宽设置
                    浮动设置
                        float:left|right
                    行高设置
                        line-height:10;

                    
        --> 
        
        <!--声明css代码域-->
        <style type="text/css">
            /*标签选择器*/
            table{
                width:300px;
                height: 200px;
                border: solid 1px;
                background-color: red;
                
            }
            /*id选择器*/
            #t1{
                background-color: gray;
            }
            /*类选择器*/
            .common{
                color:red;
            }
            /*组合选择器*/
            .common,table{
                    background-color: blue;
                }
             /*子标签选择器*/
            ul li a{
                color:black;
            }   
             #p1 a{
                color: yellow;
            }

            
            
            
            
        </style>
        
        
        
        
    </head>
    <body>
        <h3>css的选择器</h3>
        <hr />

    </body>
</html>
02-css的选择器

推荐阅读更多精彩内容
