html &css
表单项标签:
input: 可以通过type属性值,改变元素展示的样式
type属性 :
*text : 文本输入框, 默认值
* palceholder : 指定输入框的提示信息, 当输入框的内容发生变化, 会自动清空
*password: 密码输入框
*radio: 单选框
* 注意:
1 . 要想让多个单选框实现单选的效果, 则多个单选框的name属性值必须一样
2 . 一般会给一个单选框提供value属性 , 指定其被选中后提交的值
3 . checked属性, 可以指定默认值
*checkbox : 复选框
* 注意:
1 . 一般会给一个单选框提供value属性 , 指定其被选中后提交的值
2 . checked属性, 可以指定默认值
* file : 文件选择框
* hidden : 隐藏域 , 用于提交一些信息
* 按钮 :
* submit : 提交按钮 , 可以提交表单
* button : 普通按钮
* image : 图片提交按钮
* src属性指定图片的路径
* label : 指定输入项的文字描述信息
* 注意 :
* label 的 for 属性一般会和 input 的 id 属性值 对应 , 如果对应了, 则点击label区域 , 会让input输入框获取焦点
select: 下拉列表
* 子元素 : option , 指定列表项
textarea: 文本域
* cols : 指定列数 , 每一行有多少个字符
* rows : 默认多少行 .
------------------------------------------------------------------------------
CSS : 页面美化和布局控制
1 . 概念 : Cascading Style Sheets 层叠样式表
* 层叠: 多个央视可与i作用在同一个html 的元素上, 同时生效
2 . 好处 :
1. 功能强大
2 . 将内容展示和样式控制分离
* 降低耦合度. 解耦
*让分工协作更容易,提升开发效率
3 . CSS的使用 : CSS与 html 的结合方式
1.内联样式 不推荐
2.内部样式
* 在head标签内, 定义 style标签, style标签的标签内容就是css代码
3.外部样式
1. 定义css资源文件.
2.在head标签内定义link标签, 引入外部资源文件
*注意 这三种方式 CSS作用范围越来越大
4. CSS 语法 :
* 格式 :
选择器{
属性名1 : 属性值1 ;
属性名1 : 属性值1 ;
.....
}
* 选择器 : 筛选具有相似特征的元素
*注意 :
*每一对属性需要使用 ; 隔开 , 最后一对属性可以不加 ;
5 . 选择器
* 分类 :
1 . 基本选择器
1. id 选择器 : 选择具体的id 属性值的元素, 建议在一个html页面中id 值唯一
* 语法 : #id属性值{ }
2. 元素选择器 : 选择具有相同标签名称的元素
* 语法 : 标签名称{ }
* 注意 : id选择器优先级高于元素选择器
3. 类选择器 : 选择具有相同的class属性值的元素.
* 语法 : .class属性值{ }
* 注意 : 类选择器优先级高于元素选择器
2 . 扩展选择器
1 . 选择所有元素 :
* 语法 : *{ }
2 . 并集选择器
* 选择器1,选择器2{ }
3 . 子选择器 : 筛选选择器1元素下的选择器2元素
* 语法 : 选择器1 选择器2{ }
4. 父选择器 : 筛选选择器2的父元素选择器1
* 语法 : 选择器1 > 选择器2{ }
5. 属性选择器 : 选择元素名称 , 属性名=属性值的元素
* 语法 : 元素名称[属性名="属性值"]{ }
6. 伪类选择器 : 选择一些元素具有的状态
* 语法 : 元素:状态{ }
* 如 : <a>
* 状态 :
*link : 初始化状态
*visited : 被访问过的状态
*active : 正在访问状态
*hover : 鼠标悬浮状态
6 . 属性
1 . 文本 字体
* font - size : 字体大小
* color : 文本颜色
* text - align : 对其方式
* line - height : 行高
2 . 背景
* background :
3 . 边框
* border : 设置边框 , 符合属性
4 . 尺寸
* width : 宽度
* height : 高度
5 . 盒子模型 : 控制布局
* margin : 外边距
* padding : 内边距
* 默认情况下内边距会影响整个盒子的大小
* box - sizing : border - box 设置盒子的属性, 让width 和 height 就是最终盒子的大小
* float : 浮动
* left
* right
