html-css基础

最新推荐文章于 2022-09-30 15:04:01 发布

wwetarena

最新推荐文章于 2022-09-30 15:04:01 发布

阅读量92

点赞数 1

分类专栏： html基础文章标签： html css

本文链接：https://blog.csdn.net/wwetarena/article/details/119595038

版权

html基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

回顾:

标签的分类:

块级元素
水平线标签:
要在页面显示html标签本身,需要使用字符实体来表示特殊符号 < < > >
<hr />
标题标签一般用来做文章/新闻/段落的题目
<h#></h#>
#可以是1,2,3,4,5,6
<h1></h1>
段落标签:文章的段落
<p></p>
块标签用于页面区域的划分
<div></div>
- 行内元素
  行内块
  <span></span>
标签的style属性:行内样式表,可以用来定义标签的样式和标签内容的样式,作用范围是当前标签及其内容

css基本样式

使用行内样式表

块元素的样式

属性名	属性值
background-color	red/#ff0000
背景色	取值:英文的颜色或者6位16进制数
width	200px
宽度	取值为0~?px px 是像素,是一个长度单位
height	200px
高度	取值为0~?px px 是像素,是一个长度单位
border	1px solid blue
边框线	1像素(边框线的高度) 实线(边框线的线型,可选值有 solid-实线 dotted-短虚线 dashed-长虚线) 蓝色(也可以是6位16进制数)
border-radius	5px
倒角	取值为0~?px px 是像素

<div  style="
			width: 200px;
			height: 200px;
			background-color: red;
			border:1px solid blue;
			border-radius: 5px;">
		</div>
		<!--html注释 不在页面显示,
		只在源代码中存在,起说明作用-->
		<!--写一个段落标签,要求 300px*300px
			背景色 蓝色 边框线 2像素 短虚线
			红色 边框线倒角10像素
		-->
		<p style="width: 300px;
			height:300px;
			background-color: blue;
			border: 2px dotted red;
			border-radius: 10px;"></p>
		<div style="
			width: 200px;
			height: 200px;
			background-color: purple;
			border-radius: 50%;
			"></div>

文本的css样式
css对文本的定义了一套统一的样式,这样子避免我们去记忆过多的标签和属性

<p style="color:#0000ff;
			font-size: 80px;
			font-family: '楷体';
			font-weight: bold;
			font-style: italic;">
			沈阳用地质雷达探测地下空洞
		</p>

属性	属性值
color	#0000ff
颜色	取值:6位16进制数
font-size	80px
字体大小	取值为0~?像素
font-family	‘楷体’
字体类型	字体类型
font-weight	bold
字体权重	取值 bold 加粗
font-style	italic
字体风格	斜体
text-decoration	underline
文本-装饰	下划线取值:上划线overline 贯穿线 linethrough 下划线 underline 没有任何装饰线none
text-indent	60px
行首文本缩进	60像素
text-align	center
文本水平位置	居中,有3个取值:left-左边,默认值,center-居中,right-右边

文本样式:老式html属性写法
使用标签的属性和属性值来定义文本的样式,这种写法的缺点,标签比较臃肿,表示全文本的样式需要再使用多个标签,显得很乱,标签过多,需要一套统一的标准,就是css样式

<p>
			<font color="#ff0000"
				size="7"
				face="楷体">
			     沈阳用地质雷达探测地下空洞
			</font>
</p>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>wenben</title>
	</head>
	<body>
		<p>
			<font color="#ff0000"
				size="7"
				face="楷体">
			    <b> 
			    	<i>
			    	沈阳用地质雷达探测地下空洞
			        </i>
			    </b>
			</font>
		</p>
		<p style="color:#0000ff;
			font-size: 80px;
			font-family: '楷体';
			font-weight:  bold ;
			font-style: italic;">
			沈阳用地质雷达探测地下空洞
		</p>
		<!--写一个div,里面字体样式为:
			楷体 60px 蓝色 加粗 斜体
		-->
		<div style="color:#0000ff;
			font-size: 60px;
			font-family: '楷体';
			font-weight:  bold ;
			font-style: italic;
			text-decoration: underline;
			">
			沈阳用地质雷达探测地下空洞
		</div>
	</body>
</html>