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

时间 2019-12-07

标签繁星 css3 css 之旅入门基础知识栏目 CSS 繁體版

原文原文链接

CSS介绍css

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

CSS基础语法spa

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

selector{property:value}

例：htm

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

提醒：属性大于1个以后，属性之间用分号隔开，若是值大于1个单词，则须要加上引号：blog

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

CSS高级语法继承

一、选择器分组文档

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

二、继承it

body{
    color:green;
}

例：class

<!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派生选择器

一、派生选择器

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

<!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选择器

一、id选择器

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

id选择器以"#"定义

二、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类选择器

一、类选择器

类选择器以一点来显示

二、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属性选择器

一、属性选择器

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

二、属性和值选择器

<!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或者更低的版本是不支持的。