CSS初学

1 CSS:cascading stylesheet,级联(层叠)样式表
 数据和表现分离,统一的样式控制
 W3C 定义了CSS:统一使用CSS 的语法来定义所有元素的外观
 没有使用CSS之前:将每个样式使用属性的方式来定义,不能统一控制,
 不能实现数据和表现的分离
2 CSS 的基础语法
 用于定义样式
  样式属性的名称:值;样式属性的名称:值;...
  color:red;font-size:20pt;
 用来定义样式选择器
  选择器 {样式定义}

3 CSS 的使用方式:
 内联:将样式定义在 元素的 style 属性中
  没有分离;没有重用,不好维护
 内部样式表:将样式定义在页面的 head 元素里的 style 元素里
  使用选择器;分离;仅限于当前页面的重用
 外部样式表:样式定义在单独的文件(后缀为 css)里
  页面引入样式表文件
 
4 CSS 优先级别
 大多数样式可以继承,如果重复,以就近优先
  <p>aa<span>span text</span>bbb</p>
 默认样式
 内部或者外部样式表:就近,取决于先后顺序
 内联样式

5 选择器的声明:将样式定义灵活的运用于页面元素
 元素(名称)选择器:以元素的名称作为选择器的名称
  必须合法的html 标记的名称
  同一类标记实现样式定义;不能实现跨类别的,不能实现同一种元素中的细分
 类选择器:
  .className {样式}
  <元素 class="className" >
 分类选择器:同一种元素中细分
  元素的名称.className {样式}
  <元素 class="">
 元素 ID 选择器:将样式局限于页面上某一个元素使用
  #元素id值 {样式}
  <元素 id="">

 群组选择器:对于多个选择器实现统一的定义
  p,h1.first,#td1 {样式}
 
 派生选择器:和元素的包含层次相关,以元素的顺序定义
  p span {样式}

  td.header a {color:red;}
  td.left a {}
  td.right a {}
<table>
 <tr>
  <td colspan="2" class="header">
   <a>login</a>
   <a>register</a>
   <a>login</a>
   <a>register</a>
   <a>login</a>
   <a>register</a>
  </td>
 </tr>
</table>

 伪类:元素有多种状态,每种状态定义样式
  a:link:没有被访问过
  a:hover:鼠标悬停,可用于其他元素
  a:active:点下
  a:visited:访问过的

  input:hover 

6 样式属性
 尺寸的单位: px(像素) pt(磅) cm mm in %
 颜色的单位:单词 #FFFFFF

7 尺寸(面积)的属性
 width
 height

8 边框的属性
 综合定义 border:width style color;
 单样式定义
  border-width:1px;
  border-style:solid;
  border-color:red;
 单边框定义:
  border-left/right/top/bottom:1px solid red;

9 显示属性
 display:修改html元素原有的显示效果
  none:不显示,不占用页面原有的空间
   常和js一起实现页面的动态效果
  inline:行内
  block:块
 html 元素分为两类:
  块级元素(独占一行):div/p/hn/table/ul/ol
  行内元素(共处一行):span/a/img/input,设置高和宽无用

10 定位属性
 position:html文档中的元素默认按照流的方式布局
  可以设置为static以外的其他值,脱离了原有的流布局模式
  static:默认的流模式
  relative:相对定位,偏移量相对于原位置而言
  absolute:绝对定位,偏移量相对于父元素的边框而言
   偏移属性:位置
 top/bottom/left/right:
   堆叠顺序:层数
 z-index

11 文本属性:设置文本内容的样式
 color
 font-size
 font-weight:粗体显示
 font-family:字体的名称
 text-decoration:none/underline
 text-align:left/center/right

12 背景属性:设置元素的背景
 background-color:
 background-image:url(a.jpg);
 background-repeat:repeat/repeat-x/repeat-y/no-repeat;
  常用于实现特殊的背景效果,比如渐变色
 background-position:value1 value2;
  常用于实现在背景图像上的偏移
 background-attachment:附着方式
  scroll/fixed
  类似于水印的效果

13 边距属性
 box 模型
 margin:外边距
  margin-left/top/right/bottom
 padding:内边距
  padding-left/top/right/bottom

 padding:10px;
 简写的办法(精确的设置每个方向的边距):
  padding:10px 30px 50px 5px;
   top  right bottom left

14 浮动属性:需要将多个块级元素位于同一行显示
 float:left/right
  元素脱离原有的流布局,浮动的停靠
  可能会对后续元素的布局带来影响
 clear:left/right/both
  清除附近浮动元素带来的影响

15 列表的样式
 list-style-type:none;

CSS初学,古老的榕树,5-wow.com