这段时间学习了玩了DIV+CSS的视频,感觉效率不高.前边的Javascript总结的不好，但是看了后边的JQuery，觉得学习的再多一点，再进行Javascript的总结。DIV+CSS总结，估计会用4——5篇博客，学习如何使用CSS+DIV更加方便快捷的制作网页。

这篇我博客我们从这几点学习一下：

首先，看一下CSS的概念：CSS(Cascading Style Sheet),中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

CSS控制页面的方法有三种：分别为行内样式，内嵌样式和链接样式，对于稍微庞大的网页我们都会使用链接样式，这是因为其将HTML和CSS分开编写，便于后期维护，而且明朗清晰。这里我们看三个例子：

行内样式：

内嵌样式：

链接样式：

二，我们看一下CSS的基本语法：

1，对于CSS选择器，也就是我们选择哪个html物件进行CSS样式控制，有三种：分别为标记选择器：

类别选择器：

和ID选择器：

2，对于CSS的声明这里有三种，集体声明，全局声明和嵌套声明，看下边两个例子：

<html>

<head>

<title>全局声明</title>

<style type="text/css">

<!--

*{								/* 全局声明 */

	color: purple;				/* 文字颜色 */

	font-size:15px;				/* 字体大小 */

}

h2.special, .special, #one{		/* 集体声明 */

	text-decoration:underline;	/* 下划线 */

}

-->

</style>

   </head>

<body>

	<h1>全局声明h1</h1>

	<h2 class="special">全局声明h2</h2>

	<h3>全局声明h3</h3>

	<h4>全局声明h4</h4>

	<h5>全局声明h5</h5>

	<p>全局声明p1</p>

	<p class="special">全局声明p2</p>

	<p id="one">全局声明p3</p>

</body>

</html>

效果图（注意下滑线）：

下边这个例子为嵌套声明，可以帮助我们很精确的找到我们想控制的单位：

<html>

<head>

<title>CSS选择器的嵌套声明</title>

<style type="text/css">

<!--

p b{							/* 嵌套声明 */

	color:maroon;				/* 颜色 */

	text-decoration:underline;	/* 下划线 */

}

-->

</style>

   </head>

<body>

	<p>嵌套使<b>用CSS</b>标记的方法</p>

	嵌套之外的<b>标记</b>不生效

</body>

</html>

效果图：

3，CSS的继承，我们也看个例子就明白了，也就像Javascript中精确的样式设置覆盖大的设置：

<html>

<head>

	<title>父子关系</title>

	<base target="_blank">

<style>

<!--

h1{

	color:red;					/* 颜色 */

	text-decoration:underline;	/* 下划线 */

}

h1 em{							/* 嵌套选择器 */

	color:#004400;				/* 颜色 */

	font-size:40px;				/* 字体大小 */

}

-->

</style>

   </head>

<body>

	<h1>祖国的首都<em>北京</em></h1>

	<p>欢迎来到祖国的首都<em>北京</em>，这里是全国<strong>政治、<a href="economic.html"><em>经济</em></a>、文化</strong>的中心</p>

	<ul>

		<li>在这里，你可以：

			<ul>

				<li>感受大自然的美丽</li>

				<li>体验生活的节奏</li>

				<li>领略首都的激情与活力</li>

			</ul>

		</li>

		<li>你还可以：

			<ol>

				<li>去八达岭爬长城</li>

				<li>去香山看红叶</li>

				<li>去王府井逛夜市</li>

			</ol>

		</li>

	</ul>

	<p>如果您有任何问题，欢迎<a href="contactus">联系我们</a></p>

</body>

</html>

效果图：

三，CSS文字样式的设置其实就和我们在Word设置字体样式一样，只要我们知道设置字体样式的一些属性方法即可，剩下看一些简单的小例子即可：

关键字

含义

Font-family

设置字体样式，例如：宋体，楷体等

Font-size

设置字体大小，单位可以是in,cm,mm,%相对值等

Color

字体样色，可以是red等单词，#******，rgb(*%,*%,*%)等

Font-weight

字体粗细，可以是数字，normal等

Font-style

字体是否为斜体:italic

text-decoration

字体的下划线，顶画线，删除线等

text-transform

英文字母大小写问题

text-align

对齐方式

letter-spacing

字间距

line-height

行间距

四，设置图片格式：

这里我举几个例子：

1，图片边框的设置：

<html>

<head>

<title>边框</title>

<style>

<!--

img.test1{

	border-style:dotted;	/* 点画线 */

	border-color:#FF9900;	/* 边框颜色 */

	border-width:5px;		/* 边框粗细 */

}

img.test2{

	border-style:dashed;	/* 虚线 */

	border-color:blue;		/* 边框颜色 */

	border-width:2px;		/* 边框粗细 */

}

-->

</style>

   </head>

<body>

	<img src="banana.jpg" class="test1">

	<img src="banana.jpg" class="test2">

</body>

</html>

效果图：

2，图片的缩放：

3，图片的对齐方式，这里简单总结个水平对齐的例子：

<html>

<head>

<title>水平对齐</title>

   </head>

<body>

<table width="100%" border="1">

	<tr><td style="text-align:left;"><img src="building.jpg"></td></tr>

	<tr><td style="text-align:center;"><img src="building.jpg"></td></tr>

	<tr><td style="text-align:right;"><img src="building.jpg"></td></tr>

</table>

</body>

</html>

4，图文混排：

<html>

<head>

<title>图文混排</title>

<style type="text/css">

<!--

body{

	background-color:bb0102;	/* 页面背景颜色 */

	margin:0px;

	padding:0px;

}

img{

	float:left;					/* 文字环绕图片 */

	/*margin-right:50px;			/* 右侧距离 */

	/*margin-bottom:25px;			/* 下端距离 */

}

p{

	color:#FFFF00;				/* 文字颜色 */

	margin:0px;

	padding-top:10px;

	padding-left:5px;

	padding-right:5px;

}

span{

	float:left;					/* 首字放大 */

	font-size:85px;

	font-family:黑体;

	margin:0px;

	padding-right:5px;

}

-->

</style>

   </head>

<body>

	<img src="chunjie.jpg" border="0">

	<p><span>春</span>节古时叫“元旦”。“元”者始也，“旦”者晨也，“元旦”即一年的第一个早晨。《尔雅》，对“年”的注解是：“夏曰岁，商曰祀，周曰年。”自殷商起，把月圆缺一次为一月，初一为朔，十五为望。每年的开始从正月朔日子夜算起，叫“元旦”或“元日”。到了汉武帝时，由于“观象授时”的经验越来越丰富，司马迁创造了《太初历》，确定了正月为岁首，正月初一为新年。此后，农历年的习俗就一直流传下来。</p>

	<p>据《诗经》记载，每到农历新年，农民喝“春酒”，祝“改岁”，尽情欢乐，庆祝一年的丰收。到了晋朝，还增添了放爆竹的节目，即燃起堆堆烈火，将竹子放在火里烧，发出噼噼啪啪的爆竹声，使节日气氛更浓。到了清朝，放爆竹，张灯结彩，送旧迎新的活动更加热闹了。清代潘荣升《帝京岁时记胜》中记载：“除夕之次，夜子初交，门外宝炬争辉，玉珂竞响。……闻爆竹声如击浪轰雷，遍于朝野，彻夜无停。”</p>

	<p>在我国古代的不同历史时期，春节，有着不同的含义。在汉代，人们把二十四节气中的“立春”这一天定为春节。南北朝时，人们则将整个春季称为春节。1911年，辛亥革命推翻了清朝统治，为了“行夏历，所以顺农时，从西历，所以便统计”，各省都督府代表在南京召开会议，决定使用公历。这样就把农历正月初一定为春节。至今，人们仍沿用春节这一习惯称呼。</p>

</body>

</html>

效果图：

综上，为DIV+CSS的基础简单总结一，多看看例子，多敲敲例子效果会更好！

精通CSS+DIV基础总结(一)的更多相关文章

  1. 精通CSS+DIV基础总结(二)

    上一篇我们已经总结了部分CSS+DIV相关知识,这篇我们接着总结,从下边几个方面学习一下: 一,我们看如何设置网页的背景,顾名思义背景可以通过颜色和图片来设置,下边我们看一下如何设置: 颜色的设置非常 ...

  2. 精通CSS+DIV基础总结（三）

    Div+CSS可是实现简单的网页设计,对于需要添加动作,更方便的交互,Javascript给我们提供了方便:数据的存储可以利用XML使其更加方便:而对于减少页面与服务器的交互,可以利用Ajax技术,与 ...

  3. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  4. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  5. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  6. 精通CSS+DIV网页样式与布局--滤镜的使用

    在上篇博客中,小编主要简单的介绍了使用CSS,如何制作实用菜单,今天我们继续来总结有关CSS的基础知识,今天小编主要简单的来介绍一下CSS中关于滤镜的使用,首先,小编先来简单的介绍一下滤镜,我们这次来 ...

  7. 精通CSS+DIV网页样式与布局--设置表单和表格

    表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...

  8. 精通CSS+DIV网页样式与布局--制作实用菜单

    在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...

  9. 精通CSS+DIV网页样式与布局--页面背景

    上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...

随机推荐

  1. SD卡在单片机上的应用

    (1)SD卡的引脚定义:  SD卡SPI模式下与单片机的连接图: 注意:SPI模式时,这些信号需要在主机端用10~100K欧的电阻上拉.      SD卡支持两种总线方式:SD方式与SPI方式.    ...

  2. 【安装SQLserver2008R2 出现错误，临时类 result=1】

    去服务中,停止此  AliWorkbench Safe service 服务....玛德,千牛工作台.垃圾

  3. Opencv下图像对鼠标事件的响应

    直接上代码: //////////////////////////////////////////////////////////////////////// // // 该程序从文件中读入一幅图像, ...

  4. uva 10041 Vito's Family_贪心

    题意:给你n个房子的距离,问那个房子离别的房子的距离最近,并且输出与别的房子距离的总和 思路:排序一下,中间的房子离别房子距离必然是最少的. #include <iostream> #in ...

  5. Z.Studio高级成衣定制(双井店)价格,地址(图)-北京-大众点评网

    Z.Studio高级成衣定制(双井店)价格,地址(图)-北京-大众点评网 Z.Studio高级成衣定制(双井店)

  6. OpenCms创建站点过程图解——献给OpenCms的刚開始学习的人们

    非常多人都听说了OpenCms,知道了它的强大,索性的下载安装了,最终见到了久违OpenCms,看到了它简洁的界面,欣喜过后却不免一脸茫然,这个东西怎么用,我怎么用它来建站,从哪開始,无从下手,找资料 ...

  7. IOC原理分析

    IOC(inversion of control)控制反转 在我们的程序中,要实现某个功能,我们都会用到两个或两个以上的类来协同完成,那么在一个类中,我们就会要有它的合作类的引用,也就是说这个类依赖于 ...

  8. SQL Server Reporting Services (SQLEXPRESS) 服务占用80端口

    win7, 好多时候,看到system进程占用了80端口,这个是系统进程,不能直接结束.我们不知道这个进程的哪个服务占用了80端口,这里记录其中一个服务"SQL Server Reporti ...

  9. 前端资料QQ群交流

    转:https://github.com/jsfront/src/blob/master/qq.md 这本来是我QQ群内部的一份公共约定的日常交流规则,后来得到大伙的一致认可,并用实际行动来捍卫它,使 ...

  10. 使用ADO.net中的链接字符串

    需要引用:System.Configuration命名空间 ConfigurationManager.ConnectionStrings["sqlConnStr"].Connect ...