前端基础之CSS（1）

前端基础之CSS，只看需要的，简单memo如下。

内容 说明&&sample CSS Cascading Style Sheets CSS作用 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。 CSS 规则 由两个主要的部分构成：选择器(Selector)，以及一条或多条声明(Declaration) 选择器 需要改变样式的 HTML 元素 声明 每条声明由一个属性和一个值组成 格式 CSS声明总是以分号(;)结束，声明组以大括号({})括起来: 简单实例 p {color:red;text-align:center;} 注释 以 “/” 开始, 以 “/” 结束 id和class选择器 在HTML元素中设置CSS样式，一般需要在元素中设置”id” 和 “class”选择器。比如<p id="p1">Hello World!</p> id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。CSS 中 id 选择器以 “#” 来定义。#p1{text-align:center;color:red;} class 选择器 class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示. class 选择器使用例 .center {text-align:center;} 或者 p.center {text-align:center;} 外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部.<link rel="stylesheet" type="text/css" href="mystyle.css"> 注意：不要在属性值与单位之间留有空格 内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 <style>标签在文档头部定义内部样式表 内联样式 当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。<p style="color:sienna;margin-left:20px">This is a paragraph.</p> 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。 多重样式 如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。多重样式将层叠为一个 背景颜色 body {background-color:red;} 颜色值表示方式 十六进制/RGB/颜色名称 背景图像 body {background-image:url(‘paper.gif’);} 水平或垂直平铺 background-image:url(‘gradient2.png’);background-repeat:repeat-x; 不让图像平铺 background-repeat:no-repeat; 图像在背景中的位置 background-position:right top; 文本属性 color 设置文本颜色 direction 设置文本方向。 letter-spacing 设置字符间距 line-height 设置行高 text-align 对齐元素中的文本 text-decoration 向文本添加修饰 text-indent 缩进元素中文本的首行 text-shadow 设置文本阴影 text-transform 控制元素中的字母 unicode-bidi 设置或返回文本是否被重写 vertical-align 设置元素的垂直对齐 white-space 设置元素中空白的处理方式 word-spacing 设置字间距 字体系列 p{font-family:”Times New Roman”, Times, serif;} 字体样式 p.italic {font-style:italic;} 字体大小 h1 {font-size:40px;} em 为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。h1 {font-size:2.5em;} /* 40px/16=2.5em */ 四个链接状态 链接的样式，可以用任何CSS属性. a:link 正常，未访问过的链接 a:visited 用户已访问过的链接 a:hover 当用户鼠标放在链接上时 a:active 链接被点击的那一刻 顺序规则 a:hover 必须跟在 a:link 和 a:visited后面. a:active 必须跟在 a:hover后面 列表项标记 list-style-type: circle;list-style-type: square;list-style-type: upper-roman;list-style-type: lower-alpha; 图像列表项标记 list-style-image: url(‘sample.gif’); 表格边框 table, th, td{border: 1px solid black;} table是表格最外层。th为table header，td是table的具体每一行 单一表格边框 需要加上table{border-collapse:collapse;}