div+css入门篇二

转载 2008年09月28日 13:19:00
 

基本语法

一个样式(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。

Python之路【第三篇】:Python基础(二)

内置函数 一 详细见python文档,猛击这里 文件操作 操作文件时,一般需要经历如下步骤: 打开文件操作文件 一、打开文件 ? 1 文件句柄 = file('文件路径', '...
  • xiangxizhishi
  • xiangxizhishi
  • 2017年12月19日 11:14
  • 32

ROS学习(二)ROS入门简介

(在ubuntu下编辑可能效果不太好) 构建一个包必须包含两个文件:    package.xml    CMakeLists.txt 步骤: cd ~/catkin_ws/src ...
  • zhangxiao93
  • zhangxiao93
  • 2015年07月17日 17:11
  • 707

CCF中学生计算机程序设计入门篇练习2.4.2(NOI 1002 三角形) pascal

1002.三角形 (Standard IO) 题目描述 输入三角形三边长a,b,c(保证能构成三角形),输出三角形面积。...
  • qq_15851711
  • qq_15851711
  • 2017年07月16日 20:29
  • 404

DIV+CSS—菜鸟分享学习心得!入门篇

DIV+CSS遵循的是网页标准设计,也就是web标准,而web标准最注重的就是:“结构的语义化”(分别定义,区块分明,强化重用,代码易读)。 DIV排版的核心:即CSS盒子模式 CSS  每个div盒...
  • wengman
  • wengman
  • 2009年07月11日 17:42
  • 673

div+css小案例

demo.html 这是个css体验例子 my.css .style{ /*宽度*/ width:400px;/*一定要有分号*/ height:300px;...
  • wfdtxz
  • wfdtxz
  • 2012年12月11日 22:38
  • 2556

android 学习之路一入门篇一

1 android ADT和 android SDK,AVD的关系: ADT(Android Development Tools) :android 开发工具,它是eclipse的一个插件,用来开发...
  • xp215774576
  • xp215774576
  • 2015年04月26日 17:30
  • 321

div+css(二)

前言:CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距;而现在则采用层(div)来定位,通过层的margin...
  • ac903919
  • ac903919
  • 2010年02月26日 10:34
  • 465

Div+css简介

1、Div+css简介: 传统的页面是用table来布局和显示数据。这样有以下缺点: (1)、显示数据和样式是绑定在一起的,牵一发而动全身; (2)、布局不够灵活; (3)、可能导致一个页面有...
  • u013372487
  • u013372487
  • 2015年05月18日 10:42
  • 602

十天学会web标准(DIV+CSS)系列(十)div+css网页标准布局实例教程

一、建立站点 前面的课程都是零碎讲解一些相关知识,那么要做一个网站,首先需要建立一个站点。那么什么是站点,为什么要建立一个站点呢?因为网站不同于其它文件,比如一个图片,放到哪个盘哪个目录下都可以访问...
  • jarniyy
  • jarniyy
  • 2016年03月21日 14:46
  • 3886

Windows驱动开发遇到的问题(二)

今天工作遇到的问题: 1.我是从WDF框架开始学习驱动,编译环境也是VS2012+WDK8的组合,驱动工程完成以后,生成的驱动文件只有VISTA,WIN7和WIN8的版本,虽然说 微软已经停止了XP系...
  • pengxiao618
  • pengxiao618
  • 2014年03月19日 10:01
  • 840
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div+css入门篇二
举报原因:
原因补充:

(最多只允许输入30个字)