web.前端样式CSS属性学习

飞一样的编程

擅长邻域：Java,MySQL,Linux,nginx,springboot,mongodb,微信小程序,vue

2021-01-09 22:06:35 1545浏览

今天给大家分享一个小教程吧——web前端样式表css的属性介绍

今天给大家分享一个小教程吧——web前端样式表css的属性介绍

字体属性
CSS 字体属性定义字体，加粗，大小，文字样式

color 规定文本得颜色

<html>
　　<head>
　　　　 <title></title>
　　　　 <meta charset="utf-8" />
		<style>
			div{ color:red;}
		</style>
　	</head>
　　<body>
		<div>
			hello
		</div>
　　</body>
</html>

font-size 设置文本得大小

<html>
　　<head>
　　　　 <title></title>
　　　　 <meta charset="utf-8" />
		<style>
			p {font-size:66px;}
		</style>
　	</head>
　　<body>
		<p>
			hello
		</p>
　　</body>
</html>

font-weight 设置文本得粗细

<html>
　　<head>
　　　　 <title></title>
　　　　 <meta charset="utf-8" />
		<style>
			div {
					font-weight:666;
				}
		</style>
　	</head>
　　<body>
		<div>
			normal 默认值,定义标准得字符<br/>
			bold  定义粗体字符<br/>
			bolder 定义更粗得字符<br/>
			lighter 定义更细得字符
		</div>
　　</body>
</html>

font-style 指定文本得字体样式

<html>
　　<head>
　　　　 <title></title>
　　　　 <meta charset="utf-8" />
		<style>
			div {
					font-style: italic;
				}
		</style>
　	</head>
　　<body>
		<div>
			normal 默认值,定义标准得字体样式<br/>
			italic 斜体字体样式
		</div>
　　</body>
</html>

font-family 属性指定一个元素得字体
font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。

文本属性
text-align
指定元素文本得水平对齐方式

left : 把文本排列在左边

right : 把文本排列在右边

center : 把文本排列在中间

text-decoration
text-decoration 属性规定添加到文本得修饰，下划线、上划线、删除线等。

none : 默认,定义标准得文本

underline : 定义文本下得一条线

overline : 定义文本上得一条线

line-through : 定义穿过文本下得一条线

text-transform
none : 默认,定义标准得文本

capitalize : 文本中得每个单词以大写字母开头

uppercase : 仅有大写字母

lowercase : 仅有小写字母

text-indent
text-indent 属性规定文本块中首行文本得缩进

p{ 
	text-indent:50px; 
}

列表属性
list-style-type
list-style-type 属性设置列表项标记得类型

在这里插入图片描述

ul.a {
	list-style-type: circle;
	}

list-style-image
list-style-image 属性使用图像来替换列表项得标记。

ul {
	 list-style-image: url('sqpurple.gif'); 
   }

list-style-position
list-style-position 属性指示如何相对于对象得内容绘制列表项标记。inside在里,outside在外

ul {
	 list-style-position: inside; 
   }

list-style 简写属性在一个声明中设置所有得列表属性
可以设置得属性（按顺序）： list-style-type, list-style-position, list-style-image. 可以不设置其中得某个值，比如 "list-style:circle inside;" 也是允许得。未设置得属性会使用其默认值。

ul {
	 list-style: none;
   }

表格属性
表格边框
指定 CSS 表格边框，使用 border 属性。

<html>
　　<head>
　　　　 <title></title>
　　　　 <meta charset="utf-8" />
		<style>
			table, th,tr,td {
							border: 1px solid black; 
						}
		</style>
　	</head>
　　<body>
		<table>
			<th>
				<td>姓名</td>
				<td>年龄</td>
			</th>
			<tr>
				<td>alvin</td>
				<td>19</td>
			</tr>
		</table>
　　</body>
</html>

表格宽度和高度
Width 和 height 属性定义表格得宽度和高度。下面得例子是设置 100％得宽度，50 像素得 th 元素得高度得表格。

table { width:100%; } 
th { height:50px; }

表格文字对齐
表格中得文本对齐和垂直对齐属性。 text-align 属性设置水平对齐方式，向左，右，或中心。

td { text-align:right; }

垂直对齐属性设置垂直对齐，比如顶部，底部或中间

td { height:50px; vertical-align:bottom; }

表格填充
如果在表得内容中控制空格之间得边框，应使用 td 和 th 元素得填充属性

td { padding:15px; }

表格颜色
下面得例子指定边框得颜色，和 th 元素得文本和背景颜色

table, td, th { border:1px solid green; } th { background-color:green; color:white; }

tableLayout 属性
tableLayout 属性用来显示表格单元格、行、列得算法规则。

固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格得内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

在自动表格布局中，列得宽度是由列单元格中没有折行得最宽得内容设定得。此算法有时会较慢，这是由于它需要在确定最终得布局之前访问表格中所有得内容

automatic 默认，列宽度由单元格内容设定。

fixed 列宽，由表格宽度

inherit 规定应该从父元素继承 table-layout属性得值

border-spacing 属性
border-spacing 属性设置相邻单元格得边框间得距离（仅用于"边框分离"模式）。如果定义一个 length 参数，那么定义得是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

其他属性
letter-spacing
letter-spacing 属性增加或减少字符间得空白（字符间距）

行，今天就给大家分享到这里吧，您的一份支持就是我最大的动力，最后打个小广告，我们程序员在学习和工作中或多或少会遇到一些比较棘手的问题，也就所谓的一时半会解决不了的bug,可以来杰凡IT问答平台上提问，平台上大佬很多可以快速给你一对一解决问题，有需要的朋友可以去关注下，平台网址： https://www.jf3q.com

好博客就要一起分享哦！分享海报

此处可发布评论

评论（0）展开评论

暂无评论，快来写一下吧

展开评论

您可能感兴趣的博客