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

CSS基础学习笔记

2016-06-02 14:19 513 查看
初学CSS所以就以博客的形式记录下来，权当是个记事本了。

1.CSS语法

CSS规则由俩个主要部分构成：选择器，以及一条或多条声明

selector {declaration1;declaration2;… declarationN}

其中选择器通常是你需要改变的HTML元素，例如”p”或”h1”这些

每条声明由一个属性和一个值组成

其中属性(property)是希望您设置的样式属性。每个属性都有一个值。属性和值被冒号分开

selector {property: value}

具体实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
h1 {color: red}
p {color: green}
</style>
</head>
<body>
<h1>
我是red
</h1>
<p>
我是green
</p>

</body>
</html>


2.CSS高级用法

(1)选择器的分组

我们可以对选择器进行分组，这样被分组的选择器就可以分享相同的声明了。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素分组，所有标题元素都是红色

h1,h2,h3,h4,h5,h6{

color: red

}

具体实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
h1,h2,h3,h4,h5,h6 {color: red;text-align: center}
</style>
</head>
<body>
<h1>
标题1
</h1>
<h2>
标题2
</h2>
<h3>
标题3
</h3>

</body>
</html>


(2)派生选择器

派生选择器允许我们根据文档的上下文来确定某个标签的样式。通过合理的使用派生选择器，我们可以使HTML页面变的更加整洁

假设我们希望链表中的strong元素变为红色

样式如下

li strong {

color: red

}

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
li strong {color: red}
</style>
</head>
<body>

<ul>
<li><strong>我是红色</strong></li>
<li>我是正常</li>
</ul>

</body>
</html>


(3)id选择器

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

id选择器以#来定义

下面的俩个id选择器，第一个可以定义元素颜色为红色，第二个定义元素为绿色

/#red {color: red;}

/#green {color: green}

makedown打不出’#’所以我在前面加了个’/’

具体实例演示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#red {color: red}
#green {color: green}
</style>
</head>
<body>
<p id="red">我是红色</p>
<p id="green">我是绿色</p>
</body>
</html>


(4)id选择器和派生器

现代布局中，id选择器常常用于建立派生选择器

sidebar p {

color: red

}

上面的样式只会应用于出现在id是sidebar的元素内的段落

具体实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#red p{color: red}
</style>
</head>
<body>
<p id="red">我是红色么？</p>
<h1 id="red">我是什么颜色</h1>
<h1 id="red"><p>我是红色</p></p>
</body>
</html>


(5)类选择器

在CSS中，类选择器以一个点号显示:

.center {text-align: center}

在上面例子中，所有拥有center类的HTML元素都为居中

具体实例如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.red {color: red}
</style>
</head>
<body>
<h1 class="red">我是红色</h1>
</body>
</html>


和id一样class也可被用作派生选择器

(6)外部样式表

实例如下

mystyle.css

h1 {color: red}


style.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<h1>我是红色</h1>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css html
相关文章推荐
新的分享
章节导航