首页 > 代码库 > Css样式基础

Css样式基础

1.Css的语法

CSS的语法主要由两个部分组成,一个是选择器,一个是属性、

选择器又分为以下几种:

1.元素选择器:即Html标签去掉括号的就是元素

2.类选择器:所谓的类就是说class=“名称”,类的名称是可以相同,也可以不同。调用的时候类名前面要加“.”

3.id选择器:名称不能相同,具有唯一性。主要用于后台交互。调用是id的名称前要加“#”。

4.伪类:语法为selector : pseudo-class {property: value}

主要运用为:

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

其中 hover必须放在 link和visited之后。

使用最多的选择器就是以上的几种。

2.背景

CSS 属性定义背景效果:

background-color

background-image

background-repeat

background-attachment

background-position

3.文本:

文本格式text主要语法为标签{属性}其属性主要有以下这些:

 color               设置文本颜色
direction             设置文本方向。
line-height             设置行高。
letter-spacing           设置字符间距。
text-align             对齐元素中的文本。
text-decoration           向文本添加修饰。
text-indent             缩进元素中文本的首行。
text-shadow             设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform             控制元素中的字母。
unicode-bidi             设置文本方向。
white-space             设置元素中空白的处理方式。
word-spacing             设置字间距。

4表格 Table

主要格式为

<table>

  <tr>

    <td></td>

      .....

  </tr>

</table>  

属性有

border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。

 

 

Css样式基础