CSS—text文本、font字体、列表list、表格table、表单input、下拉菜单select

1.文本

2.字体

3.列表list

a.无序列表

b.有序列表

c.定义列表

4.表格table

a.内容

b.合并单元格

3.表单input

a.input标签

b.单选框

c.上传文件

4.下拉菜单

1.文本

属性	描述
color	设置文本颜色。
direction	指定文本的方向 / 书写方向。
letter-spacing	设置字符间距。
line-height	设置行高。
text-align	指定文本的水平对齐方式。
text-decoration	指定添加到文本的装饰效果。
text-indent	指定文本块中首行的缩进。
text-shadow	指定添加到文本的阴影效果。
text-transform	控制文本的大小写。
text-overflow	指定应如何向用户示意未显示的溢出内容。
unicode-bidi	与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align	指定文本的垂直对齐方式。
white-space	指定如何处理元素内的空白。
word-spacing	设置单词间距。

属性	描述
text-align-last	指定如何对齐文本的最后一行。
text-justify	指定对齐的文本应如何对齐和间隔。
text-overflow	指定应如何向用户呈现未显示的溢出内容。
word-break	指定非 CJK 脚本的换行规则。
word-wrap	允许长单词被打断并换到下一行。
writing-mode	指定文本行是水平放置还是垂直放置。

对于 W3C compliant CSS：如果定义了 color 属性，则还必须定义 background-color 属性。

2.字体

属性	描述
font	简写属性。在一条声明中设置所有字体属性。
font-family	规定文本的字体系列（字体族）。
font-size	规定文本的字体大小。
font-style	规定文本的字体样式。
font-variant	规定是否以小型大写字母的字体显示文本。
font-weight	规定字体的粗细。

字体大小：

PC端网页最常用的是像素px，且必须要带单位，谷歌默认字体是16像素
```
p {
    font-size:30px;
}
```
字体粗细：

行高=文本高度+上间距+下间距

注意：添加单位px表示行高，不加单位表示当前标签属性值的倍数！

3.列表list

列表还拥有默认的外边距和内边距。

要删除此内容，可在 <ul> 或 <ol> 中添加 margin:0 和 padding:0

属性	描述
list-style	简写属性。在一条声明中设置列表的所有属性。
list-style-image	指定图像作为列表项标记。
list-style-position	规定列表项标记（项目符号）的位置。
list-style-type	规定列表项标记的类型。

a.无序列表

b.有序列表

c.定义列表

4.表格table

table 和 <th> 和 <td> 元素都有单独的边框。

属性	描述
border	简写属性。在一条声明中设置所有边框属性。
border-collapse	规定是否应折叠表格边框。
border-spacing	规定相邻单元格之间的边框的距离。
caption-side	规定表格标题的位置。
empty-cells	规定是否在表格中的空白单元格上显示边框和背景。
table-layout	设置用于表格的布局算法。

a.内容

加入表格结构标签thead,tbody,tfoot便于浏览器读取，也可省略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二天</title>
</head>
<body>
    <!-- 无序列表 -->
    <ul>
        <li>无序列标签1</li>
        <li>无序列标签2</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>有序列标签1</li>
        <li>有序列标签2</li>
    </ol>
    <!-- 定义列表 -->
    <dl>
        <dt>标题</dt>
        <dd>描述1</dd>
        <dd>描述2</dd>
    </dl>
    <!-- 表格标签，加border后能显示边框 
        加入表格结构标签thead,tbody,tfoot便于浏览器读取，也可省略-->
    <table border="1">
        <thead>
            <tr>
                <th>第一行表头单元格1</th>
                <th>第一行表头单元格2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>第一行内容单元格1</td>
                <td>第一行内容单元格2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>第二行汇总单元格1</td>
                <td>第二行汇总单元格2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

b.合并单元格

注意：

表格是在自己的结构标签内进行合并的，不能跨结构标签thead、tbody、tfoot合并

<!-- 合并单元格，遵循“保留最左最上”原则 -->
    <table border="1">
        <tr>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>70</td>
            <td rowspan="2">80</td>
            <td>90</td>
        </tr>
        <tr>
            <td>90</td>
            <!-- <td>80</td> 删除-->
            <td>70</td>
        </tr>
        <tr>
            <td colspan="3">160</td>
            <!-- <td>160</td> 删除-->
            <!-- <td>160</td> 删除-->
        </tr>
    </table>

3.表单input

CSS 表单

作用：收集用户信息

使用场景：

登录页面
注册页面
搜索区域

a.input标签

添加input标签占位文本：使用placeholder属性即可

b.单选框

c.上传文件

<br>
    <!-- 表单标签——input标签使用 -->
    <!-- 单纯的文本形式，不能换行 -->
    文本框：<input type="text">
    <br>
    <!-- 自动非明文显示 --> <!-- input标签占位文本 -->
    密码框：<input type="password" placeholder="请输入密码">
    <br>
    单选框：
    <!-- gender是自定义名称，添加checked属性，默认选中 -->
    <input type="radio" name="gender"> 男
    <input type="radio" name="gender" checked> 女
    <br><br>
   
    <!-- 默认只可上传一个文件，添加multiple属性可实现文件多选功能 -->
    上传一个文件：<input type="file" >
    <br>
    上传多个文件：<input type="file" multiple>
    <br><br>
    <!-- 添加checked属性，实现默认选中 -->
     多选框：<input type="checkbox"> 苹果
     多选框默认选中：<input type="checkbox" checked> 草莓
    <br>

4.下拉菜单select

<!-- 下拉菜单，使用属性selected实现默认选中-->
    城市：
    <!-- <select name="" id=""></select> name和id等是发送数据使用的属性-->
    <select >
        <option>北京</option>
        <option>上海</option>
        <option selected>广州</option>
    </select>
    <br><br>

【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/980482.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！