定义CSS样式

1,HTML标记定义

<p>...</p>

p{属性:属性值;属性1:属性值1}

p可以叫做选择器,定义那个标记中的内容执行其中的样式

一个选择器可以控制若干个样式属性,他们之间需要用英语的“;”隔开,最后一个可以不应加“;”

2,Class定义

<p class=“p”>...</p>

class 定义是以“.”开始

.p{属性:属性值;属性1:属性值1}

3,ID定义

<p id=“p”>...</p>

ID 定义是以“.”开始

#p{属性:属性值;属性1:属性值1}

4,优先级的问题:

  a,ID>Class>HTML

  b,同级时选择离元素最近的一个的,如:#p{color:red},#p{color:#f60},执行颜色为#f60的

 

5,组合选择器(同时控制多个元素)

h1,h2,h3,h4{color: red}

选择器组合可以使用“;”隔开

6,伪元素选择器

  a:link 正常连接的样式

  b:hover 鼠标放上去的样式

  c:active  选择连接时的样式

  d:visited  已经访问过的连接的样式

 

 

eg:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>定义CSS样式</title>

    <style type="text/css">

        /*p{

            font-size: small;

            color: green;

        }

        .p{color: red;font-size: 28px}

        .p p{color: green}*/

        div{color: lavender}

        .p{color: green}

        #pp{color: red}

        h1,h2,h3,h4{color: red}

        a:link{color: red}

        a:hover{color: green}

        a:active{color: darkslategray}

        a:visited{color: yellow}

    </style>

</head>

<body style="background-color: lavender">

    <h1>定义CSS样式</h1>

    <h2>定义CSS样式</h2>

    <h3>定义CSS样式</h3>

    <h4>定义CSS样式</h4>

    <div class="p" id="pp">

        <p>定义CSS样式</p>

        定义CSS样式定义CSS样式定义CSS样式

    </div>

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

 

</body>

</html>

 

posted @ 2017-11-21 09:44  pylzp  阅读(693)  评论(0编辑  收藏  举报