Web开发基础学习笔记整理（6）

最新推荐文章于 2024-05-05 14:01:41 发布

Mo*◑

最新推荐文章于 2024-05-05 14:01:41 发布

阅读量210

点赞数 2

分类专栏： # Web开发基础文章标签： html css

本文链接：https://blog.csdn.net/qq_44458489/article/details/105044751

版权

Web开发基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS中的常用属性

颜色

   字体颜色    color:red;    color:#ff0000;
   背景颜色    background-color:red;    background-color:#ff0000; 
   边框颜色    border:2px  solid实线/dotted虚线  red;
                  线宽        实虚线          颜色

宽高

   宽度 width:xx;
   高度 height:xx;

字体

   字体        font-family:xx;
   字号/大小   font-size:xx;
   （html中设置字体、字号和颜色: <font face=”” size=”1-7” color=””></font>）
   水平方向对齐  text-align:left/center/right;
  （说明1：该属性适用于标记中的文字，但是标记必须是块标记
    说明2：行内标记设置水平方向对齐，必须把行内标记放在块标记中）
    行高 line-height：数字;    直接写数字，表示几倍行间距
    缩进 text-indent:数字+em;  em相当于中文字体中几个缩进

代码部分：

<html>
	<head>
		<title>CSS的常用属性</title>
	</head>
	<body>
		<!-- 宽高属性 -->
		<div style="width:200px;height:200px;background-color:red">我是一个div标记</div>
		<div style="width:200px;height:200px;background-color:red">我是一个div标记</div>
		<p style="width:100px;height:100px;background-color:yellow">这是一个p标记</p>
		
		<!-- 字体、字号、颜色属性 -->
		<div style="font-family:楷体;font-size:50px;color:green;font-style:normal">今天是星期一</div>
		
		<!-- 水平对齐方式属性：适用于标记中的文字，但是该标记只能是块标记 -->
		<div style="text-align:center;border:1px solid blue">你好</div>
		<span style="text-align:center;border:1px solid red">hello</span>
		<h1 style="text-align:center">早上好</h1>
		
		<!-- 行内标记设置水平对齐，要将行内标记放在块标记中才可以 -->
		<!-- div和h1因为是块标记，内容居中了；span是行内标记，可以将span放在块标记中 -->
		<div style="text-align:center">
			<span>hello</span>
		</div>
		
		<!-- 水平对齐方式属性的应用案例:设置图片水平对齐
			 说明：img标记是行内标记，要设置img标记水平对齐，需要将img放在块标记div中
		-->
		<div style="background-color:yellow;text-align:center">
			<img src="玫瑰.jpg" style="width:200px;height:100px"/>
		</div>
		
		<!-- 行高属性 -->
		<div style="line-height:2"> <!-- 空格 -->
			&nbsp;&nbsp;当你的才华还撑不起你的野心的时候，你就应该静下心来学习；当你的能力还驾驭不了你的目标时，就应该沉下心来，历练；梦想，不是浮躁，而是沉淀和积累，只有拼出来的美丽，没有等出来的辉煌，机会永远是留给最渴望的那个人，学会与内心深处的你对话，问问自己，想要怎样的人生，静心学习，耐心沉淀，送给自己，共勉。
		</div>
		<div style="line-height:2;text-indent:2em">
			当你的才华还撑不起你的野心的时候，你就应该静下心来学习；当你的能力还驾驭不了你的目标时，就应该沉下心来，历练；梦想，不是浮躁，而是沉淀和积累，只有拼出来的美丽，没有等出来的辉煌，机会永远是留给最渴望的那个人，学会与内心深处的你对话，问问自己，想要怎样的人生，静心学习，耐心沉淀，送给自己，共勉。
		</div>
	</body>
</html>

插入的图片：

玫瑰.jpg

在这里插入图片描述

效果图：

在这里插入图片描述
若想了解更多可点击本处

Mo*◑

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web开发基础学习笔记整理（6）

CSS中的常用属性颜色字体颜色 color:red; color:#ff0000; 背景颜色 background-color:red; background-color:#ff0000; 边框颜色 border:2px solid实线/dotted虚线 red; 线宽实虚线 ...
复制链接

扫一扫

专栏目录