1 引言
- CSS指层叠样式表（Cascading Style Sheets），样式定义了如何显示HTML元素，而样式通常存储在外部样式表中，而外部样式表通常存储在CSS文件中。
- 因此我们要学习的就很显然了，首先是CSS的基础内容，其次如何将其保存为外部样式表，最后在HTML代码中引用。
2 CSS基础内容
2.1 CSS规则
- CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
image.png
选择器通常是您需要改变样式的 HTML 元素。例如p或者h1，或者使用相应的ID选择器或者类选择器。
例子：
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
2.2 ID选择器与类选择器
- ID选择器
当使用上面的p进行改变样式时，会影响整个HTML页面的p元素。但如果只想改变某一个元素时，应当使用ID选择器。
用法：ID选择器以关键字 # 作为标识；
下面的例子将作用于id = 'jacob'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#jacob
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="jacob">Hello World!!!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
另需要注意的是，<style></style>标签放在head标签中。
- Class选择器
用于描述某一类元素的样式，与ID选择器的区别在于其可以选择某一组元素。
用法：以关键字 . 作为标识；
<html>
<head>
<meta charset="utf-8">
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
此外，还可以指定特定元素的类选择器。
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p>
</body>
</html>
2.3 样式表
插入样式表的三种方式
-
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
下面是一个样式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(/images/back40.gif);}
- 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
- 内联样式
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
- 此外需要注意的是：
如果外部样式表、内部样式表同时对某个元素进行了样式定义，那么需要注意这里有一个继承与覆盖的过程。
一个例子如下：
外部样式表：
h3
{
color:red;
text-align:left;
font-size:8pt;
}
内部样式表：
h3
{
text-align:right;
font-size:20pt;
}
那么得到的结果是：
color:red; text-align:right;
font-size:20pt;
需要注意的是：
!important 关键字会覆盖所有，就比如在外部样式表中使用!important，其不会被内部样式表与内联样式覆盖。
权重计算方式：
image.png
一个简单的例子如下：
<html>
<head>
<style type="text/css">
#redP p {
/* 权值 = 100+1=101 */
color:#F00; /* 红色 */
}
#redP .red em {
/* 权值 = 100+10+1=111 */
color:#00F; /* 蓝色 */
}
#redP p span em {
/* 权值 = 100+1+1+1=103 */
color:#FF0;/*黄色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>
根据权重的计算结果，em显示为蓝色。
2.4 背景
CSS 属性定义背景效果：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-color 属性定义了元素的背景颜色。
<style>
body
{
background-color:#b0c4de;
}
</style>
整个页面的颜色会变成蓝色。
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
对应的元素背景改变。
- background-image 属性描述了元素的背景图像.
<style>
body
{
background-image:url('https://7n.w3cschool.cn/attachments/knowledge/201611/31824.png');
background-color:#cccccc;
}
</style>
该方法会使得背景图片在整个元素内平铺，若想改变平铺方式则可以利用以下几个方法。
body
{
background-image:url('gradient2.png');
//仅在x方向平铺
background-repeat:repeat-x;
}
body
{
background-image:url('img_tree.png');
//不平铺
background-repeat:no-repeat;
}
可以利用 background-position 属性改变图像在背景中的位置:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
//水平66%处，吹制33%处
background-position:66% 33%;
}
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
//相对于左上角的偏移量。
background-position:50px 100px;
}
2.5 文本
- Text Color
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
- 文本的对齐方式
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
h1{text-align:center}
p.date{text-align:right}
p.main{text-align:justify}
</style>
</head>
<body>
<h1>CSS text-align 实例</h1>
<p class="date">2015 年 3 月 14 号</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界;当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家;当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭;在家人的帮助和鼓励下，我可能为国家做一些事情;然后，谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
</body>
</html>
image.png
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
- 文本修饰
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
文本修饰
- 文本转换
<style>
//转换为大写
p.uppercase {text-transform:uppercase;}
//转换为小写
p.lowercase {text-transform:lowercase;}
//首字母大写
p.capitalize {text-transform:capitalize;}
</style>
- 文本缩进
p {text-indent:50px;}
- 文本间隔
改变字之间的间隔距离
p
{
word-spacing:30px;
}
