CSS英文名Cascading Style Sheet，中文名字叫层叠样式表，是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言，DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。“DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。

接下来，小编会从最基础的CSS.DIV网页样式与布局，开始慢慢的介绍，一点点的深入，然后结合例子，慢慢分析，希望对大家有所帮助。通常我们在学习CSS时，应该尽量的参照其她网站的编写CSS。比如百度，谷歌等，通过学习其她网站的CSS代码，可以很快的对页面设计有不一样的心动感觉，更容易上手。这个我们叫做“站在巨人的肩膀上。” 今天小编主要简单的介绍一下CSS的基本概念以及CSS的基本语法，首先我们来看一张图：

接着，小编会顺着这张图的脉络，依次减少CSS的基本知识。

    初探CSS

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

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

基本语法

对于CSS选择器，也就是我们选择哪个html物件进行CSS样式控制，有三种：分别为标记选择器，类别选择器和ID选择器，接下来，小编对这三个选择器进行详细介绍。

   标记选择器：

我们来看一个例子的代码及其显示效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style type="text/css">
h1{
color:#0000FF;
font-size:40px;
}
</style>
</head>

<body>
<h1>CSS选择器</h1>
<h1>CSS选择器</h1>
</body>
</html>

效果如下：

类别选择器：继续讲类别选择器：也就是我们常说的.class。

对比上面的标记选择器，我们很容易看出来，就一个h1变成了.class；别的看不出变化，那我们看看代码里边怎么应用，我们来看一个例子的代码及其显示效果：

<html>
<head>
<title>class选择器</title>
<style type="text/css">
<!--
.one{
	color:red;			/* 红色 */
	font-size:18px;		/* 文字大小 */
}
.two{
	color:green;		/* 绿色 */
	font-size:20px;		/* 文字大小 */
}
.three{
	color:cyan;			/* 青色 */
	font-size:22px;		/* 文字大小 */
}
-->
</style>
   </head>

<body>
	<p class="one">class选择器1</p>
	<p class="two">class选择器2</p>
	<p class="three">class选择器3</p>
	<h3 class="two">h3同样适用</h3>
</body>
</html>

分析一下上面的代码，我们每一个P标记都用一个class进行控制，一个class="one"对应一个.one{},然后在.one里边添加属性，就可以了，效果如下：

我们看的出来，这个h3跟.two是一个效果，只是字体不一样，那就是h3默认的字体与class的区别。采用class的好处是可以让用户充分的自定义并且这个class可以重复的被使用，这就是咱们的p标志和h3标志所显示的那样。

ID选择器

我们来看一个例子的代码及其显示效果：

<html>
<head>
<title>ID选择器</title>
<style type="text/css">
<!--
#one{
	font-weight:bold;		/* 粗体 */
}
#two{
	font-size:30px;			/* 字体大小 */
	color:#009900;			/* 颜色 */
}
-->
</style>
   </head>

<body>
	<p id="one">ID选择器1</p>
	<p id="two">ID选择器2</p>
	<p id="two">ID选择器3</p>
	<p id="one two">ID选择器3</p>
</body>
</html>

对比类别选择器多了一个“#”，ID与class的区别是：ID不允许出现两个同样的ID，显示效果如下：

CSS的声明

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

<html>
<head>
<title>集体声明</title>
<style type="text/css">
<!--
h1, h2, h3, h4, h5, p{			/* 集体声明 */
	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>

效果如下：

CSS的继承，详情请点击，我们来看一个例子的代码以及运行的效果：

<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的一些基础知识，总的来说分为两个部分进行介绍，一个是初探CSS，一个是CSS的基本语法，初探CSS包括概念和使用CSS控制页面，CSS的基本语法包括三个方面的内容，分别是CSS的选择器，CSS声明，CSS继承。有了CSS让我们的界面瞬间活了起来，动了起来，让我们的互联网世界更加的丰富多彩，美丽无限，BS学习，未完，待续......

精通CSS+DIV网页样式与布局--初探CSS的更多相关文章

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

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

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

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

  3. 精通CSS+DIV网页样式与布局--页面和浏览器元素

    在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...

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

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

  5. CSS+DIV网页样式与布局：第二章：CSS的基本语法

    第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...

  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. Python 中的 if __name__ == '__main__' 该如何理解

    __name__ 表示当前模块名, __main__ 表示正在运行的模块名. if __name__ == '__main__' 这句话的意思就是,当模块被直接运行时,以下代码块将被运行,当模块是被导 ...

  2. 使用mybatis注解@Options实现添加记录时返回主键值

    官网:http://www.mybatis.org/mybatis-3/index.html 在使用mybatis作为ORM框架时,我通常更喜欢使用注解而非xml配置文件的方式.业务场景:添加记录之后 ...

  3. vue+cordova 构建hybrid app

    配了一个 vue + cordova + ionicCli 的 项目 支持 ionic 的脚手架命令 支持 cordova 的 插件 安装使用 支持 webpack 的自动构建 vue 安装了 vue ...

  4. 微信小程序适配iphonex

      // 在app.js中判断是否是哪种设备 globalData: { isIphoneX: false, userInfo: null }, onShow:function(){ let that ...

  5. Struts+Hibernate+jsp页面，实现分页

    dao层代码 package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import org.hibernat ...

  6. iOS Push详述，了解一下？

    WeTest 导读 本文主要对iOS Push的在线push.本地push及离线(远程)push进行梳理,介绍了相关逻辑,测试时要注意的要点以及相关工具.小小的Push背后蕴藏着大大的逻辑! Push ...

  7. FJUT寒假作业涨姿势题解

    题意非常简单易懂,对于涨姿势0,数据非常小,比较容易想到的是直接循环暴力解题完成任务.把数据放入数组arr,循环i,j控制所有区间算和.结果记入vis. 到了涨姿势1,2,3,我们观察数据变化,发现数 ...

  8. PyCharm 2018.1破解过程

    一.下载 首先从官网下载 官网,如果开了酸酸乳的话无法下载,官网会自动断开连接.所以下载时请关闭酸酸乳 二.安装 选择安装路径 选择64位,创建关联.py文件 安装完后运行Pycharm 选择不导入开 ...

  9. C语言中file文件指针概念及其操作 （转载）

    文件 文件的基本概念 所谓"文件"是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名.实际上在前面的各章中我们已经多次使用了文件,例如源程序文件.目标文件.可执行文件. ...

  10. Go 语言数据类型

    在 Go 编程语言中,数据类型用于声明函数和变量. 数据类型的出现是为了把数据分成所需内存大小不同的数据,编程的时候需要用大数据的时候才需要申请大内存,就可以充分利用内存. Go 语言按类别有以下几种 ...