CSS学习笔记（一）--基础知识_css epeat-x-优快云博客

本文详细介绍了CSS的各种样式设置方法，包括背景、文本、字体、链接、列表、表格等元素的样式控制，并提供了丰富的实例。

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
这里写图片描述

空格：与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

<style type="text/css">
     p {background-color: #805b77;padding: 20px;;}
</style>
或者
<link rel="stylesheet" type="text/css" href="mystyle.css" />
或者
<p style="color:red">

CSS 样式—背景

1.背景色：可以使用 background-color 属性为元素设置背景色。如果希望背景色从元素中的文本向外少有延伸，只需增加一些内边距(padding)

2.背景图像：需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值
body {background-image: url(/i/eg_bg_04.gif);}

3.背景重复epeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺.

body{ 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
}

4.背景定位：可以利用 background-position 属性改变图像在背景中的位置。可以使用一些关键字：top、bottom、left、right 和 center。(top right 使图像放置在元素内边距区的右上角)。位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是 center。还可以用百分数表示（水平方向，垂直方向）。

5.背景关联：如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。
这里写图片描述

CSS 样式—文本

1.缩进文本:CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
p {text-indent: 5em;}

2.水平对齐:text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式.值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。
<CENTER>也能让标签居中

3.字间隔:word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

4.字母间隔:letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔

5.字符转换:text-transform 属性处理文本的大小写。这个属性有 4 个值:none;uppercase将文本转换为全大写);lowercase((和全小写字符);capitalize(只对每个单词的首字母大写).

6.文本装饰: text-decoration 属性有 5 个值：
none；underline(对元素加下划线)；overline(顶端画一个上划线)；line-through(在文本中间画一个贯穿线)；blink(会让文本闪烁)
链接默认地会有下划线,可以用text-decoration：none去掉。
还可以在一个规则中结合多种装饰。a:link a:visited {text-decoration: underline overline;}

7.处理空白符:white-space: pre;空白符不会被忽略。nowrap它会防止元素中的文本换行，除非使用了一个 br 元素。
这里写图片描述

这里写图片描述

CSS 样式—字体

1.字体风格：normal - 文本正常显示；italic - 文本斜体显示；oblique - 文本倾斜显示。

2.字体加粗:font-weight 属性设置文本的粗细,100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

2.字体大小:font-size 属性设置文本的大小.
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。
这里写图片描述

CSS 样式—CSS 链接

链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

text-decoration 属性大多用于去掉链接中的下划线：
background-color 属性规定链接的背景色

<!DOCTYPE html>
<html>
<head>
    <style>
        a.one:link {color:#ff0000;}
        a.one:visited {color:#0000ff;}
        a.one:hover {color:#ffcc00;}

        a.two:link {color:#ff0000;}
        a.two:visited {color:#0000ff;}
        a.two:hover {font-size:150%;}

        a.three:link {color:#ff0000;}
        a.three:visited {color:#0000ff;}
        a.three:hover {background:#66ff66;}

        a.four:link {color:#ff0000;}
        a.four:visited {color:#0000ff;}
        a.four:hover {font-family:'微软雅黑';}

        a.five:link {color:#ff0000;text-decoration:none;}
        a.five:visited {color:#0000ff;text-decoration:none;}
        a.five:hover {text-decoration:underline;}
    </style>
</head>

<body>
    <p>请把鼠标指针移动到下面的链接上，看看它们的样式变化。</p>
    <p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
    <p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体尺寸</a></b></p>
    <p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景色</a></b></p>
    <p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体</a></b></p>
    <p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本的装饰</a></b></p>
</body>
</html>

CSS 样式—CSS 列表

1.列表类型:要修改用于列表项的标志类型，可以使用属性 list-style-type
2.列表项图像:常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到

ul li {list-style-image : url(xxx.gif)}
li {list-style : url(example.gif) square inside}

这里写图片描述

CSS 样式—CSS 表格

1.表格边框:设置表格边框，请使用 border 属性。

table, th, td{
  border: 1px solid blue;
}

2.折叠边框:border-collapse 属性设置是否将表格边框折叠为单一边框

3.表格宽度和高度:通过 width 和 height 属性定义表格的宽度和高度

4.表格文本对齐:text-align 和 vertical-align 属性设置表格中文本的对齐方式。

5.表格内边距:如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：

6.表格颜色:

table, td, th{
  border:1px solid green;
}
th{
  background-color:green;
  color:white;
}

这里写图片描述

CSS 样式—CSS 轮廓

这里写图片描述