css学习01——css格式、使用方法、背景、列表、字体、文本、链接

css学习01——css格式、使用方法、背景、列表、字体、文本、链接

---

一、css格式

1、语法：CSS声明以分号(;)结束，声明组以大括号({})括起来:

2、id 和 class 选择器

id 选择器以 "#" 来定义:

#para1
{
    text-align:center;
    color:red;
}

class选择器以“ . ”来定义：

.center {text-align:center;}

二、css用法

1、外部样式表：在head标签中引入下面标签

<link rel="stylesheet" type="text/css" href="mystyle.css">

2、内部样式表：在head标签下写以下标签

<style>
/*设置样式*/
</style>

3、内联样式：在设计元素中引入以下标签

style="/*样式设置*/"
/*例如：<p style="color:sienna;margin-left:20px">这是一个段落。</p>*/

三、背景设置

body{
background-color:#b0c4de;
background-image::url('bgdesert.jpg');
background-repeat：repeat-x;no-repeat;/*水平与垂直*/
background-attachment：scroll；fixed；/*背景图片属性设置*/
background-position:right top;/*位置*/
}

四、文本设置

color:red;/*文本颜色*/
text-align:center;/*文本位置*/
text-decoration:none;/*删除链接的下划线*/
text-transform:uppercase;/*文本全制为大写*/
text-transform:lowercase;/*文本全制为小写*/
text-transform:capitalize;/*文本全制为单词首字母大写*/
letter-spacing:-3px /*字体间距*/
line-height:200% /*行间距*/
text-align:center/*文本对齐方式*/
text-indent:50px;/*文本首行缩进*/
text-shadow: 2px 2px #ff0000;/*设置文本阴影*/
word-spacing:30px;/*字间距*/

5、字体设置

font-size:40px;/*字体大小*/
font-style:normal;/*字体样式*/
font-family:"Times New Roman",Georgia,Serif;/*字体属性*/
font-weight:bold;normal;900;/*字体粗细*/

6、链接样式

link {color:#000000;} /* 未访问链接*/
visited {color:#00FF00;}  /* 已访问链接 */
hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
active {color:#0000FF;}  /* 鼠标点击时 */

7、列表样式标记

list-style-type:square;/*正方形的小黑点*/
list-style-type:upper-roman;/*I/II、III*/
list-style-type:lower-alpha;/*a、b、c*/
list-style-image: url('sqpurple.gif');/*图片*/