CSS基本样式

一、背景设置

1、background-color                    设置元素背景颜色

 background-color: red;

2、background-image                  设置元素背景图片

  background-image: url("python.png")

3、background-position               设置背景图片起始位置

 background-position:center top;

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。我们这里不详细阐述属性值，需要用到的时候大家可以在 w3school 上面查找。

主要是对位置进行操作，也可以用

 background-position:50% 50%;

以上百分比进行控制，前面的是左右百分比，后面的是上下百分比。

4、background-repeat                  设置背景图片是否重复

   background-repeat: no-repeat;  <!--no-repeat 表示不能重复，repeat 可重复，repeat-x 表示 x 轴重复，repeat-y 表示 y 轴重复-->

5、background-attachment         背景图像是否固定或者随着其余部分滚动

  background-attachment:fixed;        <!--fixed申明可视区是固定的-->

二、CSS文本设置

1、color                              文本颜色                    例：   color: aqua

2、direction                        文本方向

direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

3、line-height                    行高

4、letter-spacing                字符间距

例：h4 {letter-spacing: 20px}

5、word-spacing                行间距

例：<h1 style="word-spacing:15px;">this is a test</h1>

6、text-align                       对其元素中的文本         

例：   text-align: center;    有多个属性： left、right 和 center    分别是左右中对齐

7、text-decoration             向文本添加装饰

text-decoration 有 5 个值：

        none      关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线

例：a {text-decoration: none;}

      underline        对元素加下划线

       overline          在文本的顶端画一个上划线

        line-through   在文本中间画一个贯穿线

        blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记

8、text-indent                    缩进元素中的字母

例：p {text-indent: 5em;}

9、unicode-bidi                设置文本方向

10、white-space                 元素中空白的处理方式

在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：

11、  text-transform 属性处理文本的大小写。

这个属性有 4 个值：

    none                    默认值不做任何改动

    uppercase            转换成全大写

    lowercase            转换成全小写

    capitalize            将每一个单词的首字母转换成大写

例：h1 {text-transform: uppercase}

三、CSS连接设置

连接四种属性：

a:link {color:#FF0000;}    /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}  /* 正在被点击的链接 */

color:                                    设置连接的字体颜色

background-color:                 设置连接的背景颜色例：

四、列表标志

标志

list-style-type:属性值

控制列表标志属性

例：ul.circle {list-style-type:circle}    控制无序列表标志为空圆心

ul li {list-style-image : url(xxx.gif)}    控制无序列表标志为指定图标

list-style-type    设置列表项标志类型

list-style-position    设置列表项标志位置

list-style-image    将图像设置为列表标志

list-style    简写属性

li {list-style : url(example.gif) square inside}    将3个以上属性进行简写在一块。

五、表格

border-collapse ---设置是否把表格边框合并为单一的边框。

border-spacing ---设置分隔单元格边框的距离。

caption-side --- 设置表格标题的位置。

empty-cells ---设置是否显示表格中的空单元格。

table-layout ---设置显示单元、行和列的算法。

六、轮廓设置

outline 在一个声明中设置所有的轮廓属性。   

outline-color   设置轮廓的颜色。   

outline-style   设置轮廓的样式。   

outline-width   设置轮廓的宽度。