css样式样式属性样式属性值的介绍

最新推荐文章于 2024-07-26 08:00:00 发布

hjr_2432159231

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量331

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_52084292/article/details/110240646

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/border.css" /><!--css文件由link引入-->
		<style>
			
			div{
				background-color: yellow;
			}
			.text-size{
				font-size: 42px;
				font-family: "calisto mt";
				letter-spacing: 15px;
			}
			#indent{
				text-indent: 65px;
			}
			a{
				text-decoration: none;/*去下划线*/
			}
			#btn{
				background-color: red;
				color: white;
				cursor: pointer;
				height: 40px;/*垂直居中*/
				line-height: 40px;/*垂直居中*/
				width: 410px;
				letter-spacing: 15px;
				border: 1px solid #FFFF00;	
			}
			p{
				/*font-family: "arial black";
				
				font-size: x-large;*/
				font: 36px "blackadder itc";
			}
		</style><!--  -->
	</head>
	<body>
		<!--  
			css样式属性  如 border
			css样式属性值 如1px solid red
			css声明 如  border:1px solid red 
		-->
		<div style="border:1px solid red ;">郑州</div>
		<div>hello world</div>
		<sapn class="text-size">郑州</sapn>
		<i class="text-size">高新区</i>
		<input id="indent" />
		<!--
			选择器：标签选择器
			              类选择器
			       ID选择器   
		-->
		<a href="http://www.baidu.com">百度</a>
		<div id="btn">登录</div>
		<!--
			dispiay可将块级元素与行内元素互唤
			有些css样式在行内元素中无法实现 用display :block 转化为块级元素
		-->
		<span style="display: block;">郑州</span>
		<div style="display: inline;">郑州</div>
		<div style="display: inline-block;width: 500px;">郑州</div>
		<p>This is an apple</p>
		<p>这是一个苹果</p>
	</body>
</html>

使文本垂直居中的方法：同时设置height， line-height 有相同属性值

！！！但line-height不能和font一同使用-----需要在 font 中的字体大小后面加 / 设置高度像素值

color样式属性 ------------ 设定文本颜色------------------属性值 inherit 规定应该从父元素继承颜色

letter-spacing样式属性 ------------ 设置字符间距，样式属性值可以为负值，但这时字符之间更加“拥挤”

text-indent样式属性 ------------ 设定文本块中首行文本的缩进，如果样式属性值为负值，则首行会被缩进到左边

text-decoration样式属性 --------- 设定文本装饰（比如是否有下划线及划线显示的位置）

text-align样式属性 ----------- 设置标签内文本的水平对齐方式

cursor样式属性 ----------- 用于设定光标的显示形状----------

default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。

s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

display样式属性 --------- 设置元素生成的框的类型 ------- 行级元素和块级元素可以通过display样式属性实现互相转换以实现换行或使用块级元素才有的CSS样式。

-----------------------------------------------------------------------------------------------

•font、color、letter-spacing、text-indent、text-align、list-style、cursor和line-height等样式属性具有继承性；

•border、outline、background、text-decoration、display、vertical-align、position、left、right、top、bottom、z-index、width、height、overflow、overflow-x、overflow-y、margin、padding、float和clear等样式属性不具有继承性；

hjr_2432159231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css样式样式属性样式属性值的介绍

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/border.css" /> <style> div{ background-color: yellow; }.
复制链接

扫一扫