前端学习笔记(CSS)——常用属性

最新推荐文章于 2024-05-26 22:52:59 发布

大佬橙1215

最新推荐文章于 2024-05-26 22:52:59 发布

阅读量115

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43676025/article/details/88380586

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>常用属性</title>
	<style type="text/css">
		/*1、宽高、背景颜色*/
		#box1 {
			width: 100px;	/*像素*/
			/*height: 100em; 英寸*/
			height: 200px;
			/*长度单位
				px：代表以像素为单位
				em：以英寸为单位
				%：代表当前标签的宽度（或者高度）占父元素的宽度（或者高度）的百分比
			*/
			background-color: red;
			/*background属性，可以代表两种属性
			background-color: red;
			background-image: url("...");
			*/

			/*CSS中的颜色：
				1、用颜色的名字来表示，例如：red、yellow、green等
				2、用颜色的色号（六位的16进制，也可以用3为位）来表示，例如#aaa、#666aaa
				3、用rgb（或者rgba）三原色来合成，例如，rgb(222,111,99)、rgba(222,111,99,0.2)

			*/
		}

		#box2 {
			width: 50%;
			height: 50%;
			background-color: green;
			background-image: url("../img/2_1.jpg");
			background-size: 50px 100px;   /*设置背景图片大小*/
		}
		/*2、盒子模型
			内边距、外边距、边框
		*/
		#big{
			width:200px;
			height:200px;
			background-color: #666;
			margin: 10px;/*外边距：元素四周外的边距，使元素与其它元素隔开
						   参数形式：两个参数->上 下
						   			三个参数->上 左右 下
						   			四个参数->上 右 下 左*/
						 /*外边距也可以单独设置方向*/
			margin-top: 10px;/*left,right,bottom也可以设置。【注意】:后面覆盖前面的*/

			/*内边距:边框和盒子内容之间的距离*/
			padding:20px;

			/*边框:颜色 样式 宽度;三个参数顺序可以改变,但是不能缺少*/
			border:yellow solid 3px; 
			/*样式：
				solid->实线
				deshed->虚线
				dotted->点线
			【注意】:单独设置border会覆盖*/

			/*border-radius:圆角，是CSS3的新增属性，需要进行适配*/
			border-radius: 50%; 
		}
		#small{
			width: 100px;
			height:100px;
			background-color: #da9;
			margin-left: 20px;
			margin-top: 20px;
			margin-bottom: 150px;
			border-right: 150px;
			/*外边距：上下边距可以超出，左右边距不能超出*/
		}

		/*3、元素级*/
		#p1 {
			display: inline; /*设置行级元素，不会独占一行*/
			width:300px;     /*行级元素的宽度是自适应的*/
			margin-top: 30px;
			margin-bottom: 50px;
			margin-left: 50px;
			/*行级元素上下外边距不生效*/
			padding-top: 20px;
			padding-left: 10px;
			/*行级元素内边距都生效*/
		}
		a {
			display: block;  /*设置块级元素，独占一行*/
			width:300px;     /*行级元素的宽度是设置的*/
		}
		
		/*4、文本属性的设置*/
		#p2{
			width: 100px;
			height: 150px;
			/*字体*/
			font-family: "黑体";
			/*字号*/
			font-size: 20px;
			/*粗细程度:100-700之间的数字，默认是400*/
			font-weight: 700;
			/*颜色*/
			color:#a11111;
			/*溢出处理*/
			overflow: hidden; /*溢出隐藏*/
			overflow: scroll; /*溢出滑动*/
		}

		#p3{
			width: 100px;
			white-space: normal;
			/*处理空白
				normal,默认换行留空白
				pre,在前面留空白
				norwrap，不换行
				pre-line，上面留空白，换行
				pre-wrap，那面留空白，换行*/
			word-wrap: break-word; /*按单词打断换行*/
		}
	</style>
</head>
<body>
	<div id="box1">
		<div id="box2"></div>
	</div>

	<div id="big">
		<div id="small"></div>
	</div>

	<p id="p1">我是P标签</p>
	<a href="#">超链接</a>

	<p id="p2">
	青青园中葵，朝露待日晞。<br>
	阳春布德泽，万物生光辉。<br>
	常恐秋节至，焜黄华叶衰。<br>
	百川东到海，何时复西归？<br>
	少壮不努力，老大徒伤悲。<br>	
	</p>

	<div id="p3">
		If you do not leave me,I will by your side until the life end!
	</div>
</body>
</html>

网页显示如下

前端学习笔记(CSS)——三种引入CSS的方式与优先级比较

大佬橙1215

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记(CSS)——常用属性

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;常用属性&lt;/title&gt; &lt;style type="text/css"&gt; /*1、宽高、背景颜色*/ #box1 { width: 10
复制链接

扫一扫

专栏目录