学习前端的第三天，补充HTML标签，开始学习CSS

最新推荐文章于 2024-07-15 15:13:08 发布

Super@.烨

最新推荐文章于 2024-07-15 15:13:08 发布

阅读量65

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/sunliye145/article/details/118391978

版权

按钮标签

<button type"">这是一个按钮</button>

type有3中类型，跟表单元素按钮一样button（普通按钮）、submit（提交按钮）、reset（重置按钮）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮</title>
	</head>
	<body>
		<button type="button">这是一个普通按钮</button>
		<button type="submit">这是一个提交按钮</button>
		<button type="reset">这是一个重置按钮</button>
	</body>
</html>

布局标签

div标签会换行

span标签不换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布局标签</title>
	</head>
	<body>
		<div>我是一个div</div>
		<div>我是一个div</div>
		<span>我是一个span</span>
		<span>我是一个span</span>
	</body>
</html>

CSS

html是标签，css是用来美化标签的

CSS 指层叠样式表 (Cascading Style Sheets) 样式：对网页进行美化，层叠：后定义的样式会将先前定义的样式进行覆盖

css的三种使用方式

1.内联样式（行内样式）

用法：书写在标签内部且需添加style=""

例：

<p style="color: red; ">我是一个p标签</p>

2.内部样式

用法：书写在页面内，在head标签里书写<style></style>

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网站头部导航</title>
		<style type="text/css">
             这里书写css属性
        </style>
    </head>
    <body>
    </body>
</html>

3.外部样式

用法：需要在工程目录下创建ccs文件夹并创建css文件在html里调用

调用方法：<linl rel="stylesheet" type="text/css" herf="css文件路径" />

例：

<link rel="stylesheet" type="text/css" href="css/common/reset.css"/>

路径中"."的应用

./当前目录

../上级目录

../../上上级目录

/根目录

CSS中的选择器

1.id选择器

css中的调用方式#id

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style type="text/css">
			#text{
				color: red;
			}
		</style>
	</head>
	<body>
		<p id="text">我是一个p标签</p>
	</body>
</html>

id具有唯一性，只能同样的id只能有一个

2.类（class）选择器

css中调用方式.类名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style type="text/css">
			.text{
				color: green;
			}
		</style>
	</head>
	<body>
		<p class="text">我是一个p标签</p>
	</body>
</html>

3.标签选择器

css中直接选取标签名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style type="text/css">
			p{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<p>我是一个p标签</p>
	</body>
</html>

4.选择器的优先级

id>class>标签

但是如果在属性后添加！important，则该属性优先级最大

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style type="text/css">
			#text{
				color: yellow;
			}
			p{
				color: red !important;
			}
		</style>
	</head>
	<body>
		<p id="text">我是一个p标签</p>
	</body>
</html>

在代码中，如果删除p标签的！important则会优先显示id选择器所给予的属性黄色"yellow"反之则给与！important的标签选择器属性"red"

背景

background-color:；背景颜色，颜色值可以为字母、16进制、三原色。

background-size:;背景大小，值为像素。

background-repeat:;图像是否重复。默认值：repeat(重复)、no-repeat(不重复)、repeat-x(沿X轴重复)、repeat-y(沿Y轴重复)

background-position:;图像位置。left top bottom right center

background-attachement:;图像是否随滚动条滚动。

文字格式

color:;文字颜色英文、16进制、三原色

text-align:;文字对齐方式left center right

text-decoration:;文字下划线得位置。none取消下划线、overline上划线、line-through删除线、underline下划线。

text-indent:;文字缩进。值像素

CSS字体

font-size:;字体大小

font-family:;设置字体

font-style:;字体样式，normal正常、italic/oplique斜体

font-weight:;字体粗细，取整百，范围100~900。400为默认。

链接样式

a:link未被访问的样式

a:visited访问后的样式

a:hover鼠标选中后的样式

a:active点击后的样式

Super@.烨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习前端的第三天，补充HTML标签，开始学习CSS

按钮标签<button type"">这是一个按钮</button>type有3中类型，跟表单元素按钮一样button（普通按钮）、submit（提交按钮）、reset（重置按钮）。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>按钮</title>
复制链接

扫一扫