Web网页制作-知识点（3）——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一：https://developer.aliyun.com/article/1530973
字体属性
color
规定文本的颜色
<style> div{ color:rgba(255,0,0,.5); <!-- .5修改字体的透明度--> } </style>
font-size
设置文本的大小
chrome浏览器接受的最小字体大小是12px。
font-weight
设置文本的粗细
bold：粗体
bolder：更粗
lighter：更细
100-900：任意定义，400等同于默认，700等同于bold。
font-style
指定文本的字体样式
| 值 | 描述 |
| normal | 默认值 |
| italic | 定义斜体字 |
font-family
font-family属性指定一个元素的字体
每个值用逗号分开。
如果字体名称包含空格，则必须加上引号。
font-family:"Microsoft YaHei","Simsun","SiHei";
背景属性
CSS背景属性 主要有以下几个： 
background-color
该属性设置背景颜色
<head> <style> .box{ width:300px; height:300px; background-color:palevioletred; } </style> </head> <body> <div class="box"></div> </body>
background-image
设置元素的背景图像。
元素的背景时元素的总大小，包括填充和边界（不包括外边距）。 默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小，从图像的左上角开始显示元素大小的那部分。
background-repeat
该属性设置如何平铺背景图像
| 值 | 说明 |
| repeat | 默认值 |
| repeat-x | 只向水平方向平铺 |
| repeat-y | 只向垂直方向平铺 |
| no-repeat | 不平铺 |
background-size
该属性设置背景图像的大小
文本属性
text-align
指定元素文本的水平对齐方式
| 值 | 描述 |
| left | 文本居左排列，默认值 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
text-decoration
text-decoration属性规定添加到文本的修饰，下划线、上划线、删除线等。
| 值 | 描述 |
| underline | 定义下划线 |
| overline | 定义上划线 |
| line-through | 定义删除线 |
text-transform
text-transform属性控制文本的大小写
| 值 | 描述 |
| captialize | 定义每个单词开头大写 |
| uppercase | 定义全部大写字母 |
| lowercase | 定义全部小写字母 |
text-indent
text-indent属性规定文本块中首行文本的缩进。
p{ text-indent:2em; <!-- 首行缩进2个字节--> } <!-- 或者用px（像素）来定义--> p{ text-indent:50px; }
注意：负值时允许的。如果是负数，将第一行左缩进。
表格属性
表格边框
指定CSS表格边框，使用border属性。
<style> table,td{ border:1px solid black; } </style>
折叠边框
border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开。
表格宽度和高度
width和height属性定义表格的宽度和高度。
表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心。
<style> td{ text-align:center; } </style>
垂直对齐属性设置垂直对齐
<style> td{ height：50px; vertical-align:bottom; } </style>
表格填充
如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性
<style> td{ padding:15px; } </style>
表格颜色
<style> table,td,th{ border:1px solid green; } td{ background-color:green; color:white; } </style>
关系选择器
关系选择器分类：
1.后代选择器
2.子代选择器
3.相邻兄弟选择器
4.通用兄弟选择器
后代选择器
定义
选择所有被E元素包含的F元素，中间用空格隔开。
语法
<head> <style> ul li{ color:green; } </style> </head> <body> <ul> <li>后代选择器</li> <li>子代选择器</li> </ul> <ol> <li>没有绿色文本的效果</li> </ol> </body>
子代选择器
定义
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示。
语法
<head> <style> div>a{ color:red; } </style> </head> <body> <div> <a href="">子元素1</a> <p><a href="">孙元素</a></p> <a href="">子元素2</a> </div> </body>
相邻兄弟选择器
定义
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素。（使用率不高）
语法
<head> <style> h1+p{ color: red; text-align: center; } </style> </head> <body> <h1>标题一</h1> <p>这是一个段落。</p> </body>
通用兄弟选择器
定义
选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开。
语法
<head> <style> h1~p{ color: red; text-align: center; } </style> </head> <body> <h1>标题一</h1> <p>这是第一个段落。</p> <p>这是第二个段落。</p> </body>
end
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)