CSS常用的样式文本

最新推荐文章于 2021-08-19 22:56:48 发布

小叶丶

最新推荐文章于 2021-08-19 22:56:48 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/weixin_42038955/article/details/104862164

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS入门</title>
	<!-- 第一种插入css的方式，这是外链式css，href写css路径，这种方式易于管理代码 -->
	<!-- <link rel="stylesheet" type="text/css" href="css/CSS笔记.css"> -->
	
	<!-- 第二种插入css的方式，这是内嵌式css -->
	<style type="text/css">
		/* 在style标签里面，要使用css注释，如果用了html的方法注释，会使css出错 */
		/* 内联式css可以使网页性能优化，加载快一点，一般可以用在首页 */
		/* 这个叫标签选择器，页面上所有的h1标签都执行这个样式 */
		h1{
			font-size:20px;   /*调整h1标题的字体*/
			color:gold;   /* color调整字体颜色，gold金色 */
		}
		
		div{  /*页面上所有div标签使用这个样式*/
			text-indent:24px;  /*设置首行缩进*/
			color:green;  /*设置字体颜色*/
			/*font-family:'微软雅黑';  设置文字字体*/
			/*上面这种设置文字字体方法一旦网页乱码，可能会导致这个样式失效，
			建议改成英文的，微软雅黑 == Microsoft Yahei 是对等的*/
			/*font-family:'Microsoft Yahei';
			font-size:20px; 	设置字体大小
			line-height:40px;  设置行高*/
			
			/*这行可以代替上面那三行代码，书写顺序不要写错，font:是否加粗 字体大小/行高 文字字体;*/
			font:normal 20px/40px 'Microsoft Yahei'; /*这个叫简写形式*/
			
		}
		
		em{  /*em标签使用这个样式，em本身是带有字体倾斜样式*/
			font-style:normal;  /*将em标签设置为不倾斜*/
			color:gold;  /*可以给指定标签字体颜色，这个会覆盖父级标签以上的样式*/
		}
		
		span{
			color:red;
			font-size:30px;
		}
		
		p{
			text-align:center; /*设置文字水平居中*/
		}
		
	</style>
	
</head>
<body>
	<!-- css(Cascading Style Sheets)意思是层叠样式表
		有了css，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，
		表现形式完全交给css，html文档变得更加简洁。
		这里做笔记的话，先用内嵌式的，方便做笔记，以后如果做开发的时候，就用外链式的。
	-->
	<!-- div+css布局：
		主要通过css样式设置来布局文字或图片等元素，需要用到css盒子模型、盒子类型、
		css浮动、css定位、css背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。
	-->
	<!-- 常用的文本样式：
		* color 设置文字的颜色，如：color:red;
		* font-size 设置文字的大小，如：font-size:12px;
		* font-family 设置文字的字体，如：font-family:'微软雅黑';
		* font-style 设置字体是否倾斜，如：font-style:normal;设置不倾斜，font-style:italic;设置文字倾斜
		* font-weight 设置文字是否加粗，如：font-weight:bold;设置加粗，font-weight:normal设置不加粗
		* line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距，如：line-height:24ps;
		* font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：
			- font：是否加粗 字号/行高 字体；如：font:normal 12px/36px '微软雅黑';
		* text-decoration 设置文字的下划线，如：text-decoration:none;将文字下划线去掉(适合用在a标签)
			- text-decoration:underline;在文字底部加下划线。
		* text-indent 设置文字首行缩进，就是段落的首行缩进，如：text-indent:24px;设置文字首行缩进24px
		* text-align 设置文字水平对齐方式，如：text-align:center 设置文字居中
			- 还可以设置靠右:right，默认是靠左的，左:left。
	-->
	
	<div>这是一个div标签</div>
	<h1>页面标题</h1>
	
	<!-- 第三种插入css的方式，在标签里使用style属性，可以让里面的样式直接只对当前标签成效。 -->
	<!-- 在行内写css样式，是不需要写选择器。 -->
	<a href="https://www.baidu.com" style="font-size:20px;color:pink">百度</a><br />
	<a href="#" style="text-decoration:none">没有下划线的a标签</a>
	
	<div>
		<span>有些站点需要登录后才能访问</span>，浏览器登录后，会生成<em>cookie</em>，后续的请求都会
		带着这个cookie，我们可以在浏览器抓包复制这个cookie写进代码里headers，
		但是如果过于频繁，也会被服务器封禁，不过过一段时间就会解封，要避免这
		种事情发生，要么控制访问速度，要么准备多几个账号的cookie做一个cookie池。
	</div>
	
	<p>这是一个p标签</p>
	

</body>

</html>

小叶丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS常用的样式文本

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>CSS入门</title>  <!-- <link rel="styles...
复制链接

扫一扫