CSS的基本复习1

基础

优先级：元素选择器<类选择器<id选择器

类选择器(元素标签需要使用到class属性)：

.classname{ text-align：center;}

id选择器（元素标签需要使用id属性并且id唯一）：

#red{color:red;}

元素选择器（选择器的名字就是元素标签呢的名字）：

p{font-style:italic;}

属性选择器(对带有指定属性的 HTML 元素设置样式 Internet Explorer 7 

（以及更高版本）在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 

及更低的版本不支持属性选择器。)

[title]{color:red;}:例子为带有 title 属性的所有元素设置样式.

[title=W3School]{color:red;}:例子为 title="W3School" 的所有元素设置样式

导入CSS样式的几种方式

1.外部样式表(从外部导入一个CSS文件)：例子;<link rel = "stylesheet" type="text/css" href ="mystyle.css">

2.内部样式表(一般写在head标签下)：<style type="text/css">p{margin-left:20px;}<style>

3.内联样式：例子：<p style="color:red;margin:10px;">gsdjkagsj</p>

优先级：外部< 内部<内联

CSS样式

背景：background-color

背景图片：background-image:url(path)

背景重复(需要在页面上对背景图像进行平铺);background-repeat:repeat-y;

注意;属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 

分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺

背景定位：background-position：center（也可以使用像素值，百分数，最多出现两个值）

简写：background(background 简写属性在一个声明中设置所有的背景属性)：color,position，size，repeat，

image（一般不区分顺序） 

缩进文本( text-indent);一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的

替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其

余文本移动。单位有px或em，百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元

素的第一行会缩进其父元素宽度的 20%

水平对齐（text-align）：值有left，right，center

垂直对齐：vertical-align：设置垂直对齐方式，比如顶部对齐（top）、底部（bottom）对齐或居中对齐（center）

字间隔（word-spacing）：可以改变字（单词）之间的标准间隔，normal（默认0）

字母间隔（letter-spacing）：字母间隔修改的是字符或字母之间的间隔

文本装饰（text-decoration）：值有：none，underline，overline（会在文本的顶端画一个上划线），line-through（在文本中间画一个贯穿线），blink（文本闪烁）注意：当这个属性的值在一个标签上重复出现时，不会累积效果而是会直接替换效果。

文本方向（direction）：影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对

齐元素中最后一行的为止。注意：direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。

如果显示从右到左的文本，应使用值 rtl。

设置元素的行高：line-height

指定字体系列（font-family）

字体风格（font-style）：normal，italic，oblique

字体加粗（font-weight）：100~900（normal：400）

字体大小（font-size）：使用px值来控制，使用em会比较好（W3C 推荐使用 em 尺寸单位）

有关字体的属性可以使用font来一起设置可按style，variant，weight，size，line-height，family（一般按顺序，但也可以不按顺序，这是为了避免出错）

列表（ul ol）

列表的类型：list-style-type:square

列表项图像：list-style-image：url（path）

列表标志的位置：list-style-position

简写：list-style：url（path） square inside

表格

边框：border：1px solid blue

折叠边框：border-collapse：collapse：设置是否将表格边框折叠为单一边框

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

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

宽和高：width和height

边距;padding 和 margin（一般最好使用内边距，因为不容易出错）

绘制标签的轮廓（不如用border这个要在ie8以上才支持）：

outline:#00ff00 dotted thick;

outline-style:dotted;
outline-color:#00ff00;

outline-width:thin