CSDN博客

img lovesea9926

div+css入门篇二

发表于2008/9/28 13:19:00  291人阅读

 

基本语法

一个样式(Style)的语法由三部分构成:Selector(中文叫选择器有点怪怪的,就用英文吧),属性(Property),属性值(Value)。

selector {property: value}

举个例子,下面的代码p就是selector,color就是属性,blue就是属性值。

p {color:blue}

HTML中所有的Tag都可以作为selector。

注:如果你想为Style加多个属性,在两个属性之间要用分号加以分隔。下面的Style就包含2个属性,一个是对齐方式居中,一个字体颜色为红,当中用分号分隔开。

p {text-align:center;color:red} 

为了提高Style代码的可读性,你也可以分行写:

p
{
text-align: center;
color: black;
font-family: arial
} 

组合(Grouping)

你也可以将相同的属性和属性值赋予多个Selector。Selector之间用逗号分隔

h1,h2,h3,h4,h5,h6 
{
color: red
}

上面的例子是将所有正文标题(<h1>到<h6>)的字体颜色都变成红色。

Class Selector

利用Class Selector,你可以用同样的HTML Tag构成不同的样式。比如说,你希望段落<p>有两种样式,一种是居中对齐,一种是居右对齐。你就可以写如下样式:

p.right {text-align:right}
p.center {text-align:center}

其中right和center就是两个class。然后你就可以引用这两个class,示例代码如下:

<p class="center">这一段居中显示。</p>
<p class="right">这一段是居右显示。</p>

你也可以不用HTML Tag,直接用.加上Class名称作为一个Selector。示例代码如下:

.center {text-align: center} 

这种通用的Class Selector就没有Tag的局限性,可以用于不同的Tag。比如:

<h1 class = "center">这个标题居中显示。</h1>
<p class = "center">这个段落居中显示。</p>

Contextual Selector

你可以为嵌入其它Tag的Tag定义样式,示例代码如下:

p em{color: red}

Em这个Tag嵌套在P里面。p em就叫做Contextual Selector,定义嵌套于P里的Em的样式。这个例子表示,在P里面的用Em这个Tag标记的字体颜色是红色。

背景颜色属性(background-color)

这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性。

body {background-color:#99FF00;}

上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。

背景图片属性(background-image)

这个属性为HTML元素设定背景图片,相当于HTML中background属性。

<body style="background-image:url(../images/css_tutorials/background.jpg)">

上面的代码为Body这个HTML元素设定了一个背景图片。

背景重复属性(background-repeat)

这个属性和background-image属性连在一起使用,决定背景图片是否重复。如果只设置background-image属性,没设置background-repeat属性,在缺省状态下,图片既横向重复,又竖向重复。

  • repeat-x 背景图片横向重复
  • repeat-y 背景图片竖向重复
  • no-repeat 背景图片不重复
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}

上面的代码表示图片竖向重复。

背景附着属性(background-attachment)

这个属性和background-image属性连在一起使用,决定图片是跟随内容滚动,还是固定不动。这个属性有两个值,一个是scroll,一个是fixed。缺省值是scroll。

body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}

上面的代码表示图片固定不动,不随内容滚动而动。

背景位置属性(background-position)

这个属性和background-image属性连在一起使用,决定了背景图片的最初位置。

body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}

上面的代码表示背景图片的初始位置距离网页最左面20px,距离网页最上面60px。

 

背景属性(background)

这个属性是设置背景相关属性的一种快捷的综合写法, 包括background-color, background-image, background-repeat, backgroundattachment, background-position。

body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}

上面的代码表示,网页的背景颜色是翠绿色,背景图片是background.jpg图片,背景图片不重复显示,背景图片不随内容滚动而动,背景图片距离网页最左面40px,距离网页最上面100px。

边框风格属性(border-style)

这个属性用来设定上下左右边框的风格,它的值如下:

  • none (没有边框,无论边框宽度设为多大)
  • dotted (点线式边框)
  • dashed (破折线式边框)
  • solid (直线式边框)
  • double (双线式边框)
  • groove (槽线式边框)
  • ridge(脊线式边框)
  • inset (内嵌效果的边框)
  • outset (突起效果的边框)

边框宽度属性(border-width)

这个属性用来设定上下左右边框的宽度,它的值如下:

  • medium (是缺省值)
  • thin (比medium细)
  • thick (比medium粗)
  • 用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。

边框颜色属性(border-color)

这个属性用来设定上下左右边框的颜色。例句如下:

.d5 {border-color:gray;border-style:solid;}

边框属性(border)

这个属性是边框属性的一个快捷的综合写法,它包含border-width, border-style和border-color。例句如下:

.d1 {border:5px solid gray;}

单边边框属性

上下左右四个边框不但可以统一设定,也可以分开设定。

设定上边框属性,你可以使用border-top, border-top-width, border-top-style, border-top-color。

设定下边框属性,你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。

设定左边框属性,你可以使用border-left, border-left-width, border-left-style, border-left-color。

设定上边框属性,你可以使用border-right, border-right-width, border-right-style, border-right-color。

0 0

相关博文

我的热门文章

img
取 消
img