Web基本教程~05.CSS属性

时间:2021-1-8 作者:admin

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 属性设置列表项标记的类型

Web基本教程~05.CSS属性

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 属性增加或减少字符间的空白(字符间距)

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。