# css 基本操作
"""
1. HTML
1. 文档结构
文档类型声明
<html>
<head></head> --> 给浏览器看的一些元信息
<body></body> --> 给用户看的信息
</html>
2. HTML标签的格式
<div></div> 双标签
<img/> 单标签
3. 标签的属性
<div id="唯一的ID值" s10="hao" name="wangzi"></div>
4. 常用的标签
1. 展示信息的
1. h1~h6
2. b/u/i/s
3. br --> 换行(标签的特点就是换行)
4. hr
5. p
6. a --> href属性
7. img --> src属性
8. ul/ol/dl
9. table
10. div
11. span
2. 获取信息的
1. form标签
1. input系列
1. type不同,展示的效果不同
1. text
2. password
3. email
4. date
5. radio --> 单选框 name相同表示一组
6. checkbox --> 复选框 name相同表示一组
7. file
8. submit --> 提交数据的时候
9. reset --> 重置
10. button --> 无默认效果,通常用JS绑定事件
11. hidden --> 隐藏
2. select -->下拉框
1. 单选的
<select name="xx">
<option value="1">星期一</option>
<option value="2">星期二</option>
</select>
2. 多选的
<select name="xx" multiple>
<option value="1">星期一</option>
<option value="2">星期二</option>
</select>
3. 分组的
<select name="xx">
<optgroup label="分组名称">
<option value="1">星期一</option>
<option value="2">星期二</option>
</optgroup>
</select>
2. form标签的属性
action --> 数据往哪儿提交
method --> 数据提交方式 GET/POST 一般用POST,默认是GET
readonly --> 只读
autocomplete="off" --> 关闭自动补全
novalidate --> 不用浏览器做校验
disabled --> 不可用
3. label标签
通常给所有获取用户输入的标签都要加上配套的label
两种配套方式:
1. 通过for属性
2. 直接包起来
5. HTML特殊符号
1. HTML不要求缩进
2. 多个空格和换行只会在浏览器中显示1个空格
3. 常用的特殊符号:
1. --> 空格
2. © --> 版权
3. ® --> 注册
4. ¥ --> 人民币
...
6. 标签的分类
1. 独占一行(浏览器有多宽我就占多宽) 块儿级标签
1. h1~h6
2. div
3. p
4. li
5. hr
6. tr
2. 在一行展示的(浏览器一行能放下我就在这一行) 内联标签/行内标签
1. b/u/i/s
2. a
3. img
4. span
5. input
7. <标签名>内容</标签名> ---> 元素
8. 快捷方式:
div>p
div+p
div*3
div[class="c1"]
div{$}
2. 今日内容
1. CSS
用来给HTML标签添加样式的
可以分解为两部分:
- 找到对应的标签
- 给它设置样式
1. 语法
选择器 {
属性1: 值1;
属性2: 值2
}
2. 注释
/*注释内容*/
3. CSS引入方式
1. 直接在标签定义style属性
2. 在head标签中定义style标签
3. 通过link标签导入外部单独的CSS文件
4. 选择器(找标签的方式)
1. 基本选择器
1. 标签选择器/元素选择器
div {}
p {}
2. ID选择器 #ID值
3. 类选择器 .c1 同一个标签可以设置多个类,多个类用空格分隔
4. 通用选择器 *
2. 组合选择器
1. 后代选择器 选择器1 选择器2
2. 儿子选择器 选择器1>选择器2
3. 毗邻选择器 选择器1+选择器2 (往下找紧挨着同级的标签)
4. 弟弟选择器 选择器1~选择器2 (往下找所有同级的标签)
3. 属性选择器
1. [title] 只判断属性名
2. [title='hehe']既判断属性名也判断属性值
4. 分组和嵌套
1. 分组
用逗号分隔
选择器1, 选择器2 {
样式1: 值1;
}
2. 嵌套
div.c1
#d1~p
#d1~.c1
5. 伪类和伪元素选择器
1. 伪类
:hover
:focus
2. 伪元素
:before
:after
5. 选择器的优先级
1. 选择器相同或者级别相同的话,离标签近的那个样式生效
2. 选择器的优先级
内联样式(1000) > ID选择器(100) > 类选择器(10) > 元素选择器(1) > 继承
3. !important(不讲道理的强制生效,不推荐使用)
你知道了 大量的练习 你会了
day49下午
CSS属性:
1. 宽度和高度
2. 字体属性
3. 文本属性
4. 背景属性
5. 边框
6. display属性
-none
-block
-inline
-inline-block
7. CSS盒子模型
-content
-padding
-border
-margin
8. float
-left
-right
清除浮动带来的负面效果
9. 溢出
-hidden
-scroll
-auto
10. 定位:
Left 当前元素的左侧与父元素左侧(就是原来默认位置)的距离值。
Right 当前元素的右侧与父元素右侧的距离值。
Top 当前对象顶部距离原位置顶部距离多少。
Bottom 当前对象底部距离原位置距离多少。
1. 相对定位
相对定位指的是:相对自己原来在的位置做的定位
2. 绝对定位
绝对定位指的是:相对 自己最近的 定位过的 祖先标签 来定位
3. 固定定位
11. z-index
弹出模态框使用
数值越大越靠近用户
12. opacity
透明度
注意与rgba()的区别
详情 见 http://www.cnblogs.com/liwenzhou/p/7999532.html