HTML+CSS总结

转自：http://blog.163.com/html5_12/blog/static/21278902620121020113637485/

标签的规范：

1、所有标签都必须要有相应的结束标签。

2、标签和标签的属性都必须使用小写。

3、所有标签都必须合理嵌套。

4、<img>标签的alt属性。

5、XHYML转义字符。

块属性标签（块元素）：

<div></div>     （<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用id或class来标记<div>,那么标签的作用会变得更加有效。）

<h1></h6>......<h6></h6>    （标签可定义标题。<h1>定义最大的标题。<h6>定义最小的标题。）

<ol></ol>    （定义有序列表，<ol></ol>下必须嵌套<li>.）

<ul></ul>    （定义无序列表，<ul></ul>下必须嵌套<li>.）

<li></li>    （定义列表项目，是有序列表和无序列表的子标签。）

<dl></dl>    （定义自定义列表。）

<dt></dt>    （定义自定义列表中的项目，一般用于列表标题。）

<dd></dd>    （定义自定义列内容。）

<table></table>    （定义表格。）

<tr></tr>    （定义表格行。）

<th></th>    （定义表头。）

<td></td>    （定义表格单元。）

<p></p>    （定义段落，p元素会自动在其前后创建一些空白。）

</br>    （换行符。）

<form></from>    （<from>标签用于为用户输入创建HTML表单。）

行内属性标签：

<span></span>    （被用来组合文档中的行内元素。）

<var></var>    （定义变量，在浏览器中一般会斜体显示。）

<em></em>    （把文本定义为强调的内容，在浏览器中一般会斜体显示。）

<a></a>    （锚文本，它最重要的属性是href属性，它指定链接的目标。）

<img/>    （定义一幅图像。）

<textarea></textares>    （定义多行的文本输入控件，文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体。）

<select></select>    （可创建单选或多选菜单。）

<option></option>    （定义下拉列表中的一个选项。）

<input/>    （用于搜集用户信息。）

<strong></strong>    （把文本定义为语气更强的强调的内容。）

css的引人方法：

1、在head部分加入css；

在head部分加入<style type="text/css"><style>标签，css代码就写在其标签中。

2、在标签内直接写css；

如：<div style="border:1px solid red">显示的内容</div>

3、使用@import引入css

在head部分加入：

<style type="text/css">

        @import url(所取css文件名.css)；

</style>

css选择器及优先级：

css选择器使用来匹配选择相应元素的，分为以下几种：

1）标签名选择器

2）类选择器

3）ID选择器

4）后代选择器（派生选择器）

5）群组选择器

6）属性选择器    input[type~="text"]

css选择器优先级：

1）css不同引人方式的优先级

具体情况是：标签内联样式>页面内嵌样式>外部文件样式>浏览器默认样式。

2）css选择器的优先级

id>class>tagName(标签名)

3）多个选择器混用时的优先级

4）利用！important提升优先级

字体设置：

font-famliy：字体；

font-size：字体大小（单位：px/em；）

font-style：定义字体的风格；（normal：字体正常也为常规字体；italic：斜体；oblique：倾斜；）

font-weight：字体粗细；（normal:表示正常；bold：表示加粗；）

复合属性font：

    font是设置或检测对象中的文本特征。

    font：font-style | font-variant | font-weight | font-size | font-family；

    font字体缩写是针对字体样式进行的缩写形式（包含字体、字号等属性。）

color：颜色值；

text-decoration：表示文本修饰；（underline：表示有下划线。overline：表示上划线。none：浏览器默认初始值。）

line-height：表示文本段落的行距；（normal；length；）

文本设置：

text-indent：定义文本块的缩进；（常用单位：px/em；）

text-align：规定元素中文本的水平对齐方式；（left：左对齐；right：右对齐；center：中间对齐；）

vertical-align：设置元素的垂直对齐方式；（top：顶部；bottom：底部；middle：中间对齐；）

word-spacing：可以改变字（单词）之间的标准间隔。（normal：默认值；）

letter-spacing：字母间隔修改的是字符或字母之间的间隔；

背景设置：

background-color：背景颜色；

background-img：背景图；（none：无背景图；url：图片的路径；）

background-repeat：背景图重复；（repeat：重复默认选项；no-repeat：不重复；repeat-x：横向重复；repeat-y：纵向重复；）

background-position：背景图定位；（具体的方位：left|right|center|top|bottom;）

background-attachment：(scroll:随着页面的滚动轴背景图片将移动，默认值。fixed：随着页面的滚动轴背景图片不会移动。）

简写方式background：

background-color：规定要使用的背景颜色。

background-images：规定要使用的背景图像。

background-repeat：规定如何重复背景图像。

background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。

background-position：规定背景图像的位置。

尺寸设置：

width：设置元素的宽度。

height：设置元素的高度。

盒模型：

margin属性：

margin-top：设置元素的上外边距。

margin-right：设置元素的右外边距。

margin-bottom：设置元素的下外边距。

margin-left：设置元素的左外边距。

padding属性：

padding-top：设置元素的上内边距。

padding-left：设置元素的左内边距。

padding-bottom：设置元素的下内边距。

padding-right：设置元素的右内边距。

border属性：

border-top：简写属性，用于把上边框的所有属性设置到一个声明中。

border-left：简写属性，用于把左边框的所有属性设置到一个声明中。

border-bottom：简写属性，用于把下边框的所有属性设置到一个声明中。

border-right：简写属性，用于把右边框的所有属性设置到一个声明中。

border-style:silid(实线)；

border-style:dotted（点划线）；

border-style:dashed（虚线）；

border-style:none（没有边框）；

border-width（边框宽度）；

border-color（设置四条边框的颜色）；

css布局：

float属性：

float：none（不浮动）

float：left（左浮动）

float：right（右浮动）

float对标签的影响：

1）float对行内属性标签的影响

2）float对块属性标签的影响

3）float能很好的解决浏览器之间解析标签时Enter键造成的显示间隙问题

4）具有float属性的对象在父标签中是不占有空间的

clear属性：

clear：none（允许两边都可以有浮动对象）

clear：both（不允许有浮动对象）

clear：left（你允许左边有浮动对象）

clear：right（不允许右边有浮动对象）

常用清浮动的位置：

1）空标签清浮动

2）overflow清除浮动

3）after清除浮动{主要用于非IE浏览器}

4）子标签浮动，给父标签浮动

5）下一标签直接清浮动

6）使用position：absolute；清除浮动

overflow属性：

overflow：visible（不剪切内容也不添加滚动条）

overflow：auto（是body对象和textarea的默认值，在需要时剪切内容并添加滚动条）

overflow：hidden（超出隐藏部分）

overflow：scroll（总是显示滚动条）

display属性：

display：block（该元素以块属性显示）

display：none（隐藏，此元素不会被显示）

display：inline（以行内属性显示）

visibility：inherit（继承上一个父标签的可见性）

visibility：visible（对象可见）

visibility：hidden（对象隐藏{占据页面空间}）

A标签的4个伪类：

a:link（未被访问前的样式表属性）

a:visited（链接地址已被访问过的样式表属性）

a:active（用户激活时的样式表属性）

a:hover（鼠标悬停时的样式表属性）

position属性：

position：relative（相对定位）

position：absolute（绝对定位）

opacity属性：

filter：alpha（opacity=80）；/*IE支持该属性*/

opacity：0.8；/*支持CSS3的浏览器*/

hack技术：

hack一般是指对程序或者系统进行非官方的修改，或者非官方的补丁够被称谓hack。

IE6 专用—height:100px;

IE7 专用*+height:100px;

IE6，IE 通用*height:100px;

input属性：

type=“text”（文本输入框）

type=“password”（在输入文字的时候显示出来的是圆点）

type=“checkbox”（复选框，可以选择多个）

type=“radio”（单选框）

type=“button”（按钮）

type=“submit”（用来提交form表单的）

type=“reset”（用来重置表单的 ）

type=“hidden”（是一个隐藏的input）

表格的设置：

border-collapse：（可以消除边框间隙，同时合并内外边框。）

border-collapse：separate（默认值。边框会被分开。）

border-collapse：collapse（边框会合并为一个单一的边框。）

border-collapse：inherit（规定应该从父元素继承border-collapse属性的值）

border-spacing：（可以消除边框间隙，不能合并内外边框。）

border-spacing：length（规定相邻单元的边框之间的距离。）

border-spacing：inherit（ 规定应该从父元素继承border-spacing属性的值 ）

rowspan（设置或返回表元横跨的行数）

colspan（规定单元格可横跨的列表）

列表的设置：

list-style-type：value（设置列表项标记的类型）

list-style-image：url（使用一幅图像来替换列表项的标记）

list-style-position：value（放置列表中的列表项标记）

list-style （是用于在一个声明中设置一个列表的所有属性的简写属性）