css的常用属性

最新推荐文章于 2023-05-22 13:47:54 发布

Dashen__Daiwo

最新推荐文章于 2023-05-22 13:47:54 发布

阅读量475

点赞数 2

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/Dashen__Daiwo/article/details/106593362

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

css背景相关属性：
1.背景颜色:background-color
（1）格式如：
body{ background-color:rgba(0,0,255,0.2) }
或body{ background-color:rgba(0,0,255,0.2) }
2.背景图片background-image
（1）格式：
body{ background-image:url(image/bg.gif) }
3.背景重复：background-repeat
（1）重复平铺满：repeat
（2）向x轴重复:repeat-x
（3）向y轴重复:repeat-y
（4）不重复：no-repeat
4.背景位置：background-position
（1）横向：left，center，right
（2）纵向：top，center，bottom
（3）格式：
正常情况：
bacskground-position:top center;
用数字来表示位置：
background-position：300px 20px;
（注意：无论哪种情况若只写一个，则另一个默认为center）
（4）简写：body{ background:#f2f2f2 url ( images/bg.gif) no-repeat center; }

<html>
	<head> 
		<title>css常用属性（背景相关属性）</title>
		<style type="text/css">
		body{
		    width=200px;height=200px;
		    background-color:rgba(0,0,255,0.2);
			background-images:url(images/Tom.gif);
			bacskground-position:top center;
			}
		</style>
	</head>
	<body>
	
	</body>
</html>

Css的文本属性
1.横向排列：text-align:left,right,center;
2.Line-height文本行高（1）基于字体大小的%（2）数值设定固定值
3.text-indent首行缩进（1）父元素的%（2）设置固定值（3）inherit继承
4.letter-spacing字符间距（1）normal（2）px设置固定值（3）inherit
5.word-spacing单词间距（1）normal（2）px设置固定值（3）inherit
6.direction文本方向（1）ltr从左到右（2）rtl从右到左（3）
7.text-transform文本大小写（1）none默认（2）:capitalize 每个单词第一个字母大写
（2）uppercase 仅有大写（4）lowercase仅有小写字母（5）inherit和父元素属性相同

<html>
	<head> 
		<title>css常用属性（文本属性 ）</title>
		<meta charset="uft-8">
		<style type="text/css">
		div{
		    width:100%;
			height:300px
		}
		p{
		    /*text-align:left;*/
			font-size：20px;<!--一个字的高度-->
			line-height:20px;   
			text-indent:10%;
			letter-spacing:3px;
			word-spacing:20px;
			direction:rtl;
			text-transform:uppercase;
		}
		</style>
	</head>
	<body>
	<div>
	<p>麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院</p>
	<p>mai zi xue yuan</p>
	</div>
	</body> 
</html>

Css的边框属性
1.边框种类：
（1）none
（2）solid
（3）Dashed
（4）Dotted
（5）Double
（6）Groove
（7）Ridge
（8）Inset
（9）Outset
（10）inherit
2.边框宽度
（1）统一风格：border-width
（2）单独风格：border-top-width，border-left-width…
（3）属性值：thin；medium；thick…；设置px；inherit继承
3.边框颜色
（1）统一风格：border-color
（2）单独风格border-top-color，border-left-color…
（3）属性值：red,green等等
Rgb(0,0,255)
Rgba(0,255,0,0.8)
#ff6600
Inherit
（4）属性的四种情况：一个值：border-color：red;四条边都是red
两个值：border-color：blue pink；上下两条边是blue，左右是pink
三个值：（上，左右，下）
四个值：（上，右，下，左）
5.简写方式：border：solid 2px #f60…;

<html>
	<head>
		<title>css常用属性（边框属性）</title>
		<meta charset="uft-8">
		<style type="text/css">
		div{
		    border-width:4px;<!--把4px换为thin为细边框，medium为中等，thick为粗-->
		    text-align:center;
            width:60px;
			height:60px;
			float:left;
			margin-right:10px;
			background-color:#f60;		
		}
		.div0{
		    border-top-style:none;
		}
		.div1{
		    border-top-style:solid;
		}
		.div2{
		    border-bottom-style:dashed;
		}
		.div3{
		    border-left-style:dotted;
		}
		.div4{
		    border-style:double;
			borger-left-width:5px;
			border-color:blue pink;
		}
		.div5,.div6,.div7,.div8{
		    border-width:20px;
			width:40px; height:40px;
			background:none;
			border-color:#ccc;
		}
		.div5{
		    border-style:groove;
		}
		.div6{
		    border-style:ridge;
		}
		.div7{
		    border-style:inset;
		}
		.div8{
		    border-style:outset;
		}
		.div9{
		    border-style:inherit;
		}
		</style>
	</head>
	<body>
	    <div class="div0">none</div>
	    <div class="div1">solid</div>
		<div class="div2">dashed</div>
		<div class="div3">dotted</div>
		<div class="div4">double</div>
		<div class="div5">groove</div>
		<div class="div6">ridge</div>
		<div class="div7">inset</div>
		<div class="div8">outset</div>
		<div class="div9">inherit</div>
	</body>
</html>

效果如下：

Dashen__Daiwo

关注

2
点赞
踩
11

收藏

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

css背景相关属性：1.背景颜色:background-color（1）格式如：body{ background-color:rgba(0,0,255,0.2) }或body{ background-color:rgba(0,0,255,0.2) }2.背景图片background-image（1）格式：body{ background-image:url(image/bg.gif) }3.背景重复：background-repeat（1）重复平
复制链接

扫一扫