第三次网页前端培训（CSS）

最新推荐文章于 2024-07-12 20:49:16 发布

zjygzzk

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量318

点赞数 1

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/zjygzzk/article/details/122806522

版权

一，常用属性

1，背景

背景颜色

背景图片

是否重复

<style type="text/css">
  #div1 {
   width:1700px;
   height:800px;
   /*背景颜色*/
   background-color:#EEE8AA;
   /*背景图片*/
   background-image: url(img/dd.png);
   /*是否重复*/
   background-repeat: no-repeat;
  }
  </style>
 </head>
 <body>
  <div id="div1">
   Hello
  </div>

2，字体

#div2 {
   /*字体颜色*/
   color:#0000FF;
   /*对齐方式 left center right*/
   text-align: left;
   /*文本修饰*/
   text-decoration: line-through overline underline;
   /*首行缩进*/
   text-indent: 2em;
  }
  a {
   /*去除文本下划线（去除超链接的下划线）*/
   text-decoration:none;
  }
  </style>
 </head>
 <body>
<div id="div2">
   Hello World
  </div>
  < a href="">百度</ a>
 </body>
</html>

3，对齐方式（left center right justify)

#p1 {
   /*对齐方式*/
   text-align: justify;
  }
  </style>
 </head>
 <body>
<p id="p1">
   选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
   选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
   选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
   选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
   选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
   选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
   选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
   选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
   选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
   选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
   选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
   选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
   选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号～隔开
  </p >
 </body>
</html>

4,display属性

h2{
   /*display属性 none隐藏元素 block显示元素*/
   display:none;
  }

5，浮动

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>常用属性</title>
  <style type="text/css">
 /*浮动*/
  #d1 {
   width: 100px;
   height: 100px;
   background-color: #DA70D6;
   /*浮动 左浮动*/
   float: left;
  }
  #d2 {
   width: 100px;
   height: 100px;
   background-color: indianred;
   /*浮动 左浮动*/
   float: left;
  }
  </style>
 </head>
 <body>
 <div id="d1"></div>
  <div id="d2">
   
  </div>
 </body>
</html>

二，盒子模型

1，border边框

（1）设置边框的颜色，样式，宽度

border:颜色，样式，宽度

例如：border:red soild 1px

（2）单独设置边框的宽度，颜色，样式

border-width

border-style

border-color

(3)border-collapse

设置是否将表格边框折叠为单一边框。

属性值：separate(默认，单元格边框独立），collapse(单元格边框合并）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style type="text/css">
		     #d1 {
		     	width: 100px;
		     	height: 100px;
		     	background-color: #DA70D6;
		        /*设置边框*/
				border: #008000 5px outset;
				/*设置内边距*/
				/*padding:15px;*/
				/*padding-left:20px;*/
		     }
		</style>
	</head>
	<body>
		<div id="d1"></div>
	</body>
</html>

2，padding 内边距

设置所有内边距的宽度，或者设置各边上内边距的宽度。

单独设置各边的内边距：padding-top,padding-left,padding-bottom,padding-right

默认按照上右下左的顺序设定

设定1个值：上右下左都一致

设置2个值：上下一致，左右一致

设置3个值：上右下，左和右一致

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style type="text/css">
		     #d1 {
		     	width: 100px;
		     	height: 100px;
		     	background-color: #DA70D6;
		        /*设置边框*/
				border: #008000 5px outset;
				/*设置内边距*/
				/*padding:15px;*/
				padding-left:20px;
		     }
		</style>
	</head>
	<body>
		<div id="d1"></div>
	</body>
</html>

3，margin 外边距

设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度

单独设置各边的外边框：margin-top, margin-left, margin-bottom,margin-right

/*设置外边距*/
				margin-top:100px;
				margin-left:100px;

zjygzzk

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第三次网页前端培训（CSS）

一，常用属性1，背景背景颜色背景图片是否重复<style type="text/css"> #div1 { width:1700px; height:800px; /*背景颜色*/ background-color:#EEE8AA; /*背景图片*/ background-image: url(img/dd.png); /*是否重复*/ background-repeat: no-repeat; } </st
复制链接

扫一扫