CSS Tutorial(一)：基本知识

时间 2019-11-08

标签 css tutorial 基本知识栏目 CSS 繁體版

原文原文链接

1.简介css

CSS(Cascading Style Sheets)：叠层样式表。主要用来定义如何去显示HTML的元素。HTML4中添加CSS主要是为了达到内容与显示分离。编程

HTML本来是设计用来用来定义一个文档的内容，而不是用来定义如何显示这些内容。然而曾经有一段时间，大量网页充斥着相似于<font>标签和color属性的东西，致使页面难以维护。为了解决这个问题W3C提出了CSS。浏览器

2.CSS语法编程语言

CSS并非编程语言，并且CSS的语法很是简单。CSS规则很是简单，包含两部分：选择器和一个或者多个定义，其语法以下图所示：编辑器

其中，selector（选择器）用来选择而且制定页面中哪些元素须要应用样式，而没一个定义包含一个属性及其对应的属性值。下面就是一个典型的CSS样式：url

p {
    color:red;text-align:center;
}

他的意思是，对于页面中全部的<p>元素，颜色为红色，文字居中对齐。每个定义以分号结尾，若干个定义一块儿被左右花括号括起来。通常来讲，为了使得CSS的可读性更好，通常会将一个定义放在一行，以下：spa

p {
    color:red;
    text-align:center;
}

CSS也有注释，格式以下：翻译

/*
这里面都是
注释
*/

3.Id选择器和类选择器设计

Id选择器用来给HTML文档中的一个元素设置样式。Id选择器使用被设置样式的元素的id属性，而且以"#"开头。例如：code

#para1 {
    text-align:center;
    color:red;
}

这个例子中，样式是设置给HTML中id为para1的元素的。

class选择器和Id选择器不一样，他能够为一组HTML元素，而不是单个元素设置相同的样式。这就容许对具备相同class的不少元素设置同样的样式。class选择器以"."开头。例如：

.center {
    text-align:center;
}

这个例子就是给全部class为center的元素设置文字居中对齐。固然能够从class属性相同的元素中，挑出某一类设置样式啦，例如：

p.center {
    text-align:center;
}

这样一来的话，只有class为center的<p>元素的文字对齐是居中的了。

4.插入CSS的三种方法

外部样式表适用于一个样式表控制多个HTML文件的显示。这样你能够经过只修改一个CSS文档，就能使整个站点的样式更新的效果。这种状况下，须要给每一个网页添加一段代码引用这个外部样式表文件：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

其中mystyle.css就是这个文件。外部样式表能够使用任何文本编辑器编辑，以css做为后缀名，其中不容许包含HTML标签。下面就是一个外部样式表的例子：

hr {
    color:sienna;
}
p {
    margin-left:20px;
}
body {
    background-image:url("images/back40.gif");
}

须要注意的是，属性值与单位之间不能有空格，有空格的话，IE能够正常显示可是FF和Opera不行。

内部样式表则是在HTML的<head>标签中增长<style>标签，而且在里面写样式，例如：

<style>
hr {
    color:sienna;
}
p {
    margin-left:20px;
}
body {
    background-image:url("images/back40.gif");
}
</style>

内联样式表就是在对应的标签属性中定义样式，以下：

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

很明显，这种方式达不到将内容与现实分开的目的，所以尽可能少用或不用。

5.多个样式表的问题

既然上面提到样式表能够以三种方式插入，那么必定会存在对于某个元素，多个样式表中都对其进行了样式规定的状况，那到底以哪一个为准呢？CSS有以下的标准：

其中第四个优先级是最高的。

参考资料：

本系列文章的内容，结构，例子都来源于上面的连接。我这里主要是提取其中的要点翻译整理。一方面备忘，也方便不喜欢看英文的同窗。有任何不当，欢迎交流！