编程程序员2017届西安思沃大讲堂

CSS知识知多少

2016-12-08  本文已影响151人  你叫呆小瓜

在我的上一篇文章中介绍了HTML的相关内容，一个漂亮的网页仅仅靠HTML标签是很难做出来的，比如当我们需要页面具有某种效果时，仅考标签是远远不够的，这个时候就该CSS闪亮登场了。

对于一个网页来说HTML是相当于是一个少女，CSS就相当于给她化个妆，总之就是让她变美的啦。

HTML和CSS更配哦

按照惯例，先从扫盲开始吧！

CSS概述

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

CSS基础语法

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。(关于选择器会在会在后面内容中提到)

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

用一张图来说明：

CSS语法结构

图中这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

注：请使用花括号来包围声明

多重声明

如果要定义不止一个声明，则需要用分号将每个声明分开。

下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。

然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性，并且一般我们每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：

p {
  text-align: center;
  color: black;
  font-family: arial;
}

CSS引用方式

CSS有三种引用方式，分别有各自的优点。

1. 引用外部样式表

在引用外部样式表的时候，有两种方式：

1）使用link标签引用CSS

<head>
<link rel="stylesheet" type="text/css" href=http://www.yoursite.com/style.css />
 </head>

文件路径可以使用相对路径或者绝对路径。

2）使用@import引用CSS

<head> 
<style type="text/css">@import url(http://www.yoursite.com/style.css);</style>
</head>

文件路径可以使用相对路径或者绝对路径。

2. 引用内部样式表
<style type="text/css">
li {list-style-type: none;} 
a {text-decoration:none;} 
.red{color:#f00;}
</style>

style标签正常情况应该放在head标签内部。

3. 内联样式表
<p style="font-size: 10px; color: #FFFFFF;">
 使用CSS内联引用表现段落
</p>
三种方式的优先级

CSS样式表是可以重叠的，如果这几种方式同时存在的话页面到底应该显示哪个呢？

答曰：在相同权值情况下，内联式 > 嵌入式 > 外部式

注： 嵌入式 > 外部式有一个前提，嵌入式CSS样式的位置一定在外部式的后面（实际开发也是这么写）。

总结： 就近原则（离被设置的元素越近优先级越高）

CSS引用外部样式表的优点：

一般的浏览器都带有缓存功能，所以用户不用每次都下载此CSS文件，所以外部引用相对于内部引用和内联引用来说是是节省资源的。

CSS使用内部样式表、内联样式表的优点：

可以直观的看到CSS代码，可以方便的修改并观察更改后的效果。

CSS选择器

上面我们说到CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明，相信很多人都会想选择器是什么鬼，别急，一大波知识正在靠近。

CSS选择器是什么

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

选择器的分类

1. 标签选择器
元素选择器是最常见的 CSS 选择器，也就是HTML中的标签元素。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

这种方式可以将某个样式从一个元素切换到另一个元素。

假设您决定将上面的段落文本（而不是 h1 元素）设置为灰色。只需要把 h1 选择器改为 p就好了。

2. 类选择器

顾名思义，类选择器就是表示一类元素，在某个HTML元素中加一个class，引入这个类，该元素就具有这个类的样式了。

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

.red{
  color: red;
}

在上面的例子中，所有拥有 red 类的 HTML 元素内容均为红色。
eg：如果我想要标题和段落的文字均为红色，则HTML代码如下：

<h1 class="red">Today is cold</h1>
<p class="red">Good Night!</p>

3. Id 选择器
在很多方面，Id选择器都类似于类选择器，但也有一些重要的区别：

  • Id选择器前面的是'' # ''，而类选择器前面的是 '' . ''；

例如：

<p class=''red center''>You are so clever!</p>   /* 正确 */

<p id=''red center''>You are so clever!</p>    /* 错误 */

CSS的继承、层叠和特殊性

继承

CSS中的某些样式是具有继承性的。

继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。

eg：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

p { color: red; }
<p>hello <span> my girl </span></p>

注：有些css样式是不具继承性的，如border:1px solid red;

p{ border:1px solid red; } 
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。

特殊性

——当为同一个元素设置了不同的CSS样式代码时，浏览器根据权值来判断使用哪种样式，权值高的就使用哪种CSS样式。

权值规则：http://blog.littlebill.me/2015/04/css-study-weights.html
eg：

p{color:red;}
.first{color:green;} 
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

根据权值规则，上面例子中的字应该显示为绿色。

层叠

在html文件中对于统一各元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些CSS样式的先后顺序来决定，处于最后面的CSS样式会被应用——后面的会覆盖前面的。
（即为前面所说的就近原则）

重要性

——为某些样式设置具有最高权值。
eg：

p{color:red!important;} 
p{color:green;} 
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

/* p段落中的文本会显示的red红色 */

注：！important要写在分号的前面

这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

练习时刻

啊啊啊，说了这么多概念，没有练习怎么记得住，奉献出我最近的一个作业，一起交流学习吧！

题目
我的代码

CSS中的重要概念远不止我列出的这些，推荐几个学习的网站：
http://www.w3school.com.cn/css/index.asp
http://www.imooc.com/learn/57

另外目前也可以考虑使用BootStrap等优秀的CSS库，完美！

上一篇下一篇

猜你喜欢

热点阅读