CSS学习

来源：互联网发布：java书籍推荐编辑：程序博客网时间：2024/05/21 08:40

选择器的分组
h1,h2,h3,h4,h5,h6 {
color: green;
}
继承
body {
     font-family: Verdana, sans-serif;
     }
友善地对待Netscape 4
body {
     font-family: Verdana, sans-serif;
     }

p, td, ul, ol, li, dl, dt, dd {
     font-family: Verdana, sans-serif;
     }

摆脱继承的方式是重写

派生选择器
li strong {
    font-style: italic;
    font-weight: normal;
}

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

id 选择器
#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

id 选择器和派生选择器

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }

#sidebar h2 {
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
    text-align: right;
    }

div#sidebar {
    border: 1px dotted #000;
    padding: 10px;
    }

CSS 类选择器
.center {text-align: center}

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

和 id 一样，class 也可被用作派生选择器：

.fancy td {
    color: #f60;
    background: #666;
    }

元素也可以基于它们的类而被选择：

和 id 一样，class 也可被用作派生选择器：

.fancy td {
    color: #f60;
    background: #666;
    }

在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表

格或者一个 div）

td.fancy {
    color: #f60;
    background: #666;
    }

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。
<td class="fancy">

外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

内部样式表

<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>

内联样式

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

background     简写属性，作用是将背景属性设置在一个声明中。
background-attachment     背景图像是否固定或者随着页面的其余部分滚动。
background-color     设置元素的背景颜色。
background-image     把图像设置为背景。
background-position     设置背景图像的起始位置。
background-repeat     设置背景图像是否及如何重复。

CSS 文本属性可定义文本的外观。

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

CSS 文本属性
属性     描述
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     设置字间距。

CSS 字体属性
属性     描述
font     简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family     设置字体系列。
font-size     设置字体的尺寸。
font-size-adjust     当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch     对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style     设置字体风格。
font-variant     以小型大写字体或者正常字体显示文本。
font-weight     设置字体的粗细。

p.ex2
{
font:italic bold 12px/30px arial,sans-serif;
}

CSS 列表属性(list)
属性     描述
list-style     简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image     将图象设置为列表项标志。
list-style-position     设置列表中列表项标志的位置。
list-style-type     设置列表项标志的类型。
marker-offset

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

CSS Table 属性

CSS 表格属性允许你设置表格的布局。（请注意，本节介绍的不是如何使用表来建立布局，而是要介绍 CSS 中表本身如何布局。）
属性     描述
border-collapse     设置是否把表格边框合并为单一的边框。
border-spacing     设置分隔单元格边框的距离。（仅用于 "separated borders" 模型）
caption-side     设置表格标题的位置。
empty-cells     设置是否显示表格中的空单元格。（仅用于 "separated borders" 模型）
table-layout     设置显示单元、行和列的算法。

CSS 轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS 边框属性

"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。
属性     描述     CSS
outline     在一个声明中设置所有的轮廓属性。     2
outline-color     设置轮廓的颜色。     2
outline-style     设置轮廓的样式。     2
outline-width     设置轮廓的宽度。

<style type="text/css">
p
{
border: red solid thin;
}
p.dotted {outline-style: dotted}
p.dashed {outline-style: dashed}
p.solid {outline-style: solid}
p.double {outline-style: double}
p.groove {outline-style: groove}
p.ridge {outline-style: ridge}
p.inset {outline-style: inset}
p.outset {outline-style: outset}
</style>

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

CSS 边框属性

"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。
属性     描述     CSS
outline     在一个声明中设置所有的轮廓属性。     2
outline-color     设置轮廓的颜色。     2
outline-style     设置轮廓的样式。     2
outline-width     设置轮廓的宽度。

CSS 外边距合并

CSS position 属性

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

static
    元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
    元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
    元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所

占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
    元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

CSS 定位属性

CSS 定位属性允许你对元素进行定位。
属性     描述
position     把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top     定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right     定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom     定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left     定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow     设置当元素的内容溢出其区域时发生的事情。
clip     设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align     设置元素的垂直对齐方式。
z-index     设置元素的堆叠顺序。

CSS 绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正

常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

属性     描述
height     设置元素的高度。
line-height     设置行高。
max-height     设置元素的最大高度。
max-width     设置元素的最大宽度。
min-height     设置元素的最小高度。
min-width     设置元素的最小宽度。
width     设置元素的宽度。