一起学 Java——html

作者：爱好编程进阶

2022 年 5 月 14 日
本文字数：4413 字
阅读完需：约 14 分钟

<input type="radio" name="sex" id="" />女

</td>

</tr>

<tr>

<td>

<input type="checkbox" name="" id="" value="1" />游泳

<input type="checkbox" name="" id="" value="2" />爬山

<input type="checkbox" name="" id="" value="2" />跳水

<input type="checkbox" name="" id="" value="2" />跑步

</td>

</tr>

<tr>

<td>

</select>年

</select>月

</select>日<br />

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

[](()css 知识回顾

css(层叠样式表)是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

[访问菜鸟教程](()

[](()内部样式表

内部样式表是指我们直接将 css 样式与 html 文件放在一起，这种方式一般不常用。

<!DOCTYPE html>

<html>

<head>

/* 这段代码展示内部样式表 */

background-color: red;

font-size: 30px;

}

</style>

</head>

<body>

</body>

</html>

[](()外部样式表

外部样式表是指将 css 样式与 html 分开存放，这种方法方法比较常用。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

/* 这段代码展示内部样式表 */

p {

background-color: red;

font-size: 30px;

}

body {

background-color: yellow;

background-image: url(./imgs/2.png);

/* 设置如何平铺对象的 background-image 属性 */

background-repeat: no-repeat;

/* 设置背景图像是否固定或者随着页面的其余部分滚动 */

background-attachment: fixed;

/* 设置背景图像的位置位置 */

background-position: 20px 40px;

}

[](()背景样式

<!DOCTYPE html>

<html>

<head>

/* 这段代码展示内部样式表 */

p {

background-color: red;

font-size: 30px;

}

body{

background-color: yellow;

background-image: url(./imgs/2.png);

/* 设置如何平铺对象的 background-image 属性 */

background-repeat: no-repeat;

/* 设置背景图像是否固定或者随着页面的其余部分滚动 */

background-attachment: fixed;

/* 设置背景图像的位置位置 */

background-position: 20px 40px;

}

</style>

</head>

<body>

</body>

</html>

[](()文本样式

p {

/* 设置文本颜色 */

color: blue;

/* 文本方向/书写方向 */

direction: ltr;

/* 设置字符间距 */

letter-spacing: 10npx;

/* 设置行高 */

line-height: 20npx;

/* 设置文本对齐方式 */

text-align: center;

/* 文本的修饰 */

text-decoration: line-through;

/* 文本设置阴影 */

text-shadow: coral;

/* 改变字母大小写 */

text-transform: lowercase;

/* 首行缩进 */

text-indent: 10npx;

}

[](()字体样式

ul{

/* 设置列表项目外观 */

list-style-type: circle;

/* 设置列表符号位置 */

list-style-position: outside;

/* 设置列表项目标记 */

list-style-image: url(./imgs/3.gif);

}

[](()选择器

[](()伪类选择器

[](()状态伪类

状态发生变化的时候。

/* 未访问的链接 */

a:link{

color: red;

}

/* 已访问的链接 */

a:visited{

color: #0000FF;

}

/* 鼠标移动到连接上(浮动悬停) */

a:hover{

color: #FF7F50;

font-size: 30px;

}

/* 向被激活的元素添加样式 */

a:active{

color: blue;

}

/* 选择拥有键盘输入焦点的元素 */

/* a:focus{

} */

label:hover{

color: #FF0000;

}

[](()结构伪类

:first-child------>选择元素的第一个子元素

:last-child------->选择某个元素的最后一个子元素

:nth-child------->选择某个元素的一个或者多个特定子元素

:nth-last-child------>选择某个元素的一个或者多个特定元素，

从这个元素的最后一个子元素开始算

:first-of-child-------->选择一个上级元素下的第一个同类子元素*/

h1:first-child{

background-color: #FF0000;

}

h3:last-child{

background-color: #FF7F50;

}

[](()伪元素选择器

/* 可以在文本之前插入新内容 */

p::before{

content: "大家好";

}

/* 可以在文本之后插入新内容 */

p::after{

content: "你们好";

}

/* 选择制定选择器的首行 */

p::first-line{

background-color: chocolate;

}

/* 选择文本的第一个字符 */

p::first-letter{

font-size: 30px;

}

/* 选择指定元素被选中的内容 */

*::selection{

background-color: green;

}

[](()其他选择器

[](()class 选择器

允许重复！！！

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p class="p1">测试 Class 选择器！</p>

</body>

</html>

.p1{

color: red;

font-size: 20px;

}

[](()id 选择器

不允许重复！！！

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p id="p11">测试 Class 选择器！</p>

</body>

</html>

#p11{

color: yellow;

font-size: 20px;

}

[](()逗号选择器

用于联合选择器！！

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p id="p11">测试选择器！</p>

<p class="p22">测试语句，不知道写什么！</p>

</body>

</html>

#p11{

color: yellow;

font-size: 20px;

}

.p22{

color: red;

font-size: 30px;

}

#p11,.p22{

background-color: #55aaff;

}

[](()空格选择器

<html>

<head>

</head>

<body>

</body>

</html>

#div3 p{

background-color: #55AAFF;

}

[](()>选择器

<html>

<head>

</head>

<body>

</div>

</div>

</body>

</html>

#div1>p{

background-color: #55AAFF;

}

[](()属性选择器

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</body>

</html>

p[class='p2']{

background-color: #55AAFF;

}

p[id='p3']{

color: red;

}

[](()选择器优先级

| 排名 | 名称 |

| --- | --- |

| 1 | !important |

| 2 | 行内样式 |

| 3 | id 选择器 |

| 4 | 类选择器 |

| 5 | 标签 |

| 6 | 通配符 |

| 7 | 浏览器默认属性 |

[](()div 设置

[点击查看](()

<!DOCTYPE html>

<html>

<head>

</head>

<body>

这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。

</div>

</body>

</html>

#div1{

background-color: aqua;

width: 200px;

height: 200px;

top: 220px;

left: 220px;

/* 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定 */。

position: absolute;

/* 超出隐藏 */

/* overflow: hidden; */

/* 超出显示拖动条 */

/* overflow: auto; */

/* 设置 div 边框样式 */

/* outline: dotted; */

/* 设置底部线条 */

border-bottom: solid;

}

[](()居中样式

<!DOCTYPE html>

<html>

<head>

</head>

<body>

文字信息

</div>

</body>

</html>

#div1{

background-color: aqua;

width: 200px;

height: 200px;

/* 设置文字居中 */

text-align: center;

/* 利用行高实现文字垂直居中 */

line-height: 200px;

/* 实现对象居中 */

/* 设置 auto 的容器必须有宽度 */

margin: 0px auto;

}

[](()定位机制

[](()浮动效果

这里我们要清楚默认的文档流，即元素从上往下以此布局，当使用浮动的时候，元素就会脱离标准文档流。

[](()浮动引起崩塌

我们知道，当我们的父级 div 没有设置高度或者宽度的时候，他会被子一级元素撑开，否则就会是一条横线。

[](()清除浮动

有些时候我们为了避免这种浮动现象，需要我们在 css 样式手动清除样式，这样一来我们就可以避免浮动造成的一系列的页面布局的问题了。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

这是 2

</div>

这是 3

</div>

这是 4

</div>

</body>

</html>

#div1 {

background-color: aqua;

}

#div2 {

background-color: red;

width: 200px;

height: 200px;

/* div2 浮动 */

float: left;

}

#div3 {

background-color: yellow;

width: 220px;

height: 220px;

/* div3 浮动 */

float: left;

}

/* 这是清除浮动的第二种方法,设置一个专门的 div 标签 */

/* #clear {

clear: both;

} */

#div4 {

background-color: blue;

height: 240px;

width: 240px;

/* 这是清除浮动的第一种方法,对于需要清除浮动的标签使用 clear 属性 */

/* 设置清除浮动 */

/* clear: both; */

}

/* 这是设置清除浮动的第三种方式,这种方式使用伪类,广泛使用于大型网站 */

#clear::after {

发布于: 刚刚阅读数: 2

爱好编程进阶

关注

还未添加个人签名 2022.04.13 加入

还未添加个人简介

发布

暂无评论

创作场景

一起学 Java——html

[](()内部样式表

[](()外部样式表

[](()背景样式

[](()文本样式

[](()字体样式

[](()选择器

[](()伪类选择器

[](()伪元素选择器

[](()其他选择器

[](()div 设置

[](()居中样式

[](()定位机制

爱好编程进阶

评论