【原创教程】虎咽CSS_html/css_WEB-ITnose

 

上节课我们讲了HTML基础，回顾的事我不干了，因为你可以回头看很多遍，这节课我们来学习下CSS这门艺术的基础知识，一直以来我们都是CSS,CSS那么CSS到底是什么呢，惯例，我又来一层一层把CSS给剥了，大家分享。

那么好，什么是CSS呢，CSS就是层叠样式表，它也不是真正的编程语言，它是样式表语言，也就是会所，它是你用来为网页添加样式使网页看起来更美观，更华丽的代码，允许你有选择的为HTML文档的元素添加样式。

 

下面这节课，我将带领童鞋们走进CSS的艺术花园，领略CSS给HTML带来的美。

 

首先CSS怎么写呢，你应该这样写：

p {

     color: red;

}

童鞋们先从字面上设想下，p，上节课讲到的HTML中是不是有个

的标记，然后color颜色，red红色，哦，明白了p标记内得内容颜色为红色。太棒了，就是这样。那么这个CSS怎么被HTML引用呢，怎样才能使得我们构建的CSS那优美简洁的代码作用到HTML中呢。

目前有三种方法：

首先是在

中添加

 

第二种是直接在你要添加CSS的标记内用style属性来添加，如下：

我很帅

是的，这里style和第一种方法中的style使用不一样，这个是属性，上面的那个是标记。

第三种方法是把所有的CSS提炼出来放在一个文件中，比如，把上面这个p的样式粘贴到文本编辑器里面的新文件中，然后保存为style.css，保存到styles文件夹中，然后我们再把CSS文件引用的HTML文档内，否则的话CSS代码不会影响到HTML文档在浏览器里的表现。怎样引用呢，代码奉上：

 

 

老规矩，这段代码放在

内。

如果你的段落文字现在变成红色的了，那么祝贺你，你已经成功的写下了你的第一句CSS代码。

 

好，下面我们来具体的的分析CSS规则：

 

整个结构称为CSS的规则，注意里面的单独的部分也是一样的：

 

首先是： 选择符(selector)

     HTML元素放在规则的最开始，它选择了一个或多个需要添加样式的元素，在这个例子中就是选择了所有的P元素，要给不同的元素添加样式，只需要改变选择符就行了，当然选择符有很多种，这个我们晚一点再说。

然后是：声明(Declaration)

     一个单独的规则比如color:red;这指定了你想要添加的元素的属性。

再是： 属性(Properties)

     这是你改变HTML元素样式的方法，上面这个例子中color就是p元素的属性。在CSS中，你通过选择合适的属性来改变你的规则。

有属性当让少不了属性值(Property value)了

     在属性的右边→_→，冒号的后面，我们拥有属性值，用于从指定的属性里的非常多的外观中找到一件漂亮的衣服给她穿，变成美美哒的。所以有很多选择，女生的衣橱是吧，我们都懂得。

当然还有一些我们需要注意的小语法：

1、规则里除了选择器的部分都应该包含的成对的大括号里{}；

2、在声明里，你应该用冒号分离开属性和属性值；

3、在规则里，你应该用分号分离开各个声明。

 

如果要同时换几件衣服，哦，不，同时修改多个属性，你只需要将它们用分号隔开，就像这样：

 

p {

  color: red;

  width: 500px;

  border: 1px solid black;

}

你也可以选择多种类型的元素然后为她们添加一组样式。要记得将不同的选择符用逗号隔开，不然她们会打架的，谁让你给她们穿一样的衣服。

p,li,h1 {

     color: red;

}

选择符可以有多种多样，我们用有许多不同类型的选择符，在上面我们只看到的是元素选择符，用来选择HTML文档中给定的元素，但是我们可以选择更加具体的类型，下面是一些常用的选择符类型。

选择符 选择的内容 示例

元素 选择符（有时也称作标签或类型选择符）	所有指定的 HTML 元素	p 选择
ID 选择符	指定 ID 的元素（在 HTML 页面中，每个 ID 只被允许指定一次）	#my-id 选择   或
Class 选择符	指定 Class 的元素（多个 Class 可以同时出现在一个页面中）	.my-class 选择   和
属性 选择符	页面上拥有指定属性的元素	img[src] 选择  而不是
伪类 选择符	指定的元素，但是需要在特殊的状态，比如悬停	a:hover 选择 , 但是只在鼠标悬停在链接上时

选择器博大精深，似女人心海底针，感兴趣的可以去深入学习下，我这里就不谈了。

我来讲讲不得不将的著名的盒模型：

在你写CSS时，话说你写了吗？没写的赶紧要写起来了，在我的课程中一定要写起来，因为我坚信动手学编程事半功倍，6的不行。

话说回来，在你写CSS时，你会发现大部分都是关于盒模型的----设置她的尺寸，颜色，位置等等。大部分的HTML元素都可以被看做一个一个层叠的盒子。

毫无惊喜的，CSS布局就是基于盒模型的，每个占据你页面空间的块级元素都有相似的属性。关于块级属性，暂时先不用担心这部分内容：

 

- 内边距（padding）, 围绕着内容的空间（比如围绕段落的空间）

- 边框（border）, 紧接着内边距的实体线段

- 外边距(margin), 围绕元素外部的空间

在这一部分我们用：

 

- width (属于一个元素的)

- background-color, 元素内容和内边距之后的颜色

- color, 元素内容的颜色（通常是文本）

- text-shadow: 为元素内的文本设置阴影

- display: 设置元素的显示模式（暂时不用担心这部分内容）块级元素->block。

 

让我们赶紧开始添加更多的 CSS 到你的页面上去吧！动起手来，将这些新规则都添加到页面的底部，不要害怕改变了属性的值会造成的后果，赶紧去尝试吧！

改变整个页面的颜色：

html {

     background-color: #00539f;

}

这条规则设置了整个页面的背景颜色，将上面的代码搞到你自己的文件中去。看看你的网页现在变成啥样了，不要怕改，改个痛快，你改的越多，你学到的东西就越多，你删除你写的代码越多，你掌握的也就越多。

好，有下面一段代码：

 

body {

  width: 600px;

  margin: 0 auto;

  background-color: #FF9500;

  padding: 0 20px 20px 20px;

  border: 5px solid black;

}

在这个body元素中有好几条声明，我们现在来一条一条的看一下：

 

- width: 600px; — 强制页面永远保持600像素宽。

 

- margin: 0 auto; — 当你在 margin 或 padding 中设置两个值时，第一个值代表元素的上方和下方（在这个例子中设置为 0），而第二个值代表左边和右边（在这里，auto 是一个特殊的值，意思是水平方向上左右对称）。你也可以使用一个，三个或四个值。

 

- background-color: #FF9500; — 指定元素的背景颜色。我们给 body 元素用了一种略微偏红的橘色以与 html 元素形成对比。继续实验，尝试下 white 或者其他你喜欢的颜色。

 

- padding: 0 20px 20px 20px; — 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为20像素。值以上、右、下、左的顺序排列。

 

- border: 5px solid black; — 简单地为页面四周设置了5像素的黑色实线边框。

 

为你的主标题h1定位和添加样式，什么你没有主标题h1，还不赶紧偷偷加上去。

 

h1 {

  margin: 0;

  padding: 20px 0;

  color: #00539F;

  text-shadow: 3px 3px 1px black;

}

你可能会发现了我们在页面的上方有个可怕的间隙，那是因为每个浏览器都会提供一些默认样式，即使你没有提供任何CSS代码。这样做呢，有好处，有坏处，没有听起来那么可怕，因为对于每个浏览器的默认样式，我们后面是可以覆盖的，这方面的也可以深入去研究，有兴趣的可以研究下normalize.css。

为了去掉那个间隙，我们通过设置了margin:0，覆盖掉了默认样式。

至此，我们已经设置了标题的上内边距和下内边距为20像素，标题文本和HTML的背景颜色一致；

 

另一个我们再这里使用了一个非常尤其的text-shadow，它为我们的元素内容的字体提供了阴影，他的四个值如下：

 

- 第一个像素值设置了水平方向的阴影值

- 第二个像素值设置了垂直方向的阴影值

- 第三个像素值设置了阴影模糊的距离（越大的值表示越模糊）

- 第四个值设置了阴影的颜色

 

 请尝试不同的值看看你会得出什么样的结果！又到了你动手的时候咯。。。还不快动起来。

居中显示图像

 

img {
  display: block;
  margin: 0 auto;}

 

最后，我们将使图像居中来让它变得更美观。我们可以重新使用 margin: 0 auto 一次，但是我们还要做其他调整。body 元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。与之对应的是行内元素，则不能。所以为了是图像有外边距，我们必须使用 display: block 将其改成块级元素。

对于居中有好多方法呢，这里想去了解的可以去了解下，挺有意思的，对了，别人家的HR也喜欢问这个问题，真是不知道创新。

好了，这节课就先到这里了，下节课我们将学习JS，赋予你的网页以生命。拜拜...