WEB代码：CSS字体样式、文本属性、背景样式、边框属性、鼠标样式、列表样式

最新推荐文章于 2023-05-18 23:08:45 发布
原创 最新推荐文章于 2023-05-18 23:08:45 发布 · 2.2k 阅读 · 46 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#WEB

该博客围绕WEB页面样式展开，详细介绍了字体样式、文本属性、背景样式、边框属性、鼠标样式和列表样式等内容。涵盖了如font-family、letter-spacing、background-color等具体属性及相关取值，还提及了样式缩写和应用场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、字体样式:

1.字体样式
font-family

2.字体大小
font-size

3.字体类型
font-style

4.字体粗细
font-weight

span{
			font-family: 微软雅黑;
			font-size:30px;
			font-weight:bold;
			font-style:italic;
		}

1、文本属性:

1.字间距
letter-spacing

2.词间距
word-spacing

3.下划线
text-decoration

4.文本对齐
text-align

5.文本缩进
text-indent

6.文本高度
line-height

7.文本颜色
color

8.文本自动换行
word-break

span{
			font-family: 微软雅黑;
			/*letter-spacing: 50px;*/
			/*word-spacing: 50px;*/
			/*text-decoration: underline;*/
			/*text-decoration: overline;*/
			/*text-decoration: line-through;*/
		}

下划线


span{
			font-family: 微软雅黑;
			
			text-decoration:none;
		}
		span:hover{
			text-decoration: underline;
		}

对齐

p{
			/*text-align: left;*/
			/*text-align: right;*/
			text-align: center;
		}

首行缩进

p{
			text-indent: 50px;
		}

文本高度-居中

background: #888;
			height:100px;
			text-align:center;
			color:#fff;
			line-height:100px;

文本自动换行

<style>
		p{
			background: #888;
			height:200px;
			color:#fff;
			word-break: break-all;
		}
		
	</style>
</head>
<body>
	<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

3、背景样式:

1.背景颜色
background-color

2.背景图片
background-image

3.背景重复
background-repeat

4.背景滚动
background-attachment

5.背景定位
background-position

6.背景样式缩写
background:#888 url(‘bg.png’) no-repeat fixed;

div{
			height: 300px;
			background-color: #888;
			
			background-image: url('/img/bg.png');
			background-repeat: no-repeat;
			background-attachment: fixed;
			/*background-position: 100px 50px;*/
			/*background-position:center center；*/
			/*background-position:right bottom ；*/
			background-position:50% 50%;


		}

背景图的高级应用
在这里插入图片描述

	<style>
		*{
			font-family: 微软雅黑;
		}

		div{
			width:48px;
			height:48px;
			background: #888;
			margin-bottom:5px;
		}

		.div1{
			background-image: url('/img/bd.png');
		}	

		.div2{
			background-image: url('/img/bd.png');
			background-position:0px -50px;
		}	

		.div3{
			background-image: url('/img/bd.png');
			background-position:0px -152px;
		}	

		.div4{
			background-image: url('/img/bd.png');
			background-position:0px -203px;
		}	

		.div5{
			background-image: url('/img/bd.png');
			background-position:0px -255px;
		}	
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
	<div class="div4"></div>
	<div class="div5"></div>
</body>

background缩写样式

div{
			
			height:480px;
			background: #888 url('/img/bg.png') no-repeat fixed;
			
		}

4、边框属性:

1.边框样式
border-style
border-left-style

2.边框宽度
border-width
border-left-width

3.边框颜色
border-color
border-left-color

4.边框缩写
border:2px dotted #f00;

边框样式

		div{
			
			height:300px;
			width: 300px;
			border-style: solid;
			border-width: 5px;
			border-color: #f00;
		}

			
	</style>
</head>
<body>
	<div >
		<img src="/img/bg.png">
	</div>

	div{
			
			height:300px;
			width: 300px;
			border-right-style: solid;
			border-left-style: solid;
			border-top-style: solid;
			border-bottom-style: solid;
			border-right-width: 5px;
			border-top-width: 15px;
			border-left-width: 25px;
			border-bottom-width: 35px;
			border-left-color: #f00;
			border-top-color: #ff0;
			border-right-color: #0ff;
			border-bottom-color: #000;
		}

border-style样式


		div{
			
			height:300px;
			width: 300px;
			/*border-style:solid;实线*/
			/*border-style:dotted;点状边框。在大多数浏览器中呈现为实线*/
			/*border-style:dashed;虚线。在大多数浏览器中呈现为实线*/
			/*border-style:double;双线。双线的宽度等于 border-width 的值*/
			/*border-style:groove;3D 凹槽边框。其效果取决于 border-color 的值*/
			/*border-style:ridge;3D 垄状边框。其效果取决于 border-color 的值*/
			/*border-style:inset;3D inset 边框。其效果取决于 border-color 的值*/
			border-style:outset;/*3D outset 边框。其效果取决于 border-color 的值*/
			border-width:10px;
			border-color:#f00;

		}

			
	</style>
</head>
<body>
	<div >
		<img src="/img/bg.png">
	</div>

边框缩写

	div{
			
			height:300px;
			width: 300px;
		
			border: 10px dotted #f00;
		}

5、鼠标样式:

1.十字
crosshair

2.小手
pointer

3.文本
text

4.等待
wait

5.默认
default

6.帮助
help

小手
pointer

<style>
		*{
			font-family: 微软雅黑;
		}

	
		div{
			width:300px;
			height:300px;
			border:2px solid #00f;
			cursor:pointer;
		}

		div:hover{
			background: #ccc;
		}
	</style>
</head>
<body>
	<div>
		<img src="/img/aa.png" id='img-id'>
	</div>
</body>
<script>
imgobj=document.getElementById('img-id');
imgobj.onclick=function(){
	this.src='/img/b.png';
}

</script>

十字
crosshair

div{
			width:300px;
			height:300px;
			border:2px solid #00f;
			cursor:crosshair;
		}

帮助
help

cursor:help;

文本
text

cursor:text;

等待
wait

cursor:wait;

默认
default

cursor:default;

6、列表样式:

list-style:disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha

列表样式制作导航菜单

<style>
		*{
			font-family: 微软雅黑;
		}

	body{
			margin:0px;
		}

		div{
			background: #272822;
			height:50px;
		}

		ul{
			list-style:none;
			padding:0px;
			margin:0px;
		}

		li{
			float:left;
			line-height:50px;
			margin-left:15px;
			margin-right:15px;
			width:100px;
			text-align:center;
		}

		li:hover{
			background: rgba(200,200,200,0.3);
			border-radius:10px;
		}

		a{
			text-decoration:none;
			color:#fff;
			font-weight:bold;
		}

		a:hover{
			text-decoration:underline;
		}
	
	</style>
</head>
<body>
	<div>
		<ul>
			<li><a href="">培训课程</a></li>
			<li><a href="">直播课程</a></li>
			<li><a href="">师资团队</a></li>
			<li><a href="">就业明星</a></li>
			<li><a href="">作品展示</a></li>
			<li><a href="">视频下载</a></li>
		</ul>
	</div>

</body>


	ul{
			/*list-style:disc;标记是实心圆*/
			/*list-style:circle;空心圆*/
			/*list-style:square;实心方块*/
			/*list-style:decimal;数字*/
			/*list-style:lower-roman;小写罗马数字*/
			/*list-style:upper-roman;大写罗马数字*/
			/*list-style:lower-alpha;小写英文字母*/
			list-style:upper-alpha;/*大写英文字母*/
		}

1、
Web技术学习：CSS属性结构化记忆梳理
hebhljdx的博客
09-27 1406
CSS属性是一系列规则，用于描述HTML元素在网页上的外观表现。这些属性可以控制文本的颜色、大小、字体、背景颜色等，也可以控制元素的位置布局，甚至动画效果。文本与字体颜色与背景边框与填充布局与定位过渡与动画用户交互与元素属性属性数量多，分类特征不明显。设计上不够完美，存在明显的兼容和历史发展的痕迹。很多特性已经淘汰或者很少使用。初学者难以分辨。属性特性存在冗余和相互影响，提高了调试和理解的难度。属性在实际应用时难以抉择，存在多种方案，初学者很难找到最佳实践。
网页制作 默认Web字体样式
12-10
通常用户看到的页面的样式会受到三层控制，第一层是浏览器的默认样式，第二层是网页定义样式，第三层是用户自定义样式。和CSS一样，后面的优先级高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能，但是极少数会有用户去自定义，一般用也是高级用户。而浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。 拿字体来说，各个浏览器
html5字体代码列表,html5——web字体(示例代码)
weixin_39630498的博客
06-18 1615
基本介绍1、自定义网页特殊字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。2、支持程度比较好，甚至IE低版本浏览器也能支持。字体格式1、.eot格式：IE专用字体，支持浏览器IE4+2、.ttf格式：Windows和Mac的最常见的字体，是一种RAW格式，支持浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、i...
Web开发——文字样式
TSUKI_Yu的博客
10-23 3271
CSS基础-文字样式
WEB前端代码：边框阴影、边框图片、背景样式、文本样式、字体样式
weixin_43731793的博客
07-16 3760
1、边框阴影 box-shadow:5px 10px 20px #000; 1)5px 相对于原div的左上角的x偏移 2)10px 相对于原div的左上角的y偏移 3)20px 在偏移的基础上进行模糊处理 4)#000 阴影div的颜色 .div1{ margin:100px; width:256px; height:256px; background: #888; ...
web字体
娓娓道来
07-29 1032
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @font-face { font-family: 'shuang...
CSS属性全览：从字体到边框，一文掌握
"此资源提供了一份详尽的CSS属性查询表，涵盖了字体、颜色和背景、文本、边距、填充距、边框、分级以及鼠标等各个方面的属性和用法，旨在帮助开发者理解和应用CSS来控制HTML元素的样式。" 在Web开发中，CSS（层叠...
提升设计感：5款CSS列表样式实战与源码
本文档提供了一篇关于5种简单实用CSS列表样式的教学指南，适合各类Web开发者参考和学习。文章以实例为导向，介绍如何创建美观且易于管理的列表布局。以下是具体内容概述： 1. 带有动画效果的垂直列表： 首个展示的...
CSS样式所有属性.pdf
11-19
- `font-family`：定义文本的字体系列，可以是系统字体、Web字体或多种字体的备选列表。 - `font-size`：设置文本的字体尺寸，可以是绝对值、相对值或百分比。 - `font-size-adjust`：在支持的浏览器中，此属性...
HTML常用字体代码.html
10-24
HTML常用字体代码HTML常用字体代码HTML常用字体代码HTML常用字体代码
Web文字特效
12-06
文字特效 javascript html css 实现的文字特效 供大家学习使用
HTML文本代码
01-12
仅用HTML文本编程的树形下拉菜单（单机显示，双击隐藏）。
自定义web字体并通过@font-face在网页中嵌入自定义字体
01-04
自定义web字体，通过@font-face在网页中嵌入自定义字体
web之字体样式篇
人生苦短，我用python
09-26 7936
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
CSS3web字体
JunGuanDreams的博客
05-18 108
【代码】CSS3web字体。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值