HTML和CSS基础知识

主流浏览器及其内核

IE                         Trident

Firefox                 Gecko

Safari                    Webkit

Chrome          以前是Webkit内核，现在是Blink内核

Opera                     presto

 

CSS选择器

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

1、元素选择器

例如：

html {background-color: black;}

p {font-size: 30px; backgroud-color: gray;}

h2 {background-color: red;}

2、类选择器

(1)单类选择器

要使用类选择器我们需要首先对文件元素添加一个class属性，比如截至日期可能会出现在以下元素中:

<p class="deadline">...</p>

<h2 class="deadline">...</h2>

这样我们就可以用以下方式使用类选择器了：

p.deadline { color: red;}

h2.deadline { color: red;}

(2)多类选择器

比如某些元素包含一个”warning”类，某些元素包含一个”important”类，某些元素同时包含”warning important”类。属性名出现的顺序没有关系：

class = "warning important"

class = "important warning"

以上2者是等价的。我们希望包含warning类的元素有一个醒目的红色字体，包含important属性的元素有一个加粗的字体显示，而同时包含以上2中属性的元素另外拥有一个蓝色背景(不管还能不能看清文字了)，我们可以使用以下的css代码：

.warning { color: red;}

.important { font-weight: bold;}

.warning.important { background: blue;}

3、ID选择器

ID选择器和类选择器有些类似，但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。类似类属性，在使用ID选择器前首先要在元素中添加ID属性，例如：

<p id="top-para">...</p>

<p id="foot-para">...</p>

使用ID选择器的方法为井号”#”后面跟id值。现在我们使用id选择器选择以上2个p元素如：

#top-para {} #foot-para {}；

4、属性选择器

可以根据元素的属性及属性值来选择元素。

如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

5、分组选择器

假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：

h2, p {color:gray;}

6、子元素选择器

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

7、包含选择器

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

 

 

 

• 行级元素 （内联元素 inline）

内容决定元素所占位置不可以通过css改变宽高

例如：span、strong 、 em 、a、del 

 

• 块级元素（block）

独占一行可以通过css改变宽高

例如：div、p、ul、li、ol、form、 address

 

• 行级块元素（inline-block）

内容决定大小，可以改变宽高

img

 

凡是带有inline的元素，都有文字特性

设置了position：absolute；和float：left/right，打内部设置display:inline-block

行级元素只能嵌套行级元素,块级元素可以套块级元素，但是p标签不能套div