首页 » HTML » CSS - 层叠样式表

CSS介绍

在HTML的史前时代,页面的内容和展现形式是融合在一起的,后来两者才拆分开来。被拆分出去那部分通常就叫做样式表。样式表如果是在HTML中,则写在<head>区域中的<style>标签内。看起来大概是这个样子:

<style>
    h1 { font-size:36px; }
</style>

如果是独立的文件,通常是如style.css,则需要引入HTML文件中,看起看大概是这样:

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

当然还有一种不推荐的写法,就是直接嵌入到元素中去:

<h1 style="font-size:36px;">标题</h1>

理解样式表的首要任务就是要指明那个/些HTML元素应用那个/哪些样式,这就是所谓“选择符”的概念(对JavaScript而言也一样,最重要的就是要理解和应用选择符)。

类型选择符,他们都是HTML中定义好的元素。如:

h1 {}
p  {}

选择符。如:

.waring {}
.notice {}

对应的HTML代码如:

<p class="warning">警告:XXX...</p>
<p class="notice">提示:XXX...</p>

ID选择符(一个页面中的ID是唯一的)。如:

#nav    {}
#footer {}

对应的HTML代码如:

<div id="nav">导航:XXX...</div>
<div id="footer">页脚:XXX...</div>

后代选择符。如:

table a   {}
li strong {}

子选择符。必须是直接子代。如:

div > strong {}

文本属性

white-space

white-space设置如何处理元素内的空白。常见取值:

说明
nowrap文本在同一行显示不换行,直到遇到<br/>标签为止。
pre-wrapCSS 2.1新增。保留空白,但正常进行换行(浏览器自行决定换行位置)。
Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma-which is living with the results of other people's thinking. Don't let the noise of other's opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.
Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma-which is living with the results of other people's thinking. Don't let the noise of other's opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.

text-overflow

当文本溢出时,是否用省略标记。clip表示不显示省略号,ellipsis显示。

text-overflow: clip | ellipsis

注意:text-overflow通常和white-space/overflow在一起配合使用,以真正实现显示省略号的效果:

text-overflow: ellipsis; 
white-space: nowrap; 
overflow: hidden;
Your time is limited.

CSS实践笔记

visible:hiddendisplay:none;的区别?

visible:hidden;是把元素隐藏起来使其不可见,但在文档布局中仍留有其空白(take up space);display:none;则是把元素彻底从文档中移除了(当然在HTML中还在)。对比:

<p>接下来的单词会被隐藏<span style="visibility:hidden">visible hidden</span>以及完全消失不见<span style="display:none;">display none</span>,看到了吗?</p>

效果:

接下来的单词会被隐藏visible hidden以及完全消失不见display none,看到了吗?

img是block还是inline元素?

img是一种特殊的元素,要对它进行修饰的话那将是:inline block element。作为inline元素,img表现来像普通的文本流,但它又有高度和宽度,这点又像是block元素。将普通元素模拟为img的行为:

display: inline-block;

图片和Object又被称为replaced元素(可替代元素)。

如何让图片居中对齐?vertical-align的作用?

让一个图片出现在正常的文本流中,不加任何修饰:

让它在文本流中垂直居中:。代码:

<img src="/images/berlinix-text.png" style="vertical-align:middle;" />

一个图片正常出现在表格中:

表格中的图片 表格中的图片

参考Understanding vertical-align, or "How (Not) To Vertically Center Content"或这篇文章的翻译版:CSS竖直对齐vertical-align属性详解

分享

0