CSS基本功能介绍

CSS

body

CSS 背景属性

Property	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

背景颜色

background-color:#d0e4fe;

背景图片

background-image: url("/resources/img/pic/1.jpg");
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

background-repeat:repeat-x;水平平铺

background-repeat:repeat-y;垂直平铺

background-repeat:no-repeat; 不平铺

background-position:right top;背景位置

CSS background-attachment 属性

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。 阅读关于 initial 内容
inherit	指定 background-attachment 的设置应该从父元素继承。

文本的对齐方式

h1 {text-align:center;}

CSS 链接

• a:link - 正常，未访问过的链接

• a:visited - 用户已访问过的链接

• a:hover - 当用户鼠标放在链接上时

• a:active - 链接被点击的那一刻

  a:link {background-color:#B2FF99;}
  a:visited {background-color:#FFFF85;}
  a:hover {background-color:#FF704D;}
  a:active {background-color:#FF704D;}
  

  CSS 列表

  ul.a {list-style-type: circle;}
  ul.b {list-style-type: square;}
   
  ol.c {list-style-type: upper-roman;}
  ol.d {list-style-type: lower-alpha;}
  list-style-type: none; 移除默认设置
  

  ul
  {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
  }
  ul li
  {
      background-image: url(sqpurple.gif);
      background-repeat: no-repeat;
      background-position: 0px 5px; 
      padding-left: 14px; 
  }
  例子解释：
  
  ul:
  设置列表类型为没有列表项标记
  设置填充和边距 0px（浏览器兼容性）
  ul 中所有 li:
  设置图像的 URL，并设置它只显示一次（无重复）
  您需要的定位图像位置（左 0px 和上下 5px）
  用 padding-left 属性把文本置于列表中
  

  盒子

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  边距)** - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。