Web基本教程~05.CSS属性
Web基本教程~05.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 属性增加或减少字符间的空白（字符间距）
本文地址：https://blog.csdn.net/qq_41424688/article/details/112255212
推荐阅读
-
iOS App开发中导航栏的创建及基本属性设置教程
-
【Web API系列教程】2.3 — ASP.NET Web API 2中的属性路由
-
区块链入门教程之从比特币到以太访再到智能合约从架构概念到应用实战(DAPP)（四、以太访、web3、智能合约三者之间的关系及智能合约基本讲解）
-
Android动画系列之属性动画的基本使用教程
-
Web基本教程~02.表单样式设计
-
Web基本教程~05.CSS属性
-
w3schools网站的HTML教程之HTML属性_html/css_WEB-ITnose
-
CSS基础教程之常用属性_html/css_WEB-ITnose
-
DOM之节点的基本属性_html/css_WEB-ITnose
-
DOM之节点的基本属性_html/css_WEB-ITnose