HTML基础学习-12-CSSclassid控件样式定义

17-06-15 来源：[db:作者]
收藏我要投稿
HTML基础学习-12-CSS class id 控件样式定义
<!DOCTYPE html>
<html>
<!--
p{
标记选择器
}
//class形式样式，可以重复使用
.p{

}
//<p class="p">样式表段落</p>



class 形式定义 以   .p{属性:属性值;属性1:属性值1;}


                   .p p{属性:属性值;}多层次属性定义

    id选择器是唯一选择器，即不允许有相同id
id 形式定义  以  #开始
                #p{属性:属性值}
                #p p{属性:属性值;}


    优先级style定义样式问题

    id  >  class > html  对于同一个控件同时有三种定义的时候按照优先级最高为准



-->
<head>
<title>html5样式定义</title>
<meta charset="utf-8">
 <style type="text/css"
 >
    /*p{
        color:red;
        font-size:28px;
    }*/
    /*class 样式定义*/
    .p{
        color:green;
        font-size:28px;
     }
    /*单独控制在class属性为p下的子类的p的样式*/
    .pp p{
        color:red;
    }
    /*id样式定义*/
    #ppp{
        color:blue;
    }
    /*html样式定义*/
    .div{color:red}

    /*组合选择器  多个控件样式定义*/
    h1,h2,h3,h4,p{
    color:red;
    }

    /*伪类选择器  定义超链接*/
    <!-- 
    定义标签 a
    link 正常链接的 颜色
    hover 已经鼠标放上去 访问时候的连接颜色

    active  鼠标按下去的时候
    visited  访问过的颜色


    -->
    a:link{color:blue}
    a.hover{hover:green}
    a.active{color:red}
    a.visited{color:yellow}
 </style>
</head>

<body>

    <p class="p">样式表段落</p>
    <div class="pp">
        <p class="p">样式段落2</p>

    </div>

    <div id="ppp">
        <p>id选择器定义</p>

    </div>

     <div id="ppp" class="p">
        <p>优先级测试</p>

        <h1>1</h1>
        <h2>2</h2>
        <h3>3</h3>
        <h4>4</h4>

     </div>

     <a href="http://www.baidu.com">百度</a>


</body>

</html>
点击复制链接与好友分享!回本站首页