初识CSS
2017-07-14 本文已影响4人
April_17
- css为选择的HTML元素提供样式，典型的规则包含一个选择器，以及一个或多个属性和值。
例子：
p{
color:black;
}
这个规则中，把<p>元素作为选择器，会选择所有段落的元素，应用颜色为黑色。color为属性，它的值为black。所有的属性和值都要放在大括号{}里。
- 可以用逗号
,分割开元素名，可以一次选择多个元素
例子：
p,h1{
color:black;
}
此规则，一次选择了<p>和<h1>两个元素，所有段落和h1标题都会应用为黑色。
- 在HTML中包含一个样式，使用
<style>标记
例子：
<!doctype html>
<html>
<head>
<meat charset="utf-8">
<title>this is ......</title>
<style>
p{
color:green;
}
</style>
</head>
<body>
<p>
示例段落......
</p>
</body>
</html>
- 如果是一个复杂的HTML页面，最好链接到一个外部的样式表，使用
<link>元素来包含一个外部样式表。
例子：
<!doctype html>
<html>
<head>
<meat charset="utf-8">
<title>Head first Louge Elixirs</title>
<link type="text/css" rel="stylesheet" href="../lounge.css">
</head>
<body>
......
</body>
</html>
此时需要写一个外部的css样式表,文件名为：“lounge.css”
例子：
body {
font-family: sans-serif;
}
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
p.greentea {
color: green;
}
- 很多元素都能继承，如果为
<body>元素设置了一个可继承的属性，那么<body>元素中所有的子元素都会继承这个属性。
如果<body>元素中的子元素创建了一个更特定的属性，那个这个属性就会覆盖<body>元素的属性。
例子：
body{
color:black;
}
p{
color:green;
}
此规则中，p的属性绿色就会覆盖body元素的属性黑色。浏览器会优先选择更特定的的属性显示。
-
类选择器
首先要在HTML中加入一个类，需要使用<class>属性，再为其提供一个值。
例子：
<p class="greentea">
示例段落...
</p>
然后再在CSS中创建一个类选择器。
例子：
p.greentea{
color:green;
}
先选择元素p,再选择它的类名greentea，中间用一个.隔开。这样就会选择greentea类中的所有段落的文本为绿色。
- 使用
".classname"可以选择属性这个类的所有元素
例子：
.greentea{
color:greet;
}
此规则中，所有属性值（属性的类名）为greentea的元素的文本都会成为绿色
- 可以在一个
class属性中放入多个类名，中间用空格隔开，这个元素就属于多个类。
例子：
<p class="greentea raspberry blueberry">
- 初识CSS一些属性
| 属性 | 定义 |
|---|---|
| color | 设置文本元素的颜色 |
| top | 控制元素顶部位置 |
| font-weight | 控制文本粗细，可以用它设置粗体 |
| left | 指定一个元素的左边位置 |
| line-height | 设置一个文本元素中的行间距 |
| background-color | 控制元素的背景颜色 |
| borde | 在元素周围加边框。可以为实线、虚线等 |
| padding | 内边距：元素内容和元素边缘之间的距离 |
| font-size | 控制文本大小 |
| text-align | 控制文本居中、左对齐、右对齐 |
| letter-spacing | 在字母之母之间设置间距，如：LIke this |
| font-style | 设置斜体文本 |
| list-style | 允许改变列表中列表项的外观 |
| background-image | 在元素后面放置一个图像 |
