css如何使用

html-css011

css如何使用,第1张

css用于控制html的样式和布局。

主要分内联样式,内部样式,外部样式。

内联样式就是在html的元素里直接使用css,比如:

<p style="background-color:green">这是一个段落。</p>

这就是直接在元素中用css设置背景颜色。适用于单元素,不会影响其他元素。

内部样式则是把css放在head部分用 <style>标签来定义,比如:

<head>

<style type="text/css">

body {background-color:yellow}

p {color:blue}</style>

</head>

其中body {background-color:yellow}定义了整个body的背景颜色。

p {color:blue}</style>则是定义了页面里面所有文本的文字颜色。

优点是整个html页面都能调用。

第三种则是外部样式,就是把css部分做成单独的css文件,然后再html页面里面引用,比如

<head>

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

</head>

相当于内部样式的代码部分放入mystyle.css这个文件,然后在此处引用。

外部样式最大的优点是其他html页面也能直接用link直接调用,比如你好几个页面需要类似的风格,那么把相同的布局内容放入CSS文件里面就会非常合适。

使用CSS的 z-index属性控制元素的堆放可以很容易的解决这个问题。本文为大家详细介绍CSS堆放元素的使用。定位 元素的堆放顺序依赖于CSS的定位方面。有三种定位方式可供选择:相对定位、绝对定位和固定位置。 相对定位:定位元素通过侧偏移属性进行移动。当一个项目是相对定位时,这时会创建一个包含块将所有该项目的子项目包含其中。该块与元素的定位位置相一致,这样就可以相对一个元素的父元素来定位它,因为它的父元素的位置已经确定了。

绝对定位:当元素绝对定位时,它们就被完全从页面的其它元素流中移除;也就说与绝对定位元素根据包含它们的块定位,边缘使用侧偏移属性定位。绝对定位的元素不随其它元素浮动,其它元素也不围绕它浮动。因此,一个绝对定位的元素可能会覆盖其它元素。

固定位置:固定位置的元素和绝对定位模型类似,但是固定位置元素被完全从文档中移除,不与文档中的任何元素有相对位置。使用定位置定位,你可以仅使用CSS就可以创建类似HTML框架的接口。

定位元素需要指定偏移值。这些偏移通过使用顶部、左边、右边和底部样式属性来指定。每个值被解释为相应元素的外部边缘根据它原来的位置应该移动距离。 列表A中的例子包含了相对定位和绝对定位。页面使用绝对定位和百分比值被水平分为三部分。文本使用相对定位放置在每部分中。(如果你想查看代码,请点击列表A的链接)

CSS Positioning DIV#topDIV#middleDIV#bottom

.title

This is a test