韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记

更新时间：2023-05-29 22:36:01 阅读量：实用文档文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

韩顺平vip课程推荐度：
相关推荐

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

Div+css的讲解

Div元素是用来为html文档内大块的内容提供结构和背景的元素。 CSS是英语cascading style sehhts的缩写（层叠样式表），他是一种用来表现HTML或XML等文件式样的计算机语言。 Div+css是网站标准中常用的术语之一。理解：

1、Div是用来存放内容（文字，图片等其他元素）的容器( 元素)。 2、Css用于说明DIV中的图片，文字或其他元素的样式（大小，颜色，背景，位置等）。

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

好处：

1、html文件就会减少大量的table、tr、td，html变简单。 2、内容和样式分离。

3、符合搜索引擎的喜好。（SE0网页优化设计师） 4、节约带宽。快速体验div+css ：小案例 Html文件：

<td>4</td> <td>5</td> <td>6</td> </tr> </table> </div> </body> </html> Css文件： .style1{ width:300px; height:200px;

border:1px solid red; margin:0px 0px 0px 20px; }

.style1 table{ width:298px;

border:1px solid green; }

.style1 table td{

border:1px solid yellow;

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

}

Div+Css的发展三个历史时期：

Table---->table+css---->div+css

Css的必要性

案例

使用元素，ide工具开发（myeclipe）

栏目二 从使用span元素我们可以看出，css的基本语法

<元素名 style=”属性名：属性值；属性名2：属性值2；”/> 元素可以是html的任意元素；

属性名和属性值要参考帮助文档，

w3c

代码：

<body>

栏目一 栏目二

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

栏目三 栏目四栏目五

</body>

使用css可以统一我们网站的风格。

Css的分类：内部css和外部css

案例一：

的，用来指定遵循什么版本） -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>

</style> </head> <body> />

栏目一

栏目二<br font: 30px; color: green; font-weight: bold; font-style: normal;

text-decoration: underline;

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

栏目三

栏目四栏目五

苹果苹果苹果苹果苹果苹果 西瓜西瓜西瓜西瓜西瓜西瓜 香蕉香蕉香蕉香蕉香蕉香蕉 花生花生花生花生花生花生

</body> </html

统一了样式

案例二

Css滤镜的使用

目的：1图片变成灰色，2、鼠标悬停恢复彩色 1、原图彩色

2、使用滤镜后，灰色

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

3、鼠标悬停

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>

/*使用滤镜 */ a:link img { filter:gray; }

a:hover img { filter:""; }

</style>

</head> <body>

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

Css的三种选择器

1、 2、 3、 4、

类选择器 Id选择器 Html元素选择器通配符选择器

选择器就是在css中创建，而在网页页面（html，jsp，…..）中使用

类选择器

基本语法： .类选择器名{ 属性名：属性值； }

1. 类选择器实例：

HTML文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>

<title>xuanzeqi.html</title>

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

</head> <body>

新闻一 新闻二 新闻三 新闻四 新闻五 </body> </html>

CSS文件：

/*.style1 就是类选择器*/ .style1{ }

font-weight: bold; font-size:20px;

background-color: pink;

ID选择器

基本用法： #id选择器名{ 属性名：属性值； } 实例：

HTML文件 ……

这是一个非常重要的新闻！

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

…….

CSS文件：

/*#style2 就是一个id选择器*/ #style2{ }

font-size: 30px;

background-color: silver;

在html文件中如果要引用id选择器，则： <元素 id=“id选择器的名称”>内容</元素名>

HTML选择器

基本语法： Html元素名{ 属性名：属性值； } 实例：

代码： HTML文件：

<body>

你好北京！

新闻一

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

新闻二 新闻三 新闻四 新闻五 这是一个非常重要的新闻！ </body>

CSS文件：

/*.style1 就是类选择器*/ .style1{ }

/*#style2 就是id选择器*/ #style2{ }

/*body 就是*/ body{ }

color: orange; font-size: 30px;

background-color: silver; color:black; color:black; font-weight: bold; font-size:20px;

background-color: pink;

结论：当一个元素被id选择器，类选择器，html选择器同时修饰，则优先级为：

ID > 类 > HTML

课堂案例：

我们希望所有的超链接：

1、默认样式是黑色，24px，没有下划线， 2、当鼠标移动到超链接时，自动出现下划线， 3、点击后，超链接变成红色。

代码：

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

HTML文件：

<body>

<a href="#">链接到搜狐</a> <a href="#">链接到新浪</a> </body>

CSS文件：

a:link{ }

a:hover{ }

a:VISITED {

color: red; }

text-decoration: underline; color=black; font-size: 24px; text-decoration: none;

通配符选择器

如果希望所有的元素都符合某一种样式，则可以使用通配符选择器通配符基本语法： *{ Margin:0; padding:0 }

可以让所有的html元素的外边距和内边距都默认为0，有时候特别有用。实例：

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

CSS文件代码：

/*使用通配符选择器，作用是将外边距和内边距清0*/ *{ }

/*Margin:0px; */ /*

margin-top: 10px; margin-left: 10px; margin-right: 0px; margin-bottom: 0px; */

margin:10px 0px 0px 10px;/*如果提供四个值，则这些值的顺序是从上外边距 (top) 开margin:10px 0px 0px;/*如果只提供三个值，则第一个值则为上，第二个用于左右，第margin:10px 15px;/*如果只提供两个值，则第一个值作用于上下，第二个用于左右 */ margin：10px;/*如果只提供一个值，则作用于四边*/ padding:0px;/*padding 规范与margin一样*/

始围着元素顺时针旋转的：上-右-下-左 */ 三个用于下 */

选择器的深入讨论： 1、父子选择器案例：

使得“非常重要”四个字为红色斜体。

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

方案：1、id选择器；2、CLASS选择器；3、父子选择器。代码： HTML文件：

这是一个非常重要的新闻！

CSS文件：

/*#style2 就是id选择器*/ #style2{ }

/*父子选择器*/ #style2 span{ }

font-style: italic; color:red; font-size: 30px;

background-color: silver; color:black;

强调：

1、子此处的标签（此处的span），必须为html可识别的；2、 2、父子选择器可以向下继续扩展，可以有多级的。 3、父子选择器可以适用于：ID选择器和类选择器。

2、

要求：“新闻一”红色，斜体

HTML 文件：

新闻一 新闻二

CSS文件：

#special{

}

font-style: italic; color:red;

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

结论：如果一个元素被ID和Class同时修饰时，则ID选择器的优先级大于Class

3、一个元素最多有一个ID选择器，但是可以有多个类选择器。实例需求：希望“新闻三”是下划线，斜体。

思路：1、新闻三是用id选择器。

2、再指定一个类选择器。

HTML 文件：

新闻三

CSS文件：

/*.style1 就是类选择器*/ .style1{ }

.style4{ }

font-style: italic;

text-decoration: underline; color:black; font-weight: bold; font-size:20px;

background-color: pink;

结论：HTML文件作用如何是用多个class类选择器：

说明：再引用多个class选择器是，用空格隔开；

当class选择器发生冲突时，以在css文件中，最后出现的class选择器样式为主。 4、优先级别

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

ID > 类 > HTML

5、在css文件中，如果有多个类选择器，ID选择器，html选择器，

我们可以把他们共同的部分，写在一起，这样的好处是，可以简化css文件。实例： My.css文件：

/*招生广告*/ .ad_stu{ width: 136px; height:196px;

background-color: #FC7E8C; margin: 5px 0 0 5px; float:left;

}

/*广告2*/ .ad_2{ width: 457px; height:196px;

background-color: #FC7574; margin: 5px 0 0 6px; float:left; }

/*房地产 .ad_house{ width: 452px; height:196px;

background-color: #FC7574; margin: 5px 0 0 6px; float:left; }

他们的height和float属性值是一样的，则我们可以将共同的部分写在一起：

/*招生广告*/ .ad_stu{ width: 136px;

background-color: #FC7E8C;

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

}

margin: 5px 0 0 5px;

/*广告2*/ .ad_2{ }

/*房地产 .ad_house{ }

.ad_stu,.ad_2,.ad_house{ }

height:196px; float:left; width: 452px;

background-color: #FC7574; margin: 5px 0 0 6px; width: 457px;

background-color: #FC7574; margin: 5px 0 0 6px;

强调：共同的部分，类选择器名称间必须用，（逗号）隔开。练习1：

请使用适当的选择器，完成下面的页面。

HTML文件：

<body>

<h1 class="style1">梁山英雄排行榜</h1>

宋江 卢员外

吴用

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

豹子头 大刀关胜 </body>

CSS文件：

.style1{ }

.style2{ }

#style3{ }

#style4{ }

text-decoration: underline; font-style: italic; color: red;

background-color: gray; font-weight: bold; color:orange;

练习2：

网页所有的超链接，要求这样的格式：

1、默认样式为红色，24px，华文新魏字体，没有下划线

2、当鼠标移动到超链接时，自动出现下划线，字体大小变成40px，

字体变成宋体

3、点击后，超链接变成灰色。使用HTML选择器

HTML文件：

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

<body>

CSS文件：

a:link{ }

a:hover{ }

a:VISITED { }

color: gray; color:green; font-size: 40px;

text-decoration: underline;

color: red; font-size: 24px; font-family: 华文新魏; text-decoration: none;

块元素和行内元素

行内元素（inline exement）又叫内联元素

内联元素只能容纳文本或者其他内联元素（浏览器和版本决定），常见的内联元素、<a><input>等

块元素（block element）

块元素一般都从新行开始，可以容纳文斌，其他内联元素和其它块元素，即使内容不能占满一行，块元素也要把整行占满，常见块元素<div>、

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

特点：

行内元素：只占内容的宽度，默认不换行。

块元素：不管内容有多少，他要换行，同时占满整行。代码： HTML文件：

<body>

hello word! Span1 hello word! Span1 hello word! Span1 <div class="style2">div1</div> <div class="style2">div2</div> <div class="style2">div3</div> span </body>

CSS文件：

.style1{ }

.style2{ }

.style3{ }

background-color: orange; background-color: gray; width: 100px;

background-color:blue;

块元素和行内元素的区别

1、行内元素之占内容的宽度，块元素不管内容有多少都要占全行

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

2、行内元素只能容纳文本和其他行内元素，块元素可以容纳文本，

行内元素和块元素（与浏览器类版本和类型有关）。 3、一些

CSS

属性对行内元素不生效，比如：

margin ,left,right,width,height,建议尽可能使用块元素定位（与浏览器类版本和类型有关）。块元素和行内元素是可以相互转换

行内元素转换为块元素

1、方法一：

hello word! Span1 2、方法二： .style1{ }

background-color:blue;

display: block;/*所有引用了style1的元素，都按照块元素显示*/

块元素转换行内元素

1、方法一：

<div style="display: inlineclass="style2">div3</div> 2、 2、方法二： .style2{ }

background-color: gray; width: 100px;

display: inline;/*所有引用了style2的元素，都按照行内元素显示*/

CSS核心内容-流

流：在现实生活总就是流水，在网页设计中就是指元素（标签）的排列方式。

标准流：元素在网页中就像流水，写在前面的元素（标签）内容前面

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记,精心整理,非常齐全。

出现，写在后面的元素（标签）内容后面出现。

非标准流：当某个元素（标签）脱离了标准流【比如：因为相对定位】排列，我们统称为非标准流。

CSS核心内容-盒子模型

要搞清盒子模型，必须先明白一下概念：

盒子模型的理解：我们可以盒子模型转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所有我们叫它盒子模型。那么内容就是盒子里装的东西；二填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其他抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候不能全部堆在一起，药流一定的空隙保持通风，同时也为了方便取出。

与现实生活中盒子不同的是，现实中的东西一般不能大于盒子，否则盒子会被撑破，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。盒子模型的原理分析图：

本文来源：https://www.bwwdw.com/article/06g4.html

相关文章：

三年级语文（上册）生字表（二）生字注音及组词03-23

剑桥雅思10之G类写作范文解析 - 图文12-05

选题的重要性06-03

五四青年节作文2015年初一关于青年节的作文4篇01-13

国务院公文主题词表06-02

最新苏教版数学四上第苏三单元《解决问题的策略》word教案 doc05-21

2014年二级建造师机电实务必背考点01-29

在共青团第六次代表大会开幕式上的讲话12-31

2018年上海市闵行区高考化学二模试卷09-12

上一篇：Unit 5 The Tapestry of Friendship课文翻译综合教程四下一篇：学校各种应急预案汇编(2014年修订)