CSS基础知识(颜色、文本、阴影)

CSS基础知识(颜色、文本、阴影)

color:该属性用于控制文本颜色
font-family:设置文字的字体
font-size:用于设置文字的大小,后边可以直接为数字的大小
font-stretch属性用来将字体在水平方向上进行拉伸或压缩,让一种字体的字符更宽或更窄。如果水平压缩,则字体变窄,如果水平拉伸,则字体变宽;
字体依次由窄到宽:ultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expanded、extra-expanded、ultra-expanded;
normal :默认值。不应用拉伸变形;narrower:使用比当前设置的值导致字体宽度更小的值;
wider :使用比当前设置的值导致字体宽度更大的值。
font-weight:设置字体是否加粗,其值:lighter:更细,normal:正常,bold:加粗,bolder:更粗
text-decoration:用于决定文字是否有修饰线:none:无修饰,blink:闪烁,underline:下划线,line-through:中划线,overline:上划线
font-variant:用于设置文字的大写字母的格式
text-transform:用于设置文字的大小,capitalize:首写字母大写,uppercase:全部大写
line-height:用于设置字体的行高
letter-spacing:用于增加(值为正)或减少(值为负)字符间距;字符间隔:字母和字母之间的空白对中文有效
word-spacing:字间隔 :单词和单词之间的间隔 对中文无效
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html charset=utf-8">
	<title>font</title>
</head>
<body>
	<!--该属性用于控制文本颜色-->
	color:#888888:
	<span style="color: #888888">哈哈哈哈</span><br/>
	color:red:
	<span style="color:red">哈哈哈哈</span><br/>
	<!--设置文字的字体-->
	font-family:'楷体_GB2312':
	<span style="font-family:'楷体_GB2312'">哈哈哈哈</span><br/>
	<!--font-size:用于设置文字的大小,后边可以直接为数字的大小-->
	font-size:20pt:
	<span style="font-size:20pt">哈哈哈哈</span><br/>
	font-size:xx-large:
	<span style="font-size:xx-large">哈哈哈哈</span><br/>
	<!--font-stretch属性用来将字体在水平方向上进行拉伸或压缩,让一种字体的字符更宽或更窄。如果水平压缩,则字体变窄,如果水平拉伸,则字体变宽。-->
	<!--字体依次由窄到宽:ultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expanded、extra-expanded、ultra-expanded-->
	<!--normal :默认值。不应用拉伸变形
	narrower:使用比当前设置的值导致字体宽度更小的值
	wider :使用比当前设置的值导致字体宽度更大的值-->
	font-stretch:narrower:
	<span style="font-stretch:narrower">哈哈哈哈</span><br/>
	<!--设置字体是否加粗,其值:lighter:更细,normal:正常,bold:加粗,bolder:更粗-->
	font-weight:bold:
	<span style="font-weight:bold">哈哈哈哈</span><br/>
	font-weight:300:
	<span style="font-weight:300">哈哈哈哈</span><br/>
	<!--用于决定文字是否有修饰线:none:无修饰,blink:闪烁,underline:下划线,line-through:中划线,overline:上划线-->
	text-decoration:blink:
	<span style="text-decoration:blink;">哈哈哈哈</span><br/>
	text-decoration:underline:
	<span style="text-decoration:underline">哈哈哈哈</span><br/>
	text-decoration:line-through:
	<span style="text-decoration:line-through">哈哈哈哈</span><br/>
	<!--用于设置文字的大写字母的格式-->
	font-variant:small-caps:
	<span style="font-variant:small-caps">HAHAHAHAHAhahahahaha</span><br/>
	<!--用于设置文字的大小,capitalize:首写字母大写,uppercase:全部大写-->
	text-transform:uppercase:
	<span style="text-transform:uppercase">hahahahahaHAHAHAHAHA</span><br/>
	text-transform:capitalize:
	<span style="text-transform:capitalize">hahahahahaHAHAHAHAHA</span><br/>
	<!--用于设置字体的行高-->
	line-height:30pt:
	<span style="line-height:30pt">哈哈哈哈</span><br/>
	<!--用于增加(值为正)或减少(值为负)字符间距;字符间隔:字母和字母之间的空白 对中文有效-->
	letter-spacing:5pt:
	<span style="letter-spacing:5pt">哈哈哈哈ABC</span><br/>
	letter-spacing:15pt:
	<span style="letter-spacing:15pt">哈哈哈哈ABC</span><br/>
	<!--字间隔 :单词和单词之间的间隔 对中文无效-->
	word-spacing:20pt:
	<span style="word-spacing:20pt">hello world</span><br/>
	word-spacing:60pt:
	<span style="word-spacing:60pt">hello world</span><br/>
</body>
</html>

CSS基础知识(颜色、文本、阴影)_第1张图片

text-indent:缩进
text-align:center:居中对齐
text-align:right:居右对齐
direction:rtl:文本从右边流入
direction:ltr:文本从左边流入
white-space:nowrap: 强制不换行,知道遇到br标签
text-overflow:clip:当文字溢出时,只是简单的裁切
text-overflow:ellipsis:当文字溢出时,裁切之后显示裁切标记
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html charset=utf-8">
	<title>文本相关属性设置</title>
	<style type="text/css">
		div{
     
			border:1px solid #000000;
			height: 30px;
			width: 200px;
		}
	</style>
</head>
<body>
	<!--缩进20pt-->
	text-indent:20pt:
	<div style="text-indent:20pt">哈哈哈哈</div>
	<!--缩进40pt-->
	text-indent:40pt:
	<div style="text-indent:40pt">哈哈哈哈</div>
	<!--居中对齐-->
	text-align:center:
	<div style="text-align:center">哈哈哈哈</div>
	<!--居右对齐-->
	text-align:right:
	<div style="text-align:right;">哈哈哈哈</div>
	<!--文本从右边流入-->
	direction:rtl:
	<div style="direction:rtl;">哈哈哈哈嘻嘻嘻嘻</div>
	<!--文本从左边流入-->
	direction:ltr:
	<div style="direction:ltr;">哈哈哈哈嘻嘻嘻嘻</div>
	<!--强制不换行,知道遇到br标签-->
	white-space:nowrap:
	<div style="white-space:nowrap;">哈哈哈哈呵呵呵呵嘻嘻嘻嘻哈哈哈哈</div>
	<!--当文字溢出时,只是简单的裁切-->
	text-overflow:clip:
	<div style="overflow: hidden;white-space: nowrap;  text-overflow:clip;">哈哈哈哈呵呵呵呵嘻嘻嘻嘻哈哈哈哈</div>
	<!--当文字溢出时,裁切之后显示裁切标记-->
	text-overflow:ellipsis:
	<div style="overflow: hidden;white-space: nowrap; text-overflow:ellipsis;">哈哈哈哈呵呵呵呵嘻嘻嘻嘻哈哈哈哈</div>
</body>
</html>

CSS基础知识(颜色、文本、阴影)_第2张图片

word-break:keep-all:不允许在单词中换行
word-break:break-all:允许在单词中换行
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html charset=utf-8">
	<title>文本相关属性设置</title>
	<style type="text/css">
		/*为div元素增加边框*/
		div{
     
			border:1px solid #000000;
			height: 50px;
			width: 240px;
		}
	</style>
</head>
<body>
	<!--不允许在单词中换行-->
	word-break:keep-all:
	<div style="word-break:keep-all">
		Hello World Hi World Hello World Hello World 
	</div>
	<!--允许在单词中换行-->
	word-break:break-all:
	<div style="word-break:break-all">
		Hello World Hi World Hello World Hello World 
	</div>
</body>
</html>

CSS基础知识(颜色、文本、阴影)_第3张图片

background-color: rgb(255,0,255)
background-color: rgb(255,0,255,0.5);"
最后一个代表透明度,0-10代表完全透明,1代表完全显示
background-color: hsl(120,80%,50%)
background-color: hsla(120,80%,50%,0.5)
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html charset=utf-8">
	<title>color</title>
	<style type="text/css">
		div>div{
     
			width: 300px;
			height: 40px;
		}
	</style>
</head>
<body>
	<script type="text/javascript">
		for (var i = 0; i <110; i++) {
     
			document.write("hahahaha");
		}
	</script>
	<div style="position: absolute;top: 0px">
		<div style="background-color: gray;">hahahaha
		</div>
		<div style="background-color: #aaa;">hahahaha
		</div>
		<div style="background-color: #ffff00;">hahahaha
		</div>
		<div style="background-color: rgb(255,0,255);">hahahaha
		</div>
		<div style="background-color: hsl(120,80%,50%);">hahahaha
		</div>
		<div style="background-color: rgb(255,0,255,0.5);"><!--最后一个代表透明度,0-10代表完全透明,1代表完全显示-->
		</div>
		<div style="background-color: hsla(120,80%,50%,0.5);">
		</div>
	</div>
</body>
</html>

CSS基础知识(颜色、文本、阴影)_第4张图片

text-shadow:设置文本的阴影
text-shadow: X-Offset Y-Offset blur color;
X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;
Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;
Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;
Color:是指阴影的颜色,其可以使用rgba色。
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html charset=utf-8">
	<title>阴影</title>
	<style type="text/css">
		span{
     
			display: block;
			padding: 8px;
			font-size: xx-large;
		}
	</style>
</head>
<body>
	text-shadow:red 5px 5px 2px:
	<span style="text-shadow:red 5px 5px 2px">哈哈哈哈</span><br/>
	text-shadow:5px 5px 2px(省略阴影颜色):
	<span style="text-shadow:5px 5px 2px">哈哈哈哈</span><br/>
	text-shadow:-5px -5px 2px gray(向左上角投影):
	<span style="text-shadow:-5px -5px 2px gray">哈哈哈哈</span><br/>
	text-shadow:-5px 5px 2px gray(向左下角投影):
	<span style="text-shadow:-5px 5px 2px gray">哈哈哈哈</span><br/>
	text-shadow:5px -5px 2px gray(向右上角投影):
	<span style="text-shadow:5px -5px 2px gray">哈哈哈哈</span><br/>
	text-shadow:5px 5px 2px gray(向右下角投影):
	<span style="text-shadow:5px 5px 2px gray">哈哈哈哈</span><br/>
	text-shadow:15px 15px 2px gray(向右下角投影、更大偏移距):
	<span style="text-shadow:15px 15px 2px gray">哈哈哈哈</span><br/>
	text-shadow:5px 5px 10px gray(向右下角投影,模糊半径增加,模糊程度加深):
	<span style="text-shadow:5px 5px 10px gray">哈哈哈哈</span><br/>
</body>
</html>

CSS基础知识(颜色、文本、阴影)_第5张图片

你可能感兴趣的:(CSS基础知识(颜色、文本、阴影))