CSS的基本属性

最新推荐文章于 2022-07-21 16:27:34 发布

270年前

最新推荐文章于 2022-07-21 16:27:34 发布

阅读量325

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_49344258/article/details/108220995

版权

一、CSS的基本属性

之前对CSS做了一个基本的了解

今天继续深入的学习CSS的基本属性

1.修饰文本的样式属性

属性名称	属性的作用	属性的取值
text-transform	文本转换大小写	None:capitalize:Uppercase： Lowercase
text-align	元素内容的水平对齐方式。	left \| right \| center....
word-spacing	单词之间的额外间隙	数字+单位【px】可以为负数
letter-spacing	字符与字符之间的间隙	数字+单位【px】可以为负数
text-indent	定义块内文本内容的缩进	数字+单位【px】可以为负数
vertical-align	定义行内元素在行框内的垂直对齐方式	top middle bottom
line-height	定义元素中行框的最小高度。	数字+单位【px】不能为负数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用的文本属性</title>
		<style>
			#p1{
				text-transform:none;
				text-align:left;
				text-indent: 50px;
			}
			#p2{
				text-transform:capitalize;
				text-align:center;
			}
			#p3{
				text-transform:uppercase;
				text-align:right;
			}
			#p4{
				text-transform:lowercase;
			}
			#p5{
				text-transform:full-width;
			}
			#p6{
				word-spacing:10px;
				letter-spacing:15px;
			}
			table{
				height: 200px;
			}
			table tr td{
				vertical-align: bottom;
			}
			#p7{
				line-height: 20px;
			}
		</style>
	</head>
	<body>
		<h1>常用的文本属性</h1>
		<p id="p1">none：无转换</p> 
		<p id="p2">capitalize：将每个单词的第一个字母转换成大写 [常用]</p>
		<p id="p3">Uppercase：将每个单词转换成大写 [常用]</p>
		<p id="p4">Lowercase:将每个单词转换成小写 [常用]</p>
		<p id="p5">full-width：将所有字符转换成fullwidth形式。
		如果字符没有相应的fullwidth形式，将保留原样。
		这个值通常用于排版拉丁字符和数字等表意符号。（CSS3）
		 </p>
		 <p id="p6">this  is  a  html  page! 这是一个html文件</p>
		 <p id="p7">this  is  a  html  page! 这是一个html文件
					 this  is  a  html  page! 这是一个html文件
					 this  is  a  html  page! 这是一个html文件
					 this  is  a  html  page! 这是一个html文件
					 this  is  a  html  page! 这是一个html文件
					 this  is  a  html  page! 这是一个html文件
					 this  is  a  html  page! 这是一个html文件
					 this  is  a  html  page! 这是一个html文件
					 this  is  a  html  page! 这是一个html文件
		 </p>
		 <br>
		 <table border="1px">
			 <tr>
				 <td>vertical-align</td>
				 <td>定义行内元素在行框内的垂直对齐方式</td>
				 <td>top middle bottom</td>
			 </tr>
		 </table>
	</body>
</html>

2.修饰字体的样式属性

属性名称	属性用途	属性取值
font-style	文本是否为斜体	normal \| italic \| oblique
font-weight	文本字体的粗细	用数字表示文本字体粗细 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900
font-size	定义元素的字体大小	数字+单位【px】
font-family	定义元素文本的字体样式	字体样式名称，可以有多个，中间用“，”
color	设置字体颜色	单词/颜色码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字体设置属性</title>
		<style>
			#p1{
				font-style:italic;
			}
			#p2{
				font-weight:900;
			}
			#p3{
				font-size:50px;
				font-weight:900;
			}
			#p4{
				font-style:italic;
				font-weight:900;
				font-size:50px;
				font-family:helvetica, verdana, sans-serif;
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>字体设置属性</h1>
		<p id="p1">font-style	文本是否为斜体	normal | italic | oblique</p>
		<p id="p2">font-weight	文本字体的粗细	用数字表示文本字体粗细</p>
		<p id="p3">font-size	定义元素的字体大小	数字+单位【px】</p>
		<p id="p4">font-family	定义元素文本的字体样式	字体样式名称，可以有多个，中间用“，”</p>
		<p id="p5">color 设置字体颜色	单词/颜色码</p>
	</body>
</html>

1.3修饰颜色的样式属性

属性名称	用途	取值
color	文本颜色	单词/颜色码
background-color	元素的背景色	单词/颜色码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>颜色设置</title>
		<style>
			p{
				font-size: 30px;
				color: red;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<p>color	文本颜色	 单词/颜色码<br>
		   background-color	元素的背景色	单词/颜色码
		</p>
	</body>
</html>

1.4修饰背景的样式属性

属性名称	用途	取值
background-color	定义元素使用的背景颜色。	单词/颜色码
background-image	定义元素使用的背景图像	图片路径 url(图片路径);
background-repeat	定义元素的背景图像如何填充	repeat-x：背景图像在横向上平铺 repeat-y：背景图像在纵向上平铺 repeat：背景图像在横向和纵向平铺 no-repeat：背景图像不平铺

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景设置</title>
		<style>
			body{
				background-image:url(imgs/avatar04.png);
				background-repeat:no-repeat;
			}
			p{
				font-size: 50px;
				background-image: url(imgs/bg2.jpg);
			}
		</style>
	</head>
	<body>
		<p>background-color	定义元素使用的背景颜色。	单词/颜色码</p>
		<p>background-image	定义元素使用的背景图像	图片路径url(图片路径);</p>
		<p>background-repeat	定义元素的背景图像如何填充	repeat-x： 背景图像在横向上平铺 
		repeat-y： 背景图像在纵向上平铺 repeat： 背景图像在横向和纵向平铺 no-repeat： 背景图像不平铺 
		</p>
	</body>
</html>

1.5修饰边框的样式属性

基本包含三个属性：

属性名称	用途	取值
border-width	定义元素的边框厚度	数字。上、右、下、左的顺序 1个值 -- 全部4边 2个值 -- 上/下左/右 3个值-- 上左/右下 4个值 -- 上、右、下、左
border-style	定义元素的边框样式	none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset
border-color	定义元素的边框颜色	单词/颜色码。上、右、下、左的顺序 1个值 -- 全部4边 2个值 -- 上/下左/右 3个值-- 上左/右下 4个值 -- 上、右、下、左

border：<line-width> || <line-style> || <color>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框设置</title>
		<style>
			#div1{
				width: 100px;
				height: 100px;
				border: 5px double red;
			}
			#div2{
				width: 200px;
				height: 200px;
				border-width: 10px;
				border-style: solid;
				border-color: blue;
			}
			#div3{
				width: 300px;
				height: 300px;
				border-width: 10px 20px 30px 40px;
				border-style: dotted;
				border-color: red  blue yellow greenyellow;  
			}
			#div4{
				width: 400px;
				height: 400px;
				border-width: 10px 20px;
				border-style: dashed;
				border-color: red  blue;  
			}
			img{
				border: 10px outset black;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div><br>
		<div id="div2"></div><br>
		<div id="div3"></div><br>
		<div id="div4"></div><br>
		<img  src="imgs/avatar04.png"/>
	</body>
</html>

1.6修饰文本装饰样式属性

属性名称	用途	取值
text-decoration-line	设置文本的装饰线	none：指定文字无装饰 underline：指定文字的装饰是下划线 overline：指定文字的装饰是上划线 line-through：指定文字的装饰是贯穿线 blink：指定文字的装饰是闪烁。
text-decoration-color	设置文本的装饰线颜色	单词/颜色码
text-decoration-style	设置文本的装饰线的样式	solid \| double \| dotted \| dashed \| wavy
text-shadow	文字是否有阴影及模糊效果	数字1[水平偏移量] 数字2[垂直偏移量] 数字3[模糊度] 颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本装饰属性</title>
		<style>
			#p1{
				font-size: 40px;
				color: red;
				text-decoration-line:underline;
				text-decoration-color:blue;
				text-decoration-style: double;
				text-shadow: 5px 5px  20px #000000;
			}
			a{
				font-size: 40px;
				text-decoration-line:none;
				color: black;
			}
		</style>
	</head>
	<body>
		<p id="p1">文本装饰属性---text-decoration-line---文本的装饰线</p>
		<a href="#">去掉超链接上的下划线</a><br>
		<p id="p1">文本装饰属性---text-decoration-color---文本的装饰线的颜色</p>
		<p id="p1">文本装饰属性---text-decoration-style---文本的装饰线的形状</p>
		<p id="p1">文本装饰属性---text-shadow---文字是否有阴影及模糊效果</p>
	</body>
</html>

1.7修饰尺寸样式属性

属性名称	用途	取值
width	定义元素的宽度	数字
height	定义元素的高度	数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸设置</title>
		<style>
			div{
				width: 400px;
				height: 400px;
				border: 10px solid black;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

1.8修饰边距样式属性

属性名称

用途

取值

margin

margin-top

margin-bottom

margin-left

margin-right

元素设置所有四个方向（上右下左）的外边距

数字

上、右、下、左的顺序

1个值 -- 全部4边

2个值 -- 上/下左/右

3个值-- 上左/右下

4个值 -- 上、右、下、左

padding

padding-top

padding-bottom

padding-left

padding-right

元素设置所有四个方向（上右下左）的内边距

数字

上、右、下、左的顺序

1个值 -- 全部4边

2个值 -- 上/下左/右

3个值-- 上左/右下

4个值 -- 上、右、下、左

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸设置</title>
		<style>
			div{
				width: 400px;
				height: 400px;
				border: 10px solid black;
				background-color: red;
				margin-top:-8px;
				m
			}
			body{
				padding-left: 100px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

1.9修饰列表样式属性

list-style-image--设置或检索作为对象的列表项标记的图像---图片路径

list-style-type-----设置或检索作为对象的列表项预设标记---disc | circle | square | decimal..

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表属性</title>
		<style>
			ul li{
				font-size: 20px;
				list-style-type: square;
			}
			ol li{
				font-size: 30px;
				list-style-image: url(imgs/list.png);
			}
		</style>
	</head>
	<body>
		<ul>
			<li>name：张三</li>
			<li>age：23</li>
			<li>sex：男</li>
			<li>address：西安</li>
		</ul>
		<br>
		<ol>
			<li>name：张三</li>
			<li>age：23</li>
			<li>sex：男</li>
			<li>address：西安</li>
		</ol>
	</body>
</html>