web前端day4----背景,文字和文本修饰,显示方式

最新推荐文章于 2024-05-10 17:41:37 发布

OrdnAry

最新推荐文章于 2024-05-10 17:41:37 发布

阅读量526

点赞数

分类专栏：学习文章标签： css

本文链接：https://blog.csdn.net/OrdnAry/article/details/107394951

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

<!--
1.背景颜色： background-color  取值 合法颜色值
2.背景图片： background-image url（“背景图片路径”）
3.背景图平铺：当背景容器尺寸大于大于背景图片尺寸，默认平铺效果
	background-repeat属性：默认repeat平铺 no-repeat不平铺
						   repeat-x水平方向平铺，repeat-y垂直方向平铺
4.背景图尺寸：background-size属性
		取值  两个值 数字px 或者  百分比(相对于容器)
			  100% 100% 填充满容器，图片完整显示在容器中，改变图片尺寸比例。
			  cover  按照图片原始尺寸等比例放大，填充满容器，图片有可能溢出。
			  contain 按照图片原始尺寸等比放大，一条边填充满，图片完整，容器中可能有空白
5.背景图起始位置：background-position属性
		取值  两个值 水平 垂直 数字px 或者 百分比
		默认  0 0
小图标的精灵图通常使用背景图
6.渐变背景

文字和文本修饰：
1.样式标签 b加粗 i斜体 s删除线 u 下划线 sub下标 sup上标
2.加粗：font-weight：bold
3.斜体：font-style：italic
4.线条修饰： text-decoration：取值 默认none 没有修饰，line-through删除线
							  underline 下划线 overline 上划线
5.字体颜色：color:取值 合法颜色值
6.字体大小: font-size:取值 数字px
7.文本位置:
	水平位置:text-align: 取值 left默认/center/right
	垂直位置:内边距padding    行高属性line-height: 数字px
	总结:行内给元素跟着内容走
		 行内元素(父元素设置) 水平居中 text-align:certer 垂直居中 line-height:父元素高度(给父元素设置)
		 块级元素(自己设置)   水平居中 margin:0 auto
8.font-family: 字体类型 仿宋什么的取值取什么

显示方式:
1.display属性: 取值 block块级  inline行内  inline-block行内块  none不显示
	元素在页面中如何显示和标签没有关系,和display属性关联
	块级元素默认display值为block  行内元素默认display值为inline
2.visibility属性:默认 visible 显示  hidden 隐藏
display:none和visibility:hidden区别:
display:none 脱离文档流,不占页面空间
visibility:hidden 仍然占据页面空间
补充:显示方式:
透明度:  1. rgba(0~255,0~255,0~255,0~1)
		 2. opacity属性: 取值 0~1
1.rgba透明度针对只是一种颜色
2.opacity透明度针对整个标签
-->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   /*样式初始化*/
   body{margin:0;padding:0;}
   /*背景样式*/
	.bgimage{
		width:1000px;
		height:600px;
		border:1px solid black;
		background-image:url("img/001.jpg");
		background-repeat:no-repeat; /*不平铺，默认原始尺寸*/
		/*background-repeat:repeat-x;
		background-repeat:repeat-y;*/
		background-size:cover/*600px 400px或者100% 100%*/;
		/*background-size:contain;*/		  
		  }
	.bgtu{
		width:50px;
		height:50px;
		/*border:1px solid black;*/
		margin:10px auto;	/*水平居中*/
		background-image:url("img/tubiao.jpg");
		background-size:400px 400px;
		/*background-position:-25px -7px;*/ /*背景图起始位置*/
		background-position:-84px -7px;		
	}
	/*文字修饰*/
	p.font{
		background-color:green;
		height:100px;
		/*padding-top:50px;*/
		font-weight:bold;/*加粗*/
		font-style:italic;/*斜体*/
		text-decoration:line-through;/*删除线*/
		color:red;
		font-size:30px;
		text-align:center;/*文本居中*/
		line-height:100px;/*行高调整文字位置*/
	}
	/*显示方式*/
	#d1{
		width:200px;
		height:200px;
		background-color:red;
		display:inline-block/*none*/;
		visibility:/*visible*/hidden;
	}
	#d2{
		width:200px;
		height:200px;
		background-color:green;
		display:inline-block;
	}
	div{
			width:200px;
			height:200px;
			border:1px solid black;
		}

	.d3{
			background-color:rgba(255,0,0,0);
		}
	.d4{
			background-color:rgb(255,0,0);
			opacity:0;
		}
  </style>
 </head>
 <body>
  <div class="bgimage">背景图片显示</div>
  <div class="bgtu"></div>
  <p><b>大段大段<s>文字</s></b></p>
  <p class="font">大段大段文字</p>
 <!--块级显示方式display-->
  <div id="d1"></div>
  <div id="d2"></div>
 <!--透明度区分-->
  <div class="d3"></div>
  <div class="d4"></div>
 </body>
</html>

在这里插入图片描述

OrdnAry

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端day4----背景,文字和文本修饰,显示方式

<!--1.背景颜色： background-color 取值合法颜色值2.背景图片： background-image url（“背景图片路径”）3.背景图平铺：当背景容器尺寸大于大于背景图片尺寸，默认平铺效果 background-repeat属性：默认repeat平铺 no-repeat不平铺 repeat-x水平方向平铺，repeat-y垂直方向平铺4.背景图尺寸：background-size属性取值两个值数字px 或者百分比(相对于容器)
复制链接

扫一扫