css常用属性

最新推荐文章于 2024-09-03 10:43:26 发布

zhangshaozhong__

最新推荐文章于 2024-09-03 10:43:26 发布

阅读量298

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/zhangshaozhong__/article/details/122815376

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.背景：颜色图片重复

#div1 {
				/* width: 500px; */
				height: 1000px;
				/* 背景颜色 */
				background-color: brown;
				/* 背景图片 */
				background-image: url(img/1873422_20210906124309618080_0.jpg);
				/* 是否重复 */
				background-repeat: no-repeat;
			}

2.文本：去除文本修饰，文本对齐方式

#div2{
				/* 字体颜色 */
				color: #A52A2A;
				/* 对齐方式  left center right*/
				/* text-align: center; */
				/* 文本修饰 */
				text-decoration: line-through overline underline;
				/* 首行缩进  em是一个相对值，如一个文本的长度为17px，则2em为34px */
				text-indent: 2em ;
			}
			a{
				color: #A52A2A;
				/* 去除文本效果 */
				text-decoration: none;
			}
			#p1{
				/* 对齐方式 */
				text-align: justify;（左右都对齐）
			}

3.display属性

h2{
				/* display属性 ：none隐藏元素 block显示元素（显示成块级元素，会自动换行） */
				display: none;
			}

属性还有很多，如行内块级属性

4.浮动

#d1{
				width: 100px;
				height: 100px;
				background-color: chocolate;
				/* 浮动 左浮动 */
				float: left;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: aqua;
				/* 浮动 左浮动 */
				float: left;
			}

左右都可以浮动

5.盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style type="text/css">
			#d1{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
				/* 设置边框 */
				border: #D2691E outset 5px;
				/* 设置内边距 */
				/* padding: 15px; */
				/* padding-left: 20px; */
				padding: 20px 20px;
				/* 设置外边距 */
				margin-top: 100px;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
		盒子模型
			padding 内边距
			border 边框
			margin 外边距
			
			border 边框
				设置边框的颜色 样式 宽度
				border:颜色 样式 宽度
				 如：border: red solid 1px
				单独设置边框颜色 样式 宽度
				 如：border-width
					 border-style
					 border-color
				border-collapse
					设置是否将表格边框折叠为单一边框
					属性值：separate(默认，单元格边框独立) collapse(单元格边框合并)
			padding 内边距
				设置元素所有内边距的宽度，或者设置各边上内边距的宽度
				单独设置：padding-top padding-right padding-bottom padding-left
				设置1个：都相同
				设置2个：上下一致左右一致
				设置3个：上右下一致，左和右一致
			margin外边距
				设置一个元素所有外边距的宽度，或者个边上外边距的宽度
		 -->
		 <div id="d1">牛</div>
	</body>
</html>

zhangshaozhong__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css常用属性

1.背景：颜色图片重复#div1 { /* width: 500px; */ height: 1000px; /* 背景颜色 */ background-color: brown; /* 背景图片 */ background-image: url(img/1873422_20210906124309618080_0.jpg); /* 是否重复 */ background-repeat: no-repeat; }2.文本：去除
复制链接

扫一扫