CSS学习

CSS

1.CSS的基本使用

1.1css引入方式：

• 行内样式：写在标签的style属性中

• 内嵌样式：写在style标签中（可在任何位置，但通常写在head中）

• 外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）

1.2css的选择器

• 元素选择器

  • 直接用标签

• ID选择器

  • 用#➕ID名称

• 类选择器

  • .class名称

1.3标签

标签	作用	特点
<span>	标签是一个在开发网页时大量会用到的没有语义的布局标签	一行可以显示多个（组合行内元素），宽度和高度默认由内容撑开
<a>	超链接文本标签
</video>	视频
</audio>	音频
	换行
</p>	段落标签
</b>	加粗
<strong>	强调加粗
&nbsp	空格展位符

2.盒子模型

2.1布局标签

标签名字	特点
div标签	一行只显示一个（独占一行） 宽度默认是父元素的高度，高度默认由内容撑开 可以设置宽高
span标签	一行可以显示多个 宽度和高度默认由内容撑开 不可以设置宽高

2.2盒子模型组成

组成	名称
内容	content
内边距	padding
边框	border
外边距	margin

3.表格标签

标签	描述	属性/备注
<table>	定义表格整体，可以包裹多个<tr>	border：规定表格边框的宽度 width:规定表格的宽度 call spacing：规定单元之间的空间
<tr>	表格的行，可以包裹多个<td>
<td>	表格单元格，可以包裹内容

4.表单标签

• 场景：在网页中主要负责数据采集功能，如注册，登录等数据采集

• 标签：<form>

• 表单项

  • <input>:定义表单项，通过type属性控制输入形式

  • <select1>:定义下拉列表

  • <textarea1>:定义文本域

• 属性

  • action：规定当前表单是向何处发送表单数据 URL。

  • method：规定用于发送表单数据的方式GET ，POST。

• type取值

  • type取值	描述	形式
    text	默认值，定义单行的输入字段
    password	定义密码字段
    radio	定义单选按钮
    checkbox	定义复选框
    file	定义文件上传按钮
    date/time/datatime-local	定义日期/时间/日期时间
    number	定义数字输入框
    email	定义邮件输入框
    hidden	定义隐藏域（密码框）
    submit/reset/button	定义提交按钮/重置按钮/可点击按钮

• name

  • 可用于分组

• value

  • 可用于提交单选框的值。比如男=1，女=2。

  • 用于多选框的话，value就是提交具体的值。