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选择器


  1. id 选择器语法:#名字    特点:不能重复,也不能一个人拥有多个
  2. class 类选择器语法:.名字    特点:可以重复使用,一个人可以有多个类名(好像一个人的称号一样)
  3. 总结:今后 class 雷迅阿泽其使用频率高于 id 选择器

十、css的引入方式

内嵌式: style 标签放在 head 中

  • 优点:方便上案例的书写;电商网站的首页必须使用这种方式,因为电商   首页要求加载速度必须快,内嵌式比外链式快一些。
  • 缺点:html 和 css 代码没有实现分离,不方便修改
外链式:通过 link 放在 head 标签中,把外部的 css 文件引入到 html 文件中
  • 优点:实现了代码分离,方便修改和管理
  • 缺点:运行速度比内嵌稍慢
行内式:这种行形式一定不要用,它会让代码量变得非常庞大,不方便修改!

十一、基础选择器权重


  • id > class > 标签                                                                  




全部评论

相关推荐

点赞 收藏 评论
分享
牛客网
牛客企业服务