前端学习之路——CSS

最新推荐文章于 2023-08-21 16:54:56 发布

温酒09

最新推荐文章于 2023-08-21 16:54:56 发布

阅读量105

点赞数

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

本文链接：https://blog.csdn.net/weixin_37942054/article/details/123841018

版权

1、css引入方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--  引入块级元素css样式的方式有3种
		 1.行内样式 （优先级最高）
		 2.内部样式 3.外部样式（2.3 优先级一样，后执行会覆盖先执行的）
		 -->
		
		
		
		
		
		
		<!-- 2.内部样式：通过head标签内的 style标签设置样式 -->
		<style type="text/css">
			/* 通过css选择器选择到标签后 添加样式 */
			span{
				/* 标签名选择器 */
				border: blue 2px dotted;
				/* solid ：实线 dashed:虚线 double:双线 dotted:点状线*/
				font-size: 30px;
				font-weight: 100;
				background-color: aliceblue;
			}
		</style>
		
		<!-- 3.外部样式 通过link标签引入外部的css文件样式设置 -->
		<link rel="stylesheet" type="text/css" href="./css/demo.css"/>
		<!-- rel = "stylesheet" 不能省略，表示引入的是一个样式表文件 -->
		
	</head>
	<body>
		<!-- div 分区标签 ：独占一行，块级分区元素
		 可以设置宽和高，如果不设置，宽度是默认填满父级元素，
		 高度由内容决定-->
		<!-- 1.行内样式：通过style属性设置样式 -->
		<div style="border: 2px solid red; font-size: 28px;background-color: cadetblue;">
			<!-- div标签的style属性 可以设计分区块样式 
			1.border边框 : 2px 边框大小 solid边框是实线  red边框颜色
			2.font-size 字体大小
			3.background-color 背景颜色
			-->
			这是一个div <br />
			div中的内容决定div的大小 <br>
			可以通过css设计div的样式 
		</div>
		
		<!-- span :行内分区元素，只占一行，所有span标签共同占用一行，不能设置宽和高 -->
		<span> span1 </span>
		<span> span2 </span>
		<span> span3 </span>
		
		<!-- p标签：块级分区元素，独占一行，用于包裹一段文本
		（一般写文章时用p标签包裹每一段内容） -->
		<p> 这是一个p标签 </p>
		<p> 这是一个p标签 </p>
		<p> 这是一个p标签 </p>
		<p> 这是一个p标签 </p>
		<p> 这是一个p标签 </p>
	</body>
</html>

2、文本和字体相关

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 100px;
				border: brown 2px double;
				text-align: center;/* 水平对齐方式 */
				
				
				/* 文本修饰：
				 overline 上划线
				 underline 下划线
				 line-through 删除线
				 none 去掉文本修饰*/
				 text-decoration: line-through;
				 /* 字体颜色 */
				 color: cyan;
				 
				 /* 行高 ÿ