码迷,mamicode.com
首页 > Web开发 > 详细

2.2 CSS3基本语法 + 选择器

时间:2015-02-10 18:10:13      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:

1. 基本语法

  selector1, selector2{

    property1 : value1;

    property2 : value2;

  }

  如果value大于1个单词(如font-family的值可能是sans serif), 需要加上引号(font-family:"sans serif")

 

2. 高级语法

  继承效果

 

3. 派生选择器

  依据 元素位置的 上下文关系 定义样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <p>
        <strong>派生选择</strong>
    </p>
</body>
</html>
//派生选择 标签从外到内用空格隔开
p strong{
    color: aqua;
}

 

4. id 选择器

  为标有 id 的元素 指定样式, 以 # 来定义

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <p id="pid">
        <strong>派生选择</strong>
    </p>
</body>
</html>
//id选择器用#表示, 上下文位置又是派生选择器, 两者一起使用
#pid strong{
    color: aqua;
}

 

4. 类选择器

  用.来表示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <p class="pclass">
        <strong>派生选择</strong>
    </p>
</body>
</html>
//类选择 和 派生选择 结合使用
.pclass strong{
    color: aqua;
}

 

5. 属性选择器

   

 

  

2.2 CSS3基本语法 + 选择器

标签:

原文地址:http://www.cnblogs.com/iMirror/p/4284323.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!