前言：好久没更新过CSDN博客了，现在从原来的OI，变成了一个科研工作者。最近打算把原来的一些资料整理一下，作为经验公开分享，希望能帮到更多默默努力耕耘的人~

网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿，有关HTML+CSS框架的编程，比较基础。当时为了给入门的同学更多感性认识，提供了很多小实例，这里也都给出来了。

DIV+CSS布局

DIV+CSS布局概念

DIV标签

DIV标签——盒子模型

CSS概念

CSS的优先次序

使用CSS

CSS选择器

CSS选择器——元素选择器

CSS选择器——元素选择器——实例3

CSS选择器——类选择器

CSS选择器—— ID选择器

CSS选择器——派生（后代）选择器

CSS选择器——实例4

DIV+CSS布局

DIV+CSS布局概念

DIV+CSS布局方式并不是一种新的语言或者体系，它就是html语言中的一部分。

简单来说就是把标签中的样式和部分属性，放到另外一个文件中，通过一定语法将它们联系起来，浏览器通过CSS中的语句来决定html中的DIV（之前提到过，div为html中的一种标签）如何在页面中显示。

这种布局中，div承载的是内容，而css承载的是样式。

具体什么是CSS将在后面讲到。

DIV标签

<div>标签的使用方法和其他标签的使用方法完全一样，在网页中它的性质和<p>是一样的，均为块级元素。

DIV本身就是容器性质的，它的主要作用就是承载内容，让css有一个作用的对象，当然其他标签也可以作为css的作用对象，但div有着一些其他标签不具有的优势，例如div之间可以任意嵌套，<p>标签之间是不可以嵌套的。

一般我们利用盒子模型来理解div。

DIV标签——盒子模型

每个div都可看做是一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。尽管这些边距都是空白的，但它们在布局中却能够发挥意向不到的作用，往往只要通过设置边距的大小就可以实现定位。

下图中的border为夸张版，但可以帮助大家认清border的地位：

CSS概念

在了解div之后，我们可以开始学习CSS了。

CSS 指层叠样式表 (Cascading Style Sheets)，它的作用主要是提供对文档外观的更好更全面的控制，而且不干扰文档的内容。

CSS能够很好地解决内容与表现分离的问题，极大地提高了工作效率。

CSS的优先次序

样式表有四种，它们的优先次序从小到大依次为：

浏览器缺省设置（默认设置）

外部样式表

内部样式表（位于<head>标签内部）

内联样式（在HTML元素内部设置）

了解样式表的优先级非常重要，因为有时候无论怎么修改自己的样式表都无法达到预期的效果，那么你可以尝试去找找是否有其他样式表覆盖了你要的效果。

使用CSS

前面的例子中其实已经使用过CSS了，如实例2.5中的：

这里使用的就是之前说的CSS的内联样式

不过这里要讲的是如何使用外部样式表，建立起html文档和css文档之间的联系需要用到<link>标签。

具体的联系操作为：在html文档的头部，即<head>标签中写入<link rel= " stylesheet " type= " text/css " href= "样式表文件名.css " />，就可以建立起两者之间的联系，浏览器在阅读html文档的时候会自动地到相应的CSS文件中读取样式。

内部样式表将在后面提到（一般情况下均使用外部样式表）

CSS的基础语法是选择器+一条或多条声明，即：

选择器名 {声明1;声明2; ... ;声明}

如：

CSS选择器

CSS中有很多选择器，下面几种选择器是最常用的：

元素选择器

类选择器

ID 选择器

后代选择器（派生选择器）

下面分别介绍。

CSS选择器——元素选择器

元素即html标签，如p、img、title、h1、div等。

下面一句为在css中对<p>标签进行设置的实例：

p{color:red;font-size:66px;}

如果多个标签同时需要用到同一种样式，可以这样：

h1,p,strong{color:blue;}

后面我们会讲到更加简便的方法来实现对多个标签的设置

CSS选择器——元素选择器——实例3

HTML文档中的代码片段，其创建、打开方式可参见《网页设计（一）——HTML基础概念》的实例2（https://blog.csdn.net/csyzcyj/article/details/107283767）：

<html>
<head>
<link rel="stylesheet" type="text/css" href="simple3.css" />
</head>
<body>
<h1 align="center">元素选择器示例1</h1>
<div>I love CSU</div>
<p>chinadxscy.csu.edu.cn</p>
<hr/><!--用于划分界线-->
<h1 align="center">元素选择器示例2</h1>
<div>I love CSU</div>
<p style="color:red">chinadxscy.csu.edu.cn</p>
</body>
</html>

CSS文件（注意上面的html中已规定CSS文件名为"simple3.css"）代码：

div,p{color:blue;}

说明一下，CSS文件的创建与HTML类似，即打开记事本，在里面键入上方的CSS代码，而后保存，将后缀名改为css。注意，在本例中，由于html中已规定CSS文件名为"simple3.css"，故CSS文件名需设置为"simple3.css"。

打开html的效果如下：

另外，注意两点：

①：选择器优先次序，这里体现了内联样式高于外部样式表；

②：CSS文件中每写一条需要以分号结束。

CSS选择器——类选择器

使用类选择器时，我们要给div或者标签加上一个class属性，如：

HTML片段：

对应CSS中：

.im{font-size:35px;color:red;}

前面说到的多个标签使用同种样式的时候可以这么写：

h1,p,strong{color:blue;}

其实可以给每个标签都加上一个相同的class属性之后，只要写成

.类名{样式}

即可。

ps：h1、strong等标签都是内部已经设定了一定格式的标签，实际运用中我们可以通过自行调整css样式来实现，不一定要用内定了格式的标签

效果可参见实例4。

CSS选择器—— ID选择器

ID选择器与类选择器类似，使用前也需要给标签加上一个ID属性，如：

HTML片段：

CSS对应片段：

#st{font-size:35px;color:blue;}

不过两者最大的区别在于，类选择器的类名可以是多个标签公用的，而ID选择器则是唯一的。（尽管你在测试时发现可能可以用，但是这是错误的写法！在将来用到更高级的内嵌编程段<如JavaScript>时会出现问题）

错误示例：

<div id="st">chinadxscy.csu.edu.cn</div>

效果可参见实例4。

CSS选择器——派生（后代）选择器

这种选择器主要是用于设置内嵌的标签样式

如：

HTML片段：

<p>中国大学生<strong>创</strong>业网</p>

CSS样式对应片段：

p strong{color:red;font-size:60px;}

上面的语句只会使得<p>标签中的创字样色改变，而不会对其它字起作用。

效果可参见实例4。

CSS选择器——实例4

HTML代码如下：

<html>
<head>
<link rel="stylesheet" type="text/css" href="simple4.css" />
</head>
<body><h1 align="center">类选择器示例</h1>
<div class="im">I love CSU</div>
<p class="im">chinadxscy.csu.edu.cn</p><hr/><!--用于划分界线--><h1 align="center">ID选择器示例</h1>
<div id="st">I love CSU</div>
<p id="st">chinadxscy.csu.edu.cn</p><hr/><!--用于划分界线--><h1 align="center">派生选择器示例</h1>
<p>中国大学生<strong>创</strong>业网</p></body>
</html>

CSS文件代码如下：

/*类选择器*/
.im{font-size:35px;color:red;}
/*ID选择器*/
#st{font-size:35px;color:blue;}
/*派生选择器*/
p strong{color:red;font-size:60px;}

打开HTML文件后效果如下：

下一篇DIV+CSS布局将介绍CSS样式。

附网页设计系列的文章链接：

网页设计（一）——HTML基础概念：https://blog.csdn.net/csyzcyj/article/details/107283767

网页设计（二）——DIV+CSS布局1：https://blog.csdn.net/csyzcyj/article/details/107284087

网页设计（三）——DIV+CSS布局2：https://blog.csdn.net/csyzcyj/article/details/107284655

网页设计（四）——DIV+CSS布局3：https://blog.csdn.net/csyzcyj/article/details/107285198

网页设计（五）——marquee标签：https://blog.csdn.net/csyzcyj/article/details/107285901

网页设计（六）——基于HTML+CSS框架的网页设计实例：https://blog.csdn.net/csyzcyj/article/details/107286067

转载注明出处：https://blog.csdn.net/csyzcyj/

网页设计（二）——DIV+CSS布局1相关推荐

Photoshop图象切片保存为网页HTML（DIV+CSS布局）的方法
Photoshop图象切片保存为网页HTML(DIV+CSS布局)的方法首先,制作图象切片(以一张图片为例子) 一.选择"切片"工具,在图像上拖动以分割图像(例如:一张图像切割2 ...
div+css动漫网页制作,dw个人网页设计,静态html+css网页设计
简单个人网页制作大学生网页设计作业静态HTML个人博客主页 DW个人网站模板下载大学生简单个人网页作品代码一.作品介绍 1.作品简介 :学生个人网页制作,dw网页设计,静态div+css网页设 ...
HTML5+CSS期末大作业：环保网站设计——环境保护(10页) 含设计报告 HTML+CSS+JavaScript 静态HTML环境保护网页制作下载 DIV+CSS环保网页设计代码
HTML5+CSS期末大作业:宠物网站设计--宠物猫(10页) 含设计报告 HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV+CSS宠物网页设计代码常见网页设计 ...
网页设计（四）——DIV+CSS布局3
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
网页设计（三）——DIV+CSS布局2
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
HTML+CSS大作业web网页设计实例作业 ——中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码
web网页设计实例作业 --中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
HTML+CSS+JS计——仿苏苏超市(1页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:苏苏网站设计--仿苏苏超市(1页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍文章目录 HTML5期末大作业:苏苏网站设计--仿苏苏超市(1页) 大学生简单个人 ...
div+css静态网页设计`生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:生活服务网站设计--生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局文章目录 HTML5期末大作业:生活服务网站设计--生活服务同城商城(33页) ...
HTML+CSS静态页面网页设计作业——布偶猫(7页)带留言板大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:布偶猫网站设计--布偶猫(7页)带留言板大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载常见网页设计作业题材有个人. 美食. ...

网页设计（二）——DIV+CSS布局1

DIV+CSS布局

DIV+CSS布局概念

DIV标签

DIV标签——盒子模型

CSS概念

CSS的优先次序

使用CSS

CSS选择器

CSS选择器——元素选择器

CSS选择器——元素选择器——实例3

CSS选择器——类选择器

CSS选择器—— ID选择器

CSS选择器——派生（后代）选择器

CSS选择器——实例4

网页设计（二）——DIV+CSS布局1相关推荐

最新文章

热门文章