css基础属性

最新推荐文章于 2024-01-03 08:00:00 发布
最新推荐文章于 2024-01-03 08:00:00 发布
阅读量259 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52151912/article/details/117352396
版权

css3
  • 2.1 字体相关属性
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>	
	<body>
			<h1>字体属性</h1>
			<p>
				<label>字体体系：</label>
				<span style="font-family: 宋体;">啊啊啊</span>
				<span style="font-family: 楷体;">对的对的</span>
			</p>
			<p>
				<label>字体大小</label>
				<span style="font-size: 12px;">12</span>
				<span style="font-size: 24px;">24</span>
			</p>
			<p>
				<label>字形倾斜：</label>
				<span style="font-style: normal;">正常</span>
				<span style="font-style: italic;">倾斜</span>
			</p>
			<p>
				<label>字母大写：</label>
				<span style="font-variant: normal;">正常hello</span>
				<span style="font-variant: small-caps;">小型大写hello</span>
			</p>
			<p>
				<label>字体粗细：</label>
				<span style="font-weight: normal;">正常(400)</span>
				<span style="font-weight: bold;">粗体(700)</span>
				<span style="font-weight: bolder;">加粗</span>
				<span style="font-weight: lighter;">更细</span>
				<span style="font-weight: 500;">500</span>
			</p>
	</body>
</html>
  • 字体属性

属性 含义 取值
font-family 字体体系 字体名称，
如宋体 font-size 字体大小
font-style 是否倾斜 normal/italic/oblique/inherit
font-variant 是否大写 normal/small-caps/inherit
font-weight 字体粗细 normal（400）/bold（700）/bolder/lighter 100/200/300……900

可以简写，书写顺序
font-style font-variant font-weight font-size font-family
前面三个可缺省，使用默认值，font-size和font-family必须指定值。
这种书写方式更加简洁

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#p1{
				font-family: 宋体;
				font-size: 24px;
				font-weight: bold;
			}
			#p2{
				30px 楷体;
			}
		</style>
	</head>	
	<body>
		<div>
			<h1>字体属性演示</h1>
			<p id="p1">分开书写：font-family: 宋体;font-size: 24px;font-weight: bold;</p>
			<p id="p2">简写形式：30px 楷体;</p>
		</div>
	</body>
</html>
  • 2.2 文本相关属性

文本相关属性主要包括颜色、对齐方式、修饰效果等。

color：设置文本的颜色
text-decoration:
none：默认值，没有装饰效果
underline：加下划线
overline：加上划线
line-through：加删除线
direction：
ltr:自左至右；rtl:自右至左
text-align:文本对齐方式
left 左对齐
right 右对齐
center 居中对齐
text-indent:首行缩进
letter-spacing:字母之间的间距
word-spacing:字（单词）间距
line-height:设置行高，实际上是调整行间距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width: 400px;">
			<h1>文本属性演示</h1>
			<p>
				<label>文本颜色：</label>
				<span style="color: red;">红色</span>
				<span style="color: rgb(0,255,0);">绿色</span>
			</p>
			<p>
				<label>文本修饰：</label>
				<span style="text-decoration: none;">无</span>
				<span style="text-decoration: underline;">下划线</span>
				<span style="text-decoration: overline;">上划线</span>
				<span style="text-decoration: line-through;">删除线</span>
			</p>
			<label>文本方向：</label>
			<div style="direction: ltr;">1 2 3 4 5</div>
			<div style="direction: rtl;">1 2 3 4 5</div>
			<label>文本对齐：</label>
			<div style="text-align: left;">左对齐</div>
			<div style="text-align: right;">右对齐</div>
			<div style="text-align: center;">居中对齐</div>

			<label>大小写：</label>
			<p style="text-transform: none;">不转换：welcome to Beijing</p>
			<p style="text-transform: capitalize;">首字母大写：welcome to Beijing</p>
			<p style="text-transform: uppercase;">全部大写：welcome to Beijing</p>
			<p style="text-transform: lowercase;">全部小写：welcome to Beijing</p>

			<p style="text-indent: 2cm;">首行缩进</p>
			
			<p style="line-height: normal;">
				正常行高<br>
				正常行高<br>
				正常行高
			</p>
			<p style="line-height: 30px;">
				行高30px<br>
				行高30px<br>
				行高30px
			</p>
			<p>
				<label>字符间距：</label>
				<span style="letter-spacing:10px;">welcome</span>
				<span style="letter-spacing:2px;">welcome</span>
			</p>
			<p>
				<label>单词间距：</label>
				<span style="word-spacing:10px;">welcome to</span>
				<span style="word-spacing:2px;">welcome to</span>
			</p>
		</div>
	</body>
</html>
  • 2.3 背景相关属性
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 1px gray solid;
			}
			#div1{
				height: 100px; 
				background-color: skyblue;
			}
			#div2{				
				height: 200px;
				background-image: url(pic2.jpg);
				background-repeat: no-repeat;
				background-position: bottom;
			}			
			#div3{				
				height: 200px;
				background-image: url(pic2.jpg);
				background-repeat: repeat-x;
			}
			#div4{
				height: 300px;
				background: green url(pic2.jpg) repeat-y right;
			}
		</style>
	</head>
	<body>
		<div id="div1">背景色</div>
		<div id="div2">背景图片不重复</div>
		<div id="div3">背景图片横向重复</div>
		<div id="div4">简写方式</div>
	</body>
</html>
  1. background-color:背景色
  2. background-image:设定背景图片，需要设置图片的url地址
  3. background-repeat:图片的复制选项
  4. repeat：在水平和垂直两个方向上进行复制
  5. no-repeat:不复制
  6. repeat-x:在水平方向上复制
  7. repeat-y：在垂直方向上复制

也可以将这一组属性值封装到一个属性background中，书写书序是：

  1. 背景色background-color
  2. 背景图片background-image
  3. 重复方式background-repeat
  4. 位置backgroud-position

表达更加简洁

background: green url("../pic/js.jpg") no-repeat right top;

2.4 尺寸相关属性

  1. height:高度
  2. width:宽度
  3. max-width:最大宽度
  4. max-height：最大高度
  5. min-width：最小宽度
  6. min-height：最小高度
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 2px gray solid;
			}
			#div1{
				width: 200px;
				height: 80px;
			}
			#div3{
				min-height: 80px;
			}
			#div5{
				max-height: 80px;
				overflow: scroll;
			}
		</style>
	</head>
	<body>
		<div id="div1">固定高度和宽度</div>
		<div id="div2">自适应高度，即根据内容确定高度</div>
		<div id="div3">指定最小高度</div>
		<div id="div4">
			<p>自适应高度</p>
			<p>自适应高度</p>
			<p>自适应高度</p>
			<p>自适应高度</p>
			<p>自适应高度</p>
		</div>
		<div id="div5">
			<p>自适应高度</p>
			<p>自适应高度</p>
			<p>自适应高度</p>
			<p>自适应高度</p>
			<p>自适应高度</p>
		</div>
	</body>
</html>
  • 2.5 显示相关属性

隐藏元素的方法：

  1. visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在；

  2. display：none，不仅隐藏内容，且不占位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 2px green solid;
				height: 200px;
			}
			#div1{
				visibility: hidden;
			}
			#div3{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
		<div id="div3">div3</div>
		<div id="div4">div4</div>
	</body>
</html>
  • display可以设置元素的显示模式
  • inline:将块级元素以内联元素形式显示，此时width和height属性无效，其空间取决于元素的内容。
  • inline-block:
    将块级元素以内联元素形式显示,同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置大小。
  • 也可以将内联元素以块级元素形式来显示，即display:block
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p,span{
				border: 2px gray dotted;
			}
			#p2{
				display: inline;
				height: 100px;
				width: 200px;
			}
			#p3{
				display: inline-block;
				height: 100px;
				width: 200px;
			}
			#s2{
				display: block;
			}
		</style>
	</head>
	<body>
		<p id="p1">P标签是块级元素，所以占据一整行</p>
		<p id="p2">块级元素也可以显示为内联元素，宽度和高度设置将无效</p>
		<p id="p3">如果既想显示为内联，又要设置高度和宽度，可用inline-block</p>
		<p id="p4">第四段</p>
		<span id="s1">第一句</span>
		<span id="s2">第二句</span>
		<span id="s3">第三句</span>
		<span id="s4">第四句</span>
	</body>
</html>
  • 2.6 盒子模型

margin：外边距 margin-top、margin-right、margin-bottom、margin-left

使用方式
（1）margin:30px;表示上下左右外边距都未30px；
（2）margin-left：30px；单独设置上下左右外边距
（3）margin：10px 20px 30px 40px；分别设置上右下左四个边距为10px 20px 30px 40px

padding:内边距
也有上下左右边距，和margin类似，不再赘述。

border:边框
border-width: 边框宽度;
border-style: 边框线条类型;
border-color: 边框的颜色;
也可以使用更优化的书写方式
border:10px dashed blue;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 1px gray dotted;
			}
			#div1{
				width: 400px;
			}
			#div2{
				border: 20px green solid;
				margin: 50px;
				padding: 30px;
			}
			#div3{
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3">
					
				</div>
			</div>
		</div>
	</body>
</html>

outline：轮廓线，用法同border
css基础-属性值计算过程
tscn1的博客
02-26 2131
目录css属性属性的计算过程两个特殊的css属性 css属性 首先css的属性值，是从0到1的过程，浏览器会等一个标签的css属性值全部确认后，才能渲染出来。 属性的计算过程 属性的计算过程有4步。 确定声明值。参考样式表中（作者样式表和浏览器默认的样式表）没有冲突的声明，作为css的属性值。 层叠冲突。对样式表中有冲突的声明使用层叠规则，确定css属性值 层叠规则：1.重要性。2.特殊性。3.源次序 使用继承。对仍然没有值的属性，若可以继承，则继承父元素的属性值 使用默认值。对仍然没有值的属性，使
CSS基础之CSS字体属性
m0_67402096的博客
03-08 1775
文章目录 前言 1.font-family 2.font-size 3.font-size 4.font-style 5.字体属性复合写法 6.字体属性总结 前言 CSS 字体属性用于定义字体系列、大小、粗细和文字样式(如斜体) 1.font-family CSS 使用 font-family属性设置文本的字体系列 <style> div { font-family: Arial, "Microsoft Yahe", "微软雅黑";
CSS基础属性及盒子模型
weixin_56709347的博客
05-04 316
CSS基础属性 字体相关属性 <body> <h1>字体属性演示</h1> <p> <label>字体体系</label> <span style="font-family: 宋体;">宋体</span> <span style="font-family: 楷体;">楷体</span> </p> <p> <label&g
【CSS】font-family的相关字体设置
smart_dream
03-19 2万+
大家都知道，在不同操作系统、不同游览器里面默认显示的字体是不一样的，并且相同字体在不同操作系统里面渲染的效果也不尽相同，那么如何设置字体显示效果会比较好呢？下面我们逐步的分析一下： 一、字体基础知识 css 中的font-family font-family 关键字 对于 CSS 中的font-family而言，它有两类取值。 一类是类似这样的具体的字体族名定义：font-family: Arial这里定义了一个具体的字体样式，字体族名为Arial; 一类是通用字体族名，它...
css 加粗_CSS 字体样式
weixin_39875419的博客
11-28 493
本节我们来讲字体样式，之前我们学习 HTML 的时候学过一些用于字体加粗、倾斜的标签，但是使用标签来实现的效果肯定没有我们通过 CSS 中的样式来的方便。接下来我们会给大家介绍下面这几个属性的使用：通过学习上述这几个 CSS 属性，我们可以实现给 HTML 中的文字设置字体、大小、风格、倾斜、加粗等。font-familyfont-family 属性用于设置一个元素的字体，字体就是像宋体、楷体等。...
最详细的CSS字体样式总结包含自定义文字样式（font-family、font-size、font-weight、font-style等）
weixin_56242678的博客
05-04 5142
本文介绍了前端CSS字体样式的常见用法，希望对各位有所帮助。
电商项目面试题
热门推荐
Java面试辅导-海龟老师
10-19 14万+
1.freemarker生成的静态化页面，如果商品的信息更改以后，会不会生成新的静态化化页面，freemarker静态化页面的数据是从哪里调用出来的，如果不是从数据里面掉的数据的，这个地方需要用到同步，和谁同步 答案: 1.如果商品信息更改以后，是需要生成新的静态化页面。（注意：淘淘商城中没有修改商品然后生成新的静态化页面的逻辑，实际中是需要这一部分逻辑的）;  2.
总结CSS基础属性（一）
07-30
CSS基础属性总结 CSS（层叠样式表）是一种用于描述页面样式的语言，它使得 HTML 结构与样式分离，提高网站的开发效率和维护性。下面是 CSS 基础属性的总结。 一、CSS 的定义和作用 CSS 全称为层叠样式表，它是一...
小程序中使用css var变量(使js可以动态设置css样式属性)
11-20
使用sass,stylus可以很方便的使用变量来做样式设计，其实css也同样可以定义变量，在小程序中由于原生不支持动态css语法，so，可以使用css变量来使用开发工作变简单。 基本用法 基础用法 <!--web开发中顶层变量的...
css基础教程之CSS基础语法
09-25
CSS（层叠样式表）是用于控制网页元素外观的关键技术。在本教程中，我们将深入探讨CSS的基础语法，包括如何应用样式以及选择器的使用。...为了创建美观且易于管理的网页，掌握CSS基础语法至关重要。
html 调整span中字体,html – 如何强制span在CSS中使用父字体系列
weixin_29536515的博客
06-17 520
您可以使用.parent *选择所有子元素,然后将font-family设置为继承.这将有效地覆盖子元素字体并强制所有子元素继承最接近的父元素字体的值..parent {font-family: tahoma;}.child {font-family: cursive,geneva;}.parent * {font-family: inherit;}Text如果你只想定位.child元素,你显然会...
CSS选择器
崔博伦 一路有你
06-22 611
CSS有很多选择器其中主要的选择器有三种：标签选择器，ID选择器，类选择器。其他的选择器还有：组合选择器，标签+类选择器，层次选择器。下面就一一介绍一下这些选择器的使用。 标签选择器 主要是对一些标签应用CSS样式。 世界那么大 我想去看看 对上面p标签应用CSS样式 p { border:1px solid
CSS文本样式
最新发布
Gao_xu_sheng的博客
01-03 1297
属性表示注意点font-size字号我们通常用的单位是px 像素，一定要跟上单位字体实际工作中按照团队约定来写字体字体粗细记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位font-style字体样式记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal属性表示注意点color颜色我们通常用 十六进制 比如 而且是简写形式 #fff行高控制行与行之间的距离text-align水平对齐。
网页CSS样式属性：font字体常识
zyxNobita专栏
04-28 1159
网页样式常用的Font属性，常见的字体设计样式
前端~CSS~属性（font-family/font-weight/font-style/text-align/text-decoration/text-indent...）
zxc的博客
03-06 1723
文章目录元素属性文本属性 前言 CSS 最核心的就是,对属性的使用，有哪些属性，如何使用,以及每个属性都有哪些值~ 这里不会全介绍，只会介绍一些最常用的属性，CSS属性有很多，这里附上参考文档，可以在使用中学习。 CSS参文档 元素属性 字体类型 font-family可以用来设置字体的类型（宋体，隶书，微软雅黑） <style> body{ font-family:'微软雅黑'; } </style> 此处将body标签中的字体样式设置成了微软雅黑。但b
解决火狐与IE空格宽度不一致的方法：style="font-family: '宋体', Simsun;"
kacoro的专栏
08-16 1049
仅需此句 style="font-family: '宋体', Simsun;"
CSS+DIV-设置文字效果
weixin_34372728的博客
08-02 470
3-1.html<html><head><title>文字字体</title><style><!--h2{font-family:黑体, 幼圆;}p{font-family:Arial, Helvetica, sans-serif;}p.kaiti{font-family:楷体_GB2312, ...
font-family字体中英文对照
trigger的博客
08-15 2184
微软雅黑： Microsoft YaHei 宋体：SimSun 黑体：SimHei 仿宋： FangSong 楷体：  KaiTi 隶书：LiSu 幼圆：YouYuan 华文细黑：STXihei 华文楷体：STKaiti 华文宋体：STSong 华文中宋：STZhongsong 华文仿宋：STFangsong 方正舒体：FZShuTi 方正姚体：FZYaoti 华文彩云...
行级元素的高不是内容撑开的，与其font-size与font-family有关
weixin_44350171的博客
12-14 1714
可能大家初学前端时，都要记住行级元素的性质： 1.行级元素不能设置宽高； 2.其宽高由内容撑开。 但实际上： 行级元素宽度由内容撑开，但高度hieght只与其font-size与font-family有关 测试 1.写一个<span>标签，样式只添加一个红色背景与字体大小，background: red;font-size=20px 运行结果：空白页面 此时，谷歌浏览器点击F2弹出控制台，鼠标放在右边代码的<span>标签上，页面上显示其宽高为0×0；（这种方式显示的是可视区域的宽高
CSS基础属性详解：字体、颜色、文本到单位全面解析
本文档详尽介绍了CSS（层叠样式表）中的基础属性，这些属性对于网页设计至关重要，有助于控制网页的布局、字体、颜色、文本呈现以及元素的尺寸和定位。以下是关键知识点的详细阐述： 1. **字体属性** - **font-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值