您的位置：首页 > Web前端 > CSS

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

2017-03-06 21:34 435 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航