css--笔记11

1.表格的简介

在网页中通过table标签来创建一个表格

1）在table中使用tr表示表格中的一行，有几个tr就有几行

2）在tr中使用td表示一个单元格，有几个td就有几个单元格

3)  colspan横向合并单元格

<td colspan="2">c4</td>

4）rowspan纵向合并单元格

<td rowspan="2">c4</td>

2.长表格

可以将一个表格分成三个部分：

头部：thead

主题：tbody

底部：tfoot

th  表示头部的单元格：有加粗居中的效果

3.表格的样式

1）border-spacing ：指定边框之间的距离

2）border-collapse：设置边框的合并

3）如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中，tr不是tbody的子元素

<style>
    table{
    width:50%;
    border:1px solid black;
margin:0 auto;
border-collapse: collapse;
}
td{
    border:1px solid black;
}
tbody>tr:nth-child(odd){
    background-color: #bfa;
}

 将元素设置为单元格td

display:table-cell;

4.表单简介

表单：在现实生活中用于提交数据

在网页中也可以使用表单，网页中的表单用于将本地的数据提交给服务器

1）使用form变迁来创建一个表单

2）form的属性

action：表单要提交的服务器的地址

使用input标签

3）文本框，数据要提交到服务器中，必须要为元素指定一个name属性
 

<input type="text" name="username">

4）密码框

 <input type="password" name="password">

5）单选按钮，必须有相同的name属性

<input type="radio" name="a">
    <input type="radio" name="a">

5.图标字体的其他使用方式 

通过伪元素来设置图标字体

1.找到要设置图标的元素通过before或after选中

2.在content中设置字体的编码

3.设置字体的样式

<style>
    li{
        list-style:none;
    }
    li::before{
        content:'\f1b0';
        font-family:'Font Awesome 5 Free';
        font-weight:900;
        color:aqua;
        margin-right:10px;
    }
</style>

6.行高

6.1行高

指的是文字占有的实际高度

可以通过line-height来设置行高

行高可以直接指定一个大小（px   em）

行高经常还用来设置文字的行间距

行间距=行高-字体大小

也可以直接为行高设置一个整数，如果时一个整数的话，行高将会是字体指定的倍数

6.2字体框

字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度

行高会在字体框的上下平均分配

行高指的是单行的高度

7.字体的简写属性

font 可以设置字体相关的所有属性

语法：

font:  自重   字体风格   字体大小 /行高  字体族（font-size和font-weight可以互换）

自重、字体风格、行高可以省略不写，如果不写则使用默认值

8.文本的水平和垂直对齐

8.1 text-align  文本的水平对齐

可选值：
left：左侧对齐

right：右对齐

center：居中对齐

justify：两端对齐

8.2 vertical-align  设置元素垂直对齐的方式

可选值：
baseline：默认值  基线对齐

top：顶部对齐

bottom：底部对齐

middle：居中对齐

9.其他的文本样式

9.1text-decoration 设置文本修饰

可选值：
none  什么都没有

underline：下划线

line-through：删除线

overline：上划线

9.2white-space 设置网页如何处理空白

可选值：
normal：正常

nowrap：不换行

pre：保留空白

如何设置省略号