繁星CSS3之旅-CSS入门基础知识

CSS介绍

概述:CSS指层叠样式表，极大提高了工作效率（好处：使我们的UI看起来更加完美）。

CSS基础语法

语法：属性选择器{属性名:属性值}

selector{property:value}

例：

h1{color:red;font-size:14px;}

提醒：属性大于1个之后，属性之间用分号隔开，如果值大于1个单词，则需要加上引号：

p{font-family:"sans serif";}

CSS高级语法

1、选择器分组

h1,h2,h3,h4,h5,h6{color:red;}

2、继承

body{
    color:green;
}

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        h1,a{color: red;font-size:14px;}
        body{color:blue}
    </style>
</head>
<body>
    <h1>
        应用了样式表
    </h1>
    <a href="www.cowyun.com">这是一个a标签样式</a>
    <h2>
       这是h2标题
    </h2>
</body>
</html>

备注：根据上面例子可知，已定义的属性会选择自己属性选择器的属性值，未定义属性会继承body或者其他父类的属性值。

CSS派生选择器

1、派生选择器

 通过依据元素在其位置的上下文关系来定义样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        li strong{color: red;font-size:14px;}
        strong{color: blue}
    </style>
</head>
<body>
    <p><strong>p标签Hello</strong></p>
    <ul><li><strong>li标签Hello</strong></li>
    </ul>
</body>
</html>

备注：已经定义好的效果是不会被覆盖的，没有具体指定被我们当前的strong效果覆盖掉。这就是派生选择器的使用。

CSSid选择器

1、id选择器

id选择器可以为标有id的HTML元素指定特定的样式

id选择器以"#"定义

2、id选择器和派生选择器

目前比较常用的方式是id选择器常常用于建立派生选择器

例：

html文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p id="pid">Hello CSS<a href="http://www.cowyun.com">科沃云</a></p>
    <div id="divid">这是div<p>这是第一个div</p></div>
</body>
</html>

CSS文档

#pid{
    color: green;
}
#pid a{
    color:red;
}
#divid p{
    color: blue;
}

 

CSS类选择器

1、类选择器

类选择器以一点来显示

2、class也可以用作派生选择器

例：

HTML文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p class="pclass">这是一个class效果<a href="http://www.cowyun.com">科沃云</a></p>
    <div class="divclass">
    Hello Div
    <p>我爱你</p>
    </div>
</body>
</html>

CSS文档

.pclass{
    color: red
}
.divclass{
    color: blue
}
.pclass a{
    color: green
}
.divclass p{
    color: black
}

CSS属性选择器

 1、属性选择器

对带有指定属性的HTML元素设置样式

2、属性和值选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        [title]{
            color:blue;
        }
        [title=te]{
            color: red;
        }
    </style>
</head>
<body>
    <p title="t">属性选择器</p>
    <p title="te">属性和值选择器</p>
</body>
</html>

备注：属性选择器如果没有指定值，他的值怎么显示无所谓，但如果指定其值，必须按照其具体的值来生效，如果值变化将不再生效。注意：属性选择器在IE6或者更低的版本是不支持的。

posted @ 2017-03-06 21:34  Codelabs  阅读(268)  评论(0)  编辑  收藏  举报