2021-01-11

最新推荐文章于 2025-12-19 15:33:32 发布

原创最新推荐文章于 2025-12-19 15:33:32 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

博客涉及HTML和CSS相关内容，HTML用于构建网页结构，CSS负责网页样式设计，二者是前端开发中构建网页不可或缺的技术。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*div{
				background-color: greenyellow;
			}*/
		</style>
		<style>
			div{
				/*标签选择器*/
				letter-spacing: 12px;
			}
			.text-size{
				/*类选择器*/
				font-size: 36px;
			}
			#indent{
				/*id选择器*/
				text-indent: 43px;
			}
		</style>
		<style>
			a{
				text-decoration: none;
			}
			#btn{
				width: 300px;
				height: 40px;
				line-height: 40px;
				/*当height和line-height大小相等时就是垂直居中*/
				text-align: center;
				color: white;
				letter-spacing: 15px;
				cursor: pointer;/*更改鼠标形式*/
				border: 1px solid #e85356;
				background-color: #e4393c;
			}
		</style>
		<style>
			p{
				/*font-style: italic;
				font-weight: bold;
				font-size: 36px;
				font-family: 'script mt';*//*有空格的要加引号或者双引号*/ 
				font:italic bold 36px 'script mt';
				/*
				 font:
				 1、顺序style weight size family
				 2、必须包含size family
				 3、font不能与line-height一起使用，要写成font：font字体大小/line-height值    family字体
				 */
			}
		</style>
		<!--新建css文件-->
		<link rel="stylesheet" href="css/new_file.css" />
	</head>
	<body>
		<!--
			border:1px solid red;
			css样式属性：css样式属性值；css声明
		-->
		<!--
			CSS控制HTML内标签显示不同布局样式。控制对应html标签颜色、字体大小、字体、宽度、高度、浮动等样式。

            HTML犹如一个人，而CSS则是服饰。通过不同服饰打扮出不同风格人。
		-->
		<div style="border: 1px solid red;text-align: center;">郑州高新区</div>
		<!--
			css定义位置：
			a、style标签属性中
			b、style标签中
			c、css文件中，使用link标签引入该文件
		-->
		<!--选择器
			使用style标签属性可以为html标签添加样式，
			但是这种方式和html标签进行耦合，不便于后期维护代码
		-->
		<div>郑州高新区</div>
		<div>hello world</div>
		<span class="text-size">郑州</span>
		<i class="text-size">高新区</i>
		<input id="indent" />
		
		<a href="http://www.baidu.com">百度</a>
		<div id="btn">登录</div>
		<!--
			有些css样式在行内元素中无效，添加display：block
			行内和块级元素的转换
		-->
		<span style="display: block;">高新区</span>
		<div style="display: inline;">高新区</div>
		
		<p>This is an apple</p>
		<p>这是一个苹果</p>
		<p style="border-bottom:1px solid red ;">A</p>
			
		<!--有些字体只对英文感冒-->
	</body>
</html>


选择器补充


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*分组选择器：由一组选择器构成的一种选择器*/
			.s1,p{font-size: 36px;}
			/*后代选择器：父子选择器构成的一种选择器*/
			html body .s1{
				color: red;
			}
			/*通配符选择器*/
			*{
				padding: 0px;
				margin: 0px;
			}
		</style>
	</head>
	<body>
		<span class="s1">河南省</span>
		<p id="p1">工业大学</p>
	</body>
</html>