Web全栈~05.CSS属性

ゝ一世哀愁。 2023-01-02 12:30 67阅读 0赞

# Web基本笔记~05.CSS属性 #

## [上一期][Link 1] ##

背景属性在上一期

## 字体属性 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]

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

[Link 1]: https://blog.csdn.net/qq_41424688/article/details/112254320
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]: /images/20221119/417bd989cdf6401f9d9ee139e41809fc.png