web前端学习5-css样式

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

修罗_

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

阅读量102

点赞数

分类专栏： web前端新手必看16篇文章标签： html css

本文链接：https://blog.csdn.net/weixin_45843676/article/details/106713533

版权

web前端新手必看16篇专栏收录该内容

16 篇文章 1 订阅

订阅专栏

学习5-文字css样式和背景
下面三个案列我已经详细介绍了css文字样式和背景

		<meta charset="utf-8">
		<title>css文本样式</title>
		<style type="text/css">
			.class1{
				background-attachment: fixed;/* 背景是否随着滚轮滚动,fixed为否 */
				background-repeat: repeat;/* 背景图片重复填充 */
				background-image: url(image/jiansheng.jpg);
				background-size: 500px 300px;/* 设置后整个页面会重复渲染图片并且每个图片只有30*40大小 */
			}
			.class2{
				width: 100px;
				height: 100px;
				border: 4px solid black;/* 框线粗,框线样式,框线颜色 */
				border-radius: 20px/15px;/* 边框圆角，达到100时为圆形，第一个值是上下，第二左右 */
				background-color: #FFE4C4;/* 背景颜色 */
				text-align: center;/* 水平对齐 */
				direction: right;/* 跟text-align类似,对中文效果差,很少用 */
				letter-spacing: 10px;/* 字间距 */
				text-indent: 50px;/* 首行缩进50px-第一行开头第一个字会有空白区域 */
			}
			.class3{
				border: 3px solid #FF0000;
				word-spacing: 20px;/* 英文单词间距实际是把英文句子中的空格增大比例 */
				background-color: aliceblue;/* 背景色 */
			    line-height: 100px;/* 行高，以文字为准 */
				/* text-decoration-line: underline; 下划线*/
				/* text-decoration: underline;也是下划线 */
				/* text-decoration-line: line-through;删除线 */
				text-transform: uppercase;/* 所以英文字母变大写，lowercase相反，capitalize首字母大写， */
				
			}
		</style>
	</head>
	<body class="class1">
		<p class="class2">css设置文本样式</p>
		<p class="class3">word password User computer 你好</p>
		
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建边框和背景</title>
		<style type="text/css">
			.friut{
				/* 细节设置 */
				border-width: 2px;/* 边框线粗 */
				border-color: red;/* 边框颜色 */
				border-style: double;/* 边框线样式 */
				border-top-color: #00FFFF;/* 上面边框线颜色 */
				border-bottom-color: bisque;/* 下面边框线颜色 */
			}
			.vegetable{
				/* 粗劣设置 */
				border: 5px double blue;/* 总体设置-框线粗,边框线样式,边框线颜色 */
			}
			.meat{
				background-image: url(image/u=1340842496,1488220004&fm=26&gp=0.jpg);/* 文字背景 */
				height:500px;
				width: 500px;
				color: #00FFFF;
				text-align: center;
				text-decoration: underline;/* 下划线 */
				background-repeat: no-repeat;/* 重复方式-如果设置高度或者宽度大于图片尺寸，就会重复图片填充 */
				background-size: cover;/* 填充方式-cover布满 */
				background-attachment: fixed;/* 图片背景固定不会随其他控件滚动，仅文字和其边框会滚动 */
			}
			
		</style>
	</head>
	<body>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		
		<p class="friut">水果</p>
		<p class="vegetable">蔬菜</p>
		<p class="meat">肉类</p>
		<p class="drink">饮品</p>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css文本样式2-font</title>
		<style type="text/css">
			.p1{
				font-family: "comic sans ms";/* 字体 */
				font-size: larger;/* 文字大小 */
				font-style: oblique;/* 将字体强行倾斜 */
				
			}
			.p2{
				font-style: italic;/* 斜体和oblique不一样 */
				font-variant: small-caps;/* 把段落设置为小型大写字母字体 */
				text-transform: uppercase;/* 属性控制文本的大小写 */
			}
			.p3{
				font-weight: 900;/* 字体粗细值100-900数值是为整百，也可以设置固定属性 */
				text-shadow: 0px 5px 10px red;/* 向文本添加一个或多个阴影四个值分别是-水平距离、垂直距离、模糊值、颜色 */
			}
		</style>
	</head>
	<body>
		<p class="p1">sdf样式1 </p>
		<p class="p2" >sdf样式2</p>
		<p class="p3">abc样式3</p>
	</body>
</html>

内容仅供参考

修罗_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端学习5-css样式

学习5-文字css样式和背景下面三个案列我已经详细介绍了css文字样式和背景 <meta charset="utf-8"> <title>css文本样式</title> <style type="text/css"> .class1{ background-attachment: fixed;/* 背景是否随着滚轮滚动,fixed为否 */ background-repeat: repeat;/* 背景图片重复填充 */
复制链接

扫一扫