css学习笔记.doc

CSS(Cascading Style Sheets)简介 2
CSS基本语法 2
组合(Grouping) 3
Class Selector 3
ID SELECTOR 3
CSS注释 5
内嵌样式(Inline Style) 5
内部样式表(Internal Style Sheet) 5
外部样式表(External Style Sheet) 6
串联(Cascading) 6
CSS 基本属性 7
CSS属性列表 7
HTML+CSS
CSS 基本观念;
CSS 语法;
CSS 基本属性;
CSS(Cascading Style Sheets)简介
的迅猛发展,HTML被广泛应用,上网的人们当然希望网页做得漂亮些,因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题,人们也走了不少弯路,用了一些不好的方法,比如给HTML增加很多的属性结果将代码变得很臃肿,将文本变成图片,过多利用Table来排版,用空白的图片表示白色的空间等。直到CSS出现。
CSS可算是网页设计的一个突破,它解决了网页界面排版的难题。可以这么说,HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网页内容如何显示(Layout)。
CSS的英文是Cascading Style Sheets,中文可以翻译成串联式样式表。
CSS基本语法
一个样式(Style)的语法由三部分构成:Selector(选择器),属性(Property),属性值(Value)。
selector {property: value}
举个例子,下面的代码p就是selector,color就是属性,blue就是属性值。
p {color:blue}
HTML中所有的Tag都可以作为selector。
注:如果你想为Style加多个属性,在两个属性之间要用分号加以分隔。下面的Style就包含2个属性,一个是对齐方式居中,一个字体颜色为红,当中用分号分隔开。
p {text-align:center;color:red}
为了提高Style代码的可读性,你也可以分行写:
p
{
text-align: center;
color: black;
font-family: arial
}
组合(Grouping)
你也可以将相同的属性和属性值赋予多个Selector。Selector之间用逗号分隔。
h1,h2,h3,h4,h5,h6
{
color: red
}
上面的例子是将所有正文标题(<h1>到<h6>)的字体颜色都变成红色。
Class Selector
利用Class Selector,你可以用同样的HTML Tag构成不同的样式。比如说,你希望段落<p>有两种样式,一种是居中对齐,一种是居右对齐。你就可以写如下样式:
{text-align:right}
{text-align:center}
其中right和center就是两个class。然后你就可以引用这两个class,示例代码如下:
<p class="center">这一段居中显示。</p>
<p class="right">这一段是居右显示。</p>
你也可以不用HTM