CSS基础学习笔记（一）

css 基础学习笔记（1）——元素以及文档的使用

一. 元素

（1）定义

元素是文档结构的基础。在CSS中，每一个元素都对文档的表现起一定的作用，而且每个元素生成一个框，其中包含元素的内容。

(2) 分类

(!)根据替换和非替换元素

替换元素是指用来替换元素内容的部分并非由文档内容直接表示。
比如，img元素

<img src="howdy.gif"/>

这段标记片段中不包含任何具体内容只有一个元素名和一个属性。除非将其指向一个外部内容，否则这个元素将没有任何意义。与之类似的还有input元素，取决于input元素的类型，要由一个单选钮、复选框或文本输入框替换。替换元素显示时相应也生成框。
非替换元素
大多数XHTML和HTML元素都是非替换元素。这意味着，其内容由用户代理在元素本身生成的框中显示。例如，就是一个非替换元素。段落，标题，表单元格，列表和HTML中的几乎所有元素都是非替换元素。

(!!)根据元素显示角色

分为块级元素(block-level)和行内元素(inline-level)

• 块级元素
  块级元素会生成一个元素框，（默认地）它会填充其父元素的内容区，使得其旁不能有其他元素。换句话说就是,它在元素框之前和之后生成了“分隔符”。我们最熟悉的HTML元素有p和div。替换元素也可以是块级元素，不过通常都不是。
• 行内元素
  行内元素在一个文本行内生成元素框，而不会打断这行文本。行内元素最好的例子就是XHTML中的a元素。strong和em也属于行内元素，这些元素不会再它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容之中，而不会破坏其显示。
  在HTML和XHTML中，块级元素不能继承自行内元素（即不能嵌套）

二.结合CSS和HTML

1. link标记(外部式)

首先举个?子:

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" >

该样式表不属于html的一部分，但是仍然会被html文档所使用，称为外部样式表。

注意： link 必须放在head元素之中，但是不能放在其他元素之中（如 title）

属性：

• rel:代表“关系”(relation) 在这里，关系为stylesheet；
• type:用来描述link加载的数据的类型 ，总是设置为text/css；
• href：该值是样式表的URL，可以是绝对URL，也可以是相对URL；
• media：该值说明这个样式表应用于所表现的媒体。

media的可取值	作用
all	用于所有表现媒体
aural	用于语音合成器、屏幕阅读器、文档的其他声音表现
braille	用于Braille设备表现文档时使用
embossed	用于Braille打印设备打印时使用
handheld	用于手持设备
print	为视力正常的用户打印文档时使用
screen	在屏幕媒体中表现文档时使用 (web浏览器都是屏幕媒体用户代理)
…	…

另外：将rel属性的值 设置为 “alternate stylesheet” 时就可以定义“候选样式表”从而供用户选择

2.@import 指令（外部式）

@import url(sheet.css)

注意@import出现在style容器中（其他css规则之前）

@import url(blueworld.css);
@import url(zany.css);
@import url(sheet2.css);

不同于link 这三个样式表都会加载并使用，
所以使用@import 无法制定候选样式表。

3.style（嵌入样式）

style元素总是在文档中单独出现，比如

<style type="text/css"></style>

标记其中的样式称为文档样式表（document style sheet）,或者嵌套样式表。

4.内联样式

直接在元素的标记中使用style属性设置一个内联样式。如，

<p style="cololr:gray;" >The most wonderful is you </p> 

注意：一个内联style属性中只能放一个声明块，而不能放整个样式表。

通常不推荐使用style 属性，因为其改变了css的一些优点，但是其能提供巨大的灵活性

—ending—