HTML & CSS要点

#HTML

HTML和XHTML文档类型定义

1) HTML 4.01 Strict DTD:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2) HTML 4.01 Transitional DTD:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

3) HTML 4.01 Frameset DTD:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd">

4) XHTML 1.0 Strict DTD:<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xtml1/DTD/xhtml1-strict.dtd">

5) XHTML 1.0 Transitional DTD:<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xtml1/DTD/xhtml1-transitional.dtd">

6) XHTML 1.0 Frameset DTD:<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xtml1/DTD/xhtml1-frameset.dtd">

7) XHTML 1.1 DTD:<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xtml11/DTD/xhtml11.dtd">

#CSS

CSS 盒模型包含

内容(content) – 处于盒的中央
内边距(padding) – 紧贴内容的区域
边框(border) – 包围内边距的外层，构成盒的边界
外边距(margin) – 从边框边界开始向外延伸的透明盒

默认的外边距值是0，这时与边框边界对齐。如果边框值为0，则边框与内边距对齐

所以，内边距为0时，内边距将紧贴内容，值大于0时，会撑大盒子

使用@media在同一样式表中指定不同的媒体类型

e.g

/* 一般情况 */
p {
  font-size: 13px;
}

/* 需要进行打印时 */
@media print {
  p {
    font-size: 10px;
  }
}

font的简写属性中，如果需要同时使用font-size和line-height的话，可以用’/’进行分割
1em = 10px
将文本设置为左右对齐式

p {
  width: 600px;
  text-align: justify;
}

居中显示

1）表格

```html

<table width=50% border="1" cellpadding="30"> This is the first cell This is the second cell </table>

```

CSS .center { text-align: center; } .center table { width: 50%; margin-left: auto; margin-right: auto; text-align: left; }

2）图片

```html

```

CSS .flagicon { text-align: center; }

如果是显示定宽元素的话，首先可以把父元素的padding-left设置为50%，然后取需要居中元素的宽度值的一半，将该值取负给margin-left

html <img src="img.jpg" width="256" height="192">

```css body { padding-left: 50%; } img { margin-left: -138px; }

/* 也可以这样 */ img { display: block; margin: 0 auto; } ```

在所有浏览器上是列表左侧保持一致

css ul { margin-left: 40px; padding-left: 0px; }

在列表项之间添加列表分隔符

css li { border-top: 1px solid black; } ul { border-bottom: 1px solid black; } 9. 自定义列表文本标记符

```css ul { list-sytle: none; } li:before { content: “XX”; }

/* 如果是图片的话，可以这样做 */ ul { list-style-type: disc; list-sytle-image: none; } ```

超链接伪类优先级： link > visited > hover > active

CATALOG

FEATURED TAGS

FRIENDS