Java零基础教学文档第四篇:HTML_CSS_JavaScript(1)

这篇具有很好参考价值的文章主要介绍了Java零基础教学文档第四篇:HTML_CSS_JavaScript(1)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今日新篇章
【CSS】
【主要内容】

  1. CSS简介

  2. CSS基础语法

  3. CSS选择器

  4. CSS常用属性

  5. CSS元素分类

  6. CSS定位

【学习目标】
Java零基础教学文档第四篇:HTML_CSS_JavaScript(1),Java零基础教学文档,java,html,css

1.CSS的简介

1.1 CSS定义与解释**
CSS是Cascading Style Sheets(层叠样式表单)的简称,CSS就是一种叫做样式表(stylesheet)的技术。它用于定义HTML元素的显示形式,是一种格式化网页内容的技术。CSS现在已经被大多数浏览器所支持,成为网页设计者必须掌握的技术之一。

W3C自1996年12月发布第一个CSS正式推荐版CSS 1.0以来,一直在对CSS标准进行修订、升级。1999年1月,CSS 2.0 正式推荐版发布,增加了对其它媒体(打印机、视觉设备)、可下载字体、元素定位和表格的支持。最新标准的CSS 3.0已经发部,其主要的影响是可以使用新的可用的选择器和属性,这些会允许你实现新的设计效果(譬如动态和渐变),而且可以很简单的设计出以前需要JavaScript才能设计出来的效果。

1.2 CSS替我们解决什么问题
通过前面我们知道CSS也只是一个技术或一个东西的代名词,那究竟CSS作用是什么,CSS能帮我们解决什么问题呢?
DIV + CSS 作用与解决问题:

1.CSS技术帮我们控制网页中的字体大小、页面宽度、页面内容靠左靠右、字体样式、某些网页里区域背景图片、背景颜色、超链接鼠标事件样式、图片居中、文字居中、网页中内容板块间隔等样式。

2.CSS的最核心作用:实现将内容与表现形式相分离。

2. CSS基础语法

2.1 CSS语法**
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

选择器 { 属性1: 值1; 属性2: 值2; … 属性N: 值N; }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成,属性和值用冒号(“ : ”)分开,多条声明用分号(“ ; ”)分开。

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。

在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

h1 {color: red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构:
Java零基础教学文档第四篇:HTML_CSS_JavaScript(1),Java零基础教学文档,java,html,css

2.2 引入样式方式
2.2.1 行内样式(内联样式) css样式的个数<=3
使用该属性可以直接指定样式,当然,该样式仅能用于该元素的内容,对于另一个同名的元素则不起作用。

1、样式的属性内容直接跟在将要修饰的文字标记里

2、具体格式: style=“color: red; font-size: 14px”

我是一个p标签

2.2.2 内部样式(嵌入式) 3<css样式的个数<=10
用户可在HTML文档头部定义多个style元素,实现多个样式表。

<style type=”text/css”>
    body {
        /*设置背景颜色*/
        background-color: yellow;
    }

    h1 {
        /*设置字体颜色*/
        color: blue;
        /*设置字体大小*/
        font-size: 30px;
    }
</style>

CSS的注释和HTML的注释不太一样,CSS的注释是以 “/* " 开头,以” */ "结尾,快捷注释和HTML一样都是 Ctrl + / 或 Ctrl + Shift + /

2.2.3 外部样式(外链式) css样式的个数>10
1、可以在多个文档间共享样式表,对于较大规模的网站,将CSS样式定义独立成一个一个的文档,可有效地提高效率,并有利于对网站风格的维护。

2、可以改变样式表,而无需更改HTML文档,这也与HTML语言内容与形式分开的原则相一致。

3、可以根据介质有选择的加载样式表。

<head>
    <meta charset="UTF-8">
    <title>CSS层叠样式表</title>
    <!--引入外部的层叠样式表,href指向的是需要加载样式表的.css文件-->
    <link rel="stylesheet" href="css/index.css">
</head>

2.3 样式的优先级
多重样式:如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。

样式优先级总结:谁离得近,谁优先级高!行内样式优先级最高!

3.CSS参考手册

3.1 长度单位**
l 绝对长度单位:绝对长度值最好用于打印输出设备,而在仅仅作为屏幕显示用时,绝对长度值并无多大意义。
Java零基础教学文档第四篇:HTML_CSS_JavaScript(1),Java零基础教学文档,java,html,css

3.2 颜色单位
颜色是通过对红(red)、绿(green)和蓝(blue)光的组合来显示的。

1、RGB 颜色值是这样规定的:rgb(red, green, blue),每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。

2、十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于00 到 FF(255的十六进制是 FF) 之间。

3.3 相对路径与绝对路径
在Web开发中,插入图片、包含CSS文件等都需要有路径,如果文件路径的添加错误,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。那么接下来我们就详细的介绍一下相对路径与绝对路径。

相对路径:以引用文件之网页所在位置为参考基础,而建立出的目录路径。

绝对路径:以磁盘上的地址构成的路径为绝对路径,意指当所有网页引用同一个文件时,所使用的路径都是一样的。

Ø 相对路径的使用

以下为建立路径所使用的几个特殊符号,及其所代表的意义。

“.”–代表目前所在的目录。

“…”–代表上一层目录。

假设项目有如下图所示目录路径:
Java零基础教学文档第四篇:HTML_CSS_JavaScript(1),Java零基础教学文档,java,html,css

假若要在index.html文件中引用bg.jpg文件时,其相对路径如下:

<body>
    <img src="./img/bg.jpg" alt="">
    /*也可以省略 "./" 直接用以下这个方式引用*/
    <img src="img/bg.jpg" alt="">
</body>

假若要在login.html文件中引用bg.jpg文件时,其相对路径如下:

<body>
    <img src="../img/bg.jpg" alt="">
</body>

4.CSS选择器

首先CSS选择器分这么几大类:基础选择器、关系选择器、属性选择器、伪类选择器等。

4.1 基础选择器
基础选择器包含:标签选择器、class选择器、id选择器和通配符选择器。

4.1.1 标签选择器
HTML标签是最典型的选择器类型,任何一个HTML元素都可以做为选择器。

如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。

html { background-color: yellow; }
h1 { color: blue; }
h2 { color: red; }

标签选择器的有效范围为页面中所有的、名称相同的HTML元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        p {
            color: blue;
            font-size: 18px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>我是第一个p标签</p>
    <p>我是第二个p标签</p>
    <p>我是第三个p标签</p>
</body>
</html>

4.1.2 类选择器
第一步:给需要选中的元素添加class属性

第二步:选中该元素再添加样式 .类名 { 属性: 值; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS层叠样式表</title>
    <style>
        .tag {
            color: blue;
        }
    </style>
</head>
<body>
    <h1 class="tag">我是标题</h1>
    <div class="tag">我是一个div</div>
</body>
</html>

4.1.3 id选择器
第一步:给需要选中的元素添加id属性

第二步:选中该元素 #id名 { 属性: 值; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        #title {
            color: blue;
        }
        #block {
            /*文字居中*/
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <h1 id="title">我是标题</h1>
    <div id="block">我是一个div</div>
</body>
</html>

注意:id与类选择器的概念相似,只是ID选择器只能被引用一次,而类选择器可以被多次引用。

4.1.4 通配符选择器
在CSS中,使用 * 代表所有的标签或元素,它叫做通配符选择器。

比如:* { color : red; } 这里就把所有元素的字体设置为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <h1>我是标题</h1>
    <div>我是一个div标签</div>
    <span>我是一个span标签</span>
</body>
</html>

4.2 关系选择器
4.2.1 交集选择器
交集符合选择器是由两个选择器直接构成的,其结果是二者元素范围的交集。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /*选中"我是一个div标签"的这个标签*/
        div.tag {
            color: blue;
        }
        /*选中"我是一个p标签"的这个标签*/
        p#title {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1 class="tag">我是标题</h1>
    <div class="tag">我是一个div标签</div>
    <p id="title">我是一个p标签</p>
</body>
</html>

4.2.2 并集选择器
并集选择器是由多个选择器通过逗号连接在一起的,这些选择器分别是:标签选择器、类选择器或id选择器等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /*选中符合条件的所有标签*/
        .search, span, #Important {
            color: red;
        }
    </style>
</head>
<body>
    <a class="search" href="#">百度一下</a>
    <h1>我是一个h1标签</h1>
    <span>我是一个span标签</span>
    <div>
        <p>我是一个p标签</p>
        <span>我是一个span标签</span>
        <strong id="Important">我是一个强调标签</strong>
    </div>
    <p>我是一个p标签</p>
</body>
</html>

4.2.3 后代选择器
后代选择器又称为包含选择器,选择所有被E元素包含的F元素,中间用空格隔开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /*选中所有.box标签中存在的span标签*/
        .box span {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>我是一个h1标签</h1>
        <span>我是一个span标签</span>
        <div>
            <p>我是一个p标签</p>
            <span>我是一个span标签</span>
            <strong>我是一个强调标签</strong>
        </div>
        <p>我是一个p标签</p>
    </div>
</body>
</html>

4.2.4 亲子选择器
选择所有作为E元素的直接子元素F,对孙子元素不起作用,用大于号表示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        .tag > span {
            color: red;
        }
    </style>
</head>
<body>
    <div class="tag">
        <h1>我是一个h1标签</h1>
        <span>我是一个span标签</span>
        <div>
            <p>我是一个p标签</p>
            <span>我是一个span标签</span>
            <strong>我是一个强调标签</strong>
        </div>
        <p>我是一个p标签</p>
    </div>
</body>
</html>

4.3 属性选择器
通过html的属性来选择元素,

align即是属性,center是align的属性值。

写法:元素[ 属性名= “属性值”] ,等号不固定,可换其它符号。

4.3.1 E[att]
选择具有attr属性的E元素,不用去管att属性的值是什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        [class] {
            color: red;
        }
    </style>
</head>
<body>
    <div class="block">我是一个div标签</div>
    <p class="title">我是一个p标签</p>
</body>
</html>

4.3.2 E[att=“val”]
选择具有att属性且属性值等于val的E元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        [class="title"] {
            color: red;
        }
    </style>
</head>
<body>
    <div class="block">我是一个div标签</div>
    <p class="title">我是一个p标签</p>
</body>
</html>

4.4 伪类选择器
伪类通过冒号来定义,它定义了元素的状态,如点击按下、点击完等等,我们之前都是直接操作元素的样式,现在可以为元素的状态改样式,使元素看上去更“动态”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /*鼠标悬浮在标签上的状态*/
        div:hover, a:hover {
            color: green;
        }
        /*元素在鼠标按下时的状态*/
        div:active, a:active {
            color: yellow;
        }

/*元素被访问后的状态*/
        div:active, a:visited {
            color: yellow;
        }


    </style>
</head>
<body>
    <div class="block">我是一个div标签</div>
    <br>
    <a href="#">百度一下</a>
</body>
</html>

4.5 选择器优先级
4.5.1 单个优先级比较
优先级规则:!important > id样式 > class样式 > 标签样式 > 通配符样式

在CSS中,通过对某一样式声明! important ,可以更改默认的CSS样式优先级规则,使该条样式属性声明具有最高优先级,也就是相当于写在最下面。

.box {
color:red !important;
}

4.5.2 复合标签优先级比较
复合标签优先级:由三个级别和各级别的出现次数决定的,三个级别对应的是:ID选择符、class选择符、元素选择符。

先比较符合标签中ID选择符出现的次数,谁出现的次数多,则优先级更高,反之则优先级低;如果复合符合标签中的ID选择符出现的次数相同,那么则比较class选择符出现的次数,谁出现的次数多,则优先级更高,反之则优先级低;如果复合符合标签中的class选择符出现的次数相同,那么则比较元素选择符出现的次数,谁出现的次数多,则优先级更高,反之则优先级低。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*2个id选择符 1个元素选择符*/
        div #box-second-id #box-three-id {
            color: blue;
        }
        /*1个id选择符 1个元素选择符 1个元素选择符*/
        div #box-second-id .box-three-class {
            color: red;
        }
        /*最后在浏览器上面显示 blue 颜色的文字*/
    </style>
</head>
<body>
    <div class="box-first-class" id="box-first-id">
        <div class="box-second-class" id="box-second-id">
            <div class="box-three-class" id="box-three-id">
                我是一个p标签
            </div>
        </div>
    </div>
</body>
</html>

4.5.3 优先级相同
优先级相同时,则采用就近原则,选择最后出现的样式;

5.CSS常用属性

5.1 背景属性**
CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。
Java零基础教学文档第四篇:HTML_CSS_JavaScript(1),Java零基础教学文档,java,html,css

5.1.1 background-color

使用 background-color 属性为元素设置背景色,其默认值是 transparent 也就是“透明”的意思,可使用颜色名称、RGB、RGBA、十六进制数来指定颜色。

<style>
    /* 给.box的背景色设置为红色 */
    .box {
        background-color: red;
    }
</style>

5.1.2 background-image
使用 background-color 属性为元素设置背景背景图片,
其默认值是 none,表示背景上没有放置任何图像。

如果需要设置一个背景图像,必须为这个属性要么设置为 URL,要么设置一个图片路径。

<style>
    .box {
        background-image: url("img/bg.jpg");
    }
</style>

5.1.3 background-repeat
使用 background-repeat 属性设置背景图片是否重复。

repeat 重复(默认值)

repeat-x 图片在横向上平铺

repeat-y 图片在纵向上平铺

no-repeat 不重复平铺

<style>
    .box {
        background-image: url("img/11.jpg");
        /* 设置图片不重复平铺 */
        background-repeat: no-repeat;
    }
</style>

5.1.4 background-position
使用background-position 属性改变图像在背景中的位置。

可以使用长度值,如 100px,最后也可以使用百分数值。

可以使用一些关键字:top、bottom、left、right 和 center,不能超过两个关键字,一个对应水平方向,另一个对应垂直方向。

<style>
    .box {
        background-image: url("img/link.jpg");
        background-repeat: no-repeat;
        /*距离左侧200px 顶部100px*/
        background-position: 200px 100px;
        /*居中对齐*/
        background-position: 50% 50%;
        /*左下角对齐*/
        background-position: left bottom;
    }
</style>

5.1.5 background-size
background-size 属性规定背景图片的尺寸。

在 CSS3 之前,背景图片的尺寸是由背景图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。

设置背景图片尺寸的参数:可以为长度单位:px、%,也可以用关键字cover和contain。

l cover: 按照最小宽或最小高来做拉伸,背景图片能够铺满设备屏屏幕,并不会造成图片失真。

l contain:按照最大宽度或最大高度来做拉伸,但是背景图片有可能不能铺满设备屏幕。

5.1.6 background-attachment
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失,可以通过 background-attachment 属性防止这种滚动。

通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响。

<style>
    .box {
        background-image: url("img/link.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        /* 无论滚动条如何滚动,图片都在标签的最中心 */
        background-attachment: fixed;
    }
</style>

5.2 文本属性
CSS 文本属性可定义文本的外观。

通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。

text-align:对齐方式,left、right、center

text-decoration:文本修饰,underline(下划线)、line-throuth(删除线)、overline(上划线)、none

line-height:行高

text-indent:文字/图片缩进

5.2.1 color文本的颜色
可使用颜色名称、RGB、十六进制数来指定颜色。

5.2.2 opacity
opacity用来设置透明度,默认值为1,1为不透明,0为完全透明。

p{ opacity: 0;} 隐藏一个元素 ,完全不显示,但是会占空间,只是看不到。

5.2.3 font字体设置
Java零基础教学文档第四篇:HTML_CSS_JavaScript(1),Java零基础教学文档,java,html,css

<style>

    .title {
        /* 设置字体名字 */
        font-family: "宋体", "微软雅黑", Arial;
        /* 设置字体大小 */
        font-size: 2em;
        /* 设置字体粗细 */
        font-weight: 900;
        /* 设置字体风格 */
        font-style: italic;
    }
</style>

5.2.4 text-align
文本对齐属性text-align 属性规定元素中的文本的水平对齐方式,只能设置块级元素内文本的水平对齐方式。
Java零基础教学文档第四篇:HTML_CSS_JavaScript(1),Java零基础教学文档,java,html,css

<style>
    a {
        text-decoration: none;
    }
</style>

5.2.6 letter-spacing
设置字与字之间的间距。

<style>
    .title {
        letter-spacing: 10px;
    }
</style>

5.2.7 line-height行高
line-height 属性设置行间的距离(行高),属性值可以为数值也可以为百分比。

line-height妙用:设置文字居上下中展示

<style>
    .title {
        line-height: 80px;
        text-align: center;
    }
</style>

5.2.8 overflow 属性
描述 描述说明

visible 默认值。内容不会被修剪,会呈现在元素框之外。

hidden 内容会被修剪,并且其余内容是不可见的。

scroll 内容被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

overflow 属性规定当内容溢出元素框时发生的事情。

5.2.9 扩展
实现溢出文本eclipsis的解决,让溢出的文字以省略号显示。

<style>
    .title {
        width: 5em;
        height: 1.4em;
        /*设置文本不能换行*/
        white-space:nowrap;
        /*设置文本超出文本框时隐藏文本*/
        overflow:hidden;
        /*用略符号来代表被修剪的文本*/
        text-overflow:ellipsis;
    }
</style>

5.3 复合样式

<style>
    div{

border:1px solid red;  /*盒子的边框*/

 border-radius:/*边角的弧度,取值单位px、%*/

}
</style>

5.4 列表属性
列表属性主要针对的是ul和ol类型的列表。

5.4.1 3.1 list-style-type
list-style-type
列表样式,类型属性值可以为:

disc (缺省值,黑圆点)

circle (空心圆点)

square (小黑方块)

decimal (数字排序)

lower-roman upper-roman 罗马数字

lower-alpha upper-alpha 英文字母

none (无列表项标记,针对无序列表)

6.元素的分类

元素主要分为:块级元素、内联元素(行级元素)和内联块级元素。

6.1 块级元素
块级元素排斥其他元素与其位于同一行,可以设定元素的宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素。可设置四个方向的padding和margin值。

常见的块级元素有:body, div,p,h1~h6,ul,ol,li,pre等。

块级元素具有以下特点:

  1. 总是在新行上开始,占据一整行;

  2. 高度属性(height)和宽度属性(width)可以设置,并且外边距和内边距都可控制;

  3. 宽始终是与父元素宽度一样,与内容无关;

  4. 它可以容纳行内元素和其它块级元素。

设置display:block可以将元素显示为块级元素

如下的代码就是将内联元素a转成块级元素,从而使a元素具有块元素的特点。

<style>
    a { display: block }
</style>

6.2 内联元素(行内元素)
内联元素又称为行内元素,内联元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内尽量不要包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。只能设置左右方向的padding和margin值,上下无法设置。

常见的行内元素有:a,em,strong,span, i, u, del等。

行内元素的特点:

  1. 可以和别的行内元素和行内块级元素共享一行;

  2. 不能设置高度属性(height)和宽度属性(width),另外内边距和外边距部分可控制;

  3. 行内标签的宽度只与内容有关;

  4. 行内元素只能容纳文本或者其他行内元素。

设置display:inline可以将元素显示为内联元素

如下的代码就是将块级元素div转成内联元素,从而使div元素具有内联元素的特点。

<style>
    div{ display:inline; }
</style>

6.3 行内块级元素(内联块级元素)
行内块级元既有块级元素的特点,又有内联元素的特点。可以与其他行内元素位于同一行,宽度由内容的长度控制,但可以设置宽(width)和高(height),也可以设置四个方向的padding(内边距)和margin(外边距)值。

常见的行内块级元素有img和input。

行内块级元素的特点:

  1. 行内块级元素可以设置宽度(width)和高度(hright)属性;

  2. 行内元素可以和别的行内元素和行内块级元素共享一行。

设置display:inline-block可以将元素设置为内联块级元素

如下的代码就是将块级元素div转成内联块级元素,从而使div元素具有内联块级元素的特点。

6.4 display属性补充
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,称为块元素,而span元素的默认display属性值为“inline”,称为“行内”元素。

属性值 描述说明

none 此元素不会被显示,不保留物理空间。

block 此元素将显示为块级元素,此元素前后会带有换行符。

inline 此元素会被显示为行内元素,元素前后没有换行符。

inline-block 行内块元素。

visibility和display的区别

visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,hidden表示隐藏)。

当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。

当display被设置为"none"的时候,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填。

总结:应用display: none;的元素相当于消失,而visibility: hidden;则只表示隐藏,位置还在。

7.CSS定位属性

网页中大部分对象默认是占用文档流,也有一些对象是不占文档流的,比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流,这就要用到CSS中属性position、float、display来控制。

默认情况下,所有元素都处在文档流中,四种情况将使得元素离开文档流:浮动float、绝对定位absolute、相对定位fixed、元素不显示display:none,这种情况不占文档流的空间,而普通元素的位置基于文档流。

文档流:自窗体自上而下分成一行一行,并在每行中按从左到右的顺序排放元素。

7.1 position定位
position定位:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。

定位类型:绝对定位(absolute)、相对定位(relative)、固定定位(fixed)和默认的文档流布局方式(static)。

辅助属性:

position属性只是使元素脱离文档流,要想此元素能按照希望的位置显示,就需要使用下面的属性:

left : 表示向元素的左边插入多少像素,使元素向右移动多少像素。

right :表示向元素的右边插入多少像素,使元素向左移动多少像素。

top :表示向元素的上方插入多少像素,使元素向下移动多少像素。

bottom :表示向元素的下方插入多少像素,使元素向上移动多少像素。

注意:上面属性的值可以为负。

7.1.1 relative相对定位
相对定位:不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。(相对定位后,元素位置移动了,但是原来的位置还占据着。)
Java零基础教学文档第四篇:HTML_CSS_JavaScript(1),Java零基础教学文档,java,html,css

7.1.2 absolute绝对定位
绝对定位:脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为body文档本身。
Java零基础教学文档第四篇:HTML_CSS_JavaScript(1),Java零基础教学文档,java,html,css

7.1.3 fixed固定定位

固定定位:fixed是特殊的absolute,按照浏览器的窗口进行定位。

7.2 z-index属性
z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index取值为整数类型,可以是负值,z-index 仅能在定位元素上奏效,如position:absolute。

设置文字在图片上面显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style>
        img {
            position: absolute;
            top: 0;
            z-index: -1;
        }
    </style>
</head>
<body>
    <h1>这是一个鼠标</h1>
    <img src="img/mouse.jpg" alt="">
</body>
</html>

8.CSS随堂练习

8.1 实现表格界面
Java零基础教学文档第四篇:HTML_CSS_JavaScript(1),Java零基础教学文档,java,html,css

8.2 实现图书列表界面
Java零基础教学文档第四篇:HTML_CSS_JavaScript(1),Java零基础教学文档,java,html,css文章来源地址https://www.toymoban.com/news/detail-791006.html

到了这里,关于Java零基础教学文档第四篇:HTML_CSS_JavaScript(1)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Java零基础教学文档第三篇:JDBC

    今日新篇章 【JDBC】 【主要内容】 JDBC概述 使用JDBC完成添加操作 使用JDBC完成更新和删除 DBUtils的简单封装 使用JDBC完成查询 使用JDBC完成分页查询 常用接口详解 JDBC批处理 SQL注入问题 事务处理解决转账问题 连接池 使用反射对DBUtils再次的封装 BaseDAO的封装 【学习目标】 1.1

    2024年01月19日
    浏览(48)
  • 2023年Java核心技术面试第四篇(篇篇万字精讲)

    目录 八. 对比Vector,ArrayList, LinkedList有何区别?  8.1  典型回答 8.1.1 Vector: 8.1.2 ArrayList : 8.1.3 LinkedList 8.2 考察点分析: 8.2.1 不同容器类型适合的场景 8.2.1.1 Vector和ArrayList 8.2.1.2 LinkedList 8.3 小结: 8.3.1 底层实现方式 8.3.2 读写机制 8.3.3 读写效率 8.3.4 线程安全性 九.  对比H

    2024年02月12日
    浏览(49)
  • 【从零开始学习JAVA | 第四十四篇】TCP协议中的握手与挥手

    TCP(传输控制协议)作为计算机网络中的重要协议,扮演着确保数据可靠传输的角色。在TCP的通信过程中,握手与挥手问题是不可忽视的关键环节。握手是指在建立连接时,客户端与服务器相互确认彼此的身份并同步参数,确保双方准备就绪;而挥手则是在终止连接时,双方

    2024年02月11日
    浏览(53)
  • Java基础---第十四篇

    平时可能大家使用的最多的就是使用 String 作为 HashMap 的 key,但是现在我们想使用某个自定 义类作为 HashMap 的 key,那就需要注意以下几点: 如果类重写了 equals 方法,它也应该重写 hashCode 方法。 类的所有实例需要遵循与 equals 和 hashCode 相关的规则。 如果一个类没有使用

    2024年02月07日
    浏览(47)
  • 操作系统第四篇

      前面章节用 x86 汇编语言写了引导记录 mbr.bin,并让 BIOS 引导到内存 0x07c00 处执行成功。然后用 x86 汇编语言写了 myos 的极简版 start.bin,并让 mbr.bin 加载到内存 0x10000处执行成功。接下来只要在 start.bin 的基础上增加操作系统的基本功能就可以了。start.bin是用 x86 汇编语言写

    2024年02月16日
    浏览(48)
  • ElasticSearch篇---第四篇

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 面试官:想了解 ES 集群的底层原理,不再只关注业务层面了。 前

    2024年02月03日
    浏览(37)
  • 零基础教学文档之:docker

    零基础教学文档之:docker Docker是一个开源项目,诞生于2013年初,最初是dotCloud公司内部的一个业余项目。它基于Google公司推出的Go语言实现。项目后来加入了Linux基金会,遵从了Apache2.0协议,项目代码在GitHub上进行维护。Docker自开源后受到广范的关注和讨论,以至于dotCloud公司

    2024年01月20日
    浏览(41)
  • 第四篇Android--TextView使用详解

    TextView是View体系中的一员,继承自View,用于在界面中展示文字。 基本用法: 1.   设置点击事件: 2.设置文字颜色1): 上面方式设置的颜色只有一种状态。如果需要TextView展示时一种颜色,按下时展示另外一种颜色,可以通过设置selector实现。     设置文字颜色2):   在

    2024年02月07日
    浏览(40)
  • 第四篇 用户登录界面(WinForm版本)

    本编文章来教大家如何创建WinForm项目,以及如何使用WinForm创建自己的登录界面 1、新建项目,打开VS开发工具,创建新项目,选择Windows窗体应用(.Net Framework)。    2、输入项目名称,项目名称建议使用英文名称,避免后面因中文产生的各种异常错误,选择自己电脑上的项目存

    2024年02月09日
    浏览(39)
  • 【FPGA入门】第四篇、有限状态机

    目录 第一部分、一个关于有限状态机的例子 第二部分、学会有限状态机的准备知识 1、什么是有限状态机? 2、为什么需要状态机? 3、什么是竞争冒险? 3.1、什么情况下会发生竞争冒险? 3.2、为什么组合逻辑电路会产生竞争和冒险? 3.3、那什么是竞争?什么是冒险? 3.4、

    2024年02月09日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包