CSS基础
一、单选按钮
- type="radio"
- 注意:如果让文字点击能切换,那要加 lable 标签,并且设置 for 属性和对应的单选按钮的 id 属性值一致;必须给这一组按钮添加 name 值,才可以实现单选效果;设置默认选中状态,要给单选按钮添加 checked="checked"。
二、下拉菜单
- select 和 option 的组合命令:
- 注意:如果想设置多组下拉菜单,需要添加一个 optgroup 标签,并设置 lable 属性作为提示文字;如果像设置默认选中状态(如图),需要给对那个的 option 添加 selected 属性。
三、文本域
- textarea 标签来设置多行文本(文本域)
- 注意:不能使用 cols、rows 来设置宽高,要用 width、height 来设置;它可以使用 placeholder 来设置默认提示文字。
四、多选框(复选框)
- type="checkbox"
- 它使用方法和细节与单选框一致。
五、按钮
- 提交按钮 type="submit" 注意:必须设置 value 属性,否则浏览器之间有兼容性问题。
- 重置按钮 type="reset" 注意:必须设置 value 属性,否则浏览器之间有兼容问题。 重置以后恢复到刷新后的默认状态。
- 按钮 type=“button” 或 <button></button> 都可以
- 用户体验细节:刷新后想让第一个输入框默认选中状态,给输入框设置 autofocus="autofocus" 属性。
六、CSS
- 定义:样式表、级联样式表、层叠样式表
七、CSS基础语法
- css 代码写在 style 标签里面,放在 head 标签中;大括号中写键值对语法
- 例子:属性名1:属性值1;属性名2:属性值2
- color 文字颜色
- font-family 字体
- font-size 字号
- text-indent 首行缩进,单位 em ,代表一个文字的间距
- text-align 文本对齐方式,默认是 left,还可以设置 center 居中,right 居右
- background 背景色属性
八、标签选择器
- 直接在 css 语法中写标签的名字就可以选中对应的标签
- div 代表大盒子(容器 存放内容的)
- span 代表小盒子(容器 存放内容的)
九、id和class选择器
- id 选择器语法:#名字 特点:不能重复,也不能一个人拥有多个
- class 类选择器语法:.名字 特点:可以重复使用,一个人可以有多个类名(好像一个人的称号一样)
- 总结:今后 class 雷迅阿泽其使用频率高于 id 选择器
十、css的引入方式
内嵌式: style 标签放在 head 中
- 优点:方便上案例的书写;电商网站的首页必须使用这种方式,因为电商 首页要求加载速度必须快,内嵌式比外链式快一些。
- 缺点:html 和 css 代码没有实现分离,不方便修改
- 优点:实现了代码分离,方便修改和管理
- 缺点:运行速度比内嵌稍慢
十一、基础选择器权重
- id > class > 标签