CSS中常用样式总结

最新推荐文章于 2022-07-20 17:51:23 发布

赵广陆

最新推荐文章于 2022-07-20 17:51:23 发布

阅读量753

点赞数

分类专栏： front

本文链接：https://blog.csdn.net/ZGL_cyy/article/details/105636317

版权

front 专栏收录该内容

45 篇文章 6 订阅

订阅专栏

1 CSS字体及文本属性

样式调试工具

样式位置:

盒子模型:

1.1 字体：（font）

/*字体的颜色*/

color: gray;

/*字体的大小*/

font-size: 12px;

/*字体的加粗*/

/*font-weight: bold;*/

/*字体的风格*/

/*font-family: 宋体;*/

/*字体倾斜*/

/*font-style: italic;*

1.2 文本（text）

/*下划线展示*/

text-decoration: underline;

/*去除下划线*/

text-decoration: none;

/*文本居中*/

text-align: center;

1.3 border 属性有三个修饰属性

border-color

border-color:red;

border-top-color:blue;

border-width

border-width: 1px;

border-left-width: 3px;

border-style

border-style: solid

border-bottom-style: solid；

可以使用border统一设置

border: 1px solid red;

border-right: 5px dotted blue;

1.4 边框的风格

测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.top{
				
				width: 100%;
				
				height: 100px;
				
				border: 1px solid  red;
				
			}
			
			.top_a{
				/*字体的颜色*/
				color: gray;
				
				/*字体的大小*/
				
				font-size: 12px;
				/*
				/*字体的加粗*/
				/*font-weight: bold;*/
				/*字体的风格*/
			    /*font-family: 宋体;*/
				/*字体倾斜*/
				/*font-style: italic;*/
				
				
				/*去除下划线*/
				text-decoration: none;
			}
			
			a:hover{
				
				color: red;
				/*下划线展示*/
				text-decoration: underline;
				
			}
			
			.tips{
				
				width: 100%;
				
				height: 40px;
				
				border:  1px dotted indianred;
				/*背景颜色*/
				background-color: pink;
				
				/*文本居中*/
				text-align: center;
				
				/*行高  行高的高度和div外面的高度一致这时候里面的内容就会垂直居中*/
				line-height: 40px;
				
			}
			
			.center{
				
				width: 100%;
				
				height: 500px;
				
				border: 1px  solid  red;
               /*设置背景图片*/
                background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
				
				/*设置背景图片不重复*/
				
				background-repeat: no-repeat;
				
				/*调整背景图片的位置   X   Y*/
				background-position: center;
				
				/*调整背景图片的大小   宽  高  */
				/*background-size: 300px  500px;*/
				/*背景颜色    red   #f0000  rgb(255,0,0)  rgba(255,0,0,.5){包含透明度} */
				background-color: rgba(255,0,0,.5);
				
				
			}
			
		</style>
		
	</head>
	<body>
		<!--顶部的位置-->
		<div class="top">
		
		  <a href="" class="top_a">登录页面，调查问卷</a>
		</div>
		
		<!--中间的提示操作-->
		
		<div class="tips">
			
			<span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</span>
			
		</div>
		
		<div class="center">
			
			
			
		</div>
		
	</body>
</html>

效果：

2 CSS背景

2.1 行高

line-height: 40px;

2.2 背景

/*设置背景图片*/

background-image:

url("http://img30.360buyimg.com/da/jfs/t22399/154/7

65213112/96035/f94f9605/5b17512dN2de9d722.jpg");

/*设置背景图片不重复*/

background-repeat: no-repeat;

/*调整背景图片的位置

X Y*/

background-position: center;

/*调整背景图片的大小宽高 */

/*background-size: 300px 500px;*/

/*背景颜色 red

#f0000 rgb(255,0,0)

rgba(255,0,0,.5){包含透明度} */

background-color: rgba(255,0,0,.5);

3 CSS 行块儿元素

3.1 行元素和块元素

行内元素：（多个标签位于同一行）

span font 小标签 img a 等

块元素：（标签可以自动换行的元素是块元素）

div h1-h6 ul p等

4 其他样式

/*调整透明度的属性 0-1*/

opacity: 0.4;

/*超出隐藏 hidden*/

overflow: hidden;

/*行内元素转块级元素inline block none(隐藏)*/

display: block;

测试代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div_1{
				
				width: 200px;
				
				height: 200px;
				
				background-color: rgba(255,0,0);
				
				color: rgba(0,0,255);
				
				/*调整透明度的属性  0-1*/
				opacity: 0.4;
				
				/*超出隐藏  hidden*/
				overflow: hidden;
				
				
			}
			
			#span_1{
				
				width: 100px;
				
				height: 100px;
				
				border: 1px solid red;
				/*行内元素转块级元素   inline   block  none(隐藏)*/
				display: block;
				
			}
			
			ul{
				
				float: right;
				
			}
			
			li{
				/*列表的风格去除*/
				list-style: none;
				
				float:left;
				/*内边距*/
				padding-left: 15px;
			}
			
		</style>
		
	</head>
	<body>
		
		
		<ul>
			<li><a href="">新闻</a></li>
			<li><a href="">hao123</a></li>
			<li><a href="">地图</a></li>
			<li><a href="">视频</a></li>
			<li><a href="">贴吧</a></li>
			<li><a href="">学术</a></li>
		</ul>
		
		<!--<hr />
		
		
		<div class="div_1">
			
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			
		</div>
		
		<hr />
		
		<span id="span_1">1234</span>
		
		<hr />
		-->
		
		
	</body>
</html>

效果：

浮动效果就是right从右向左浮动最开头的向右去挤，left是从左向右浮动最开头的向左去挤！

赵广陆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中常用样式总结

目录1 CSS字体及文本属性1.1 字体：（font）1.2 文本（text）1.3 border 属性有三个修饰属性1.4 边框的风格2 CSS背景2.1 行高2.2 背景3 CSS 行块儿元素3.1 行元素和块元素4 其他样式1 CSS字体及文本属性1.1 字体：（font） /*字体的颜色*/ color: gray; /*...
复制链接

扫一扫