前端基础之css
参考博客：http://www.cnblogs.com/liwenzhou/p/7999532.html
一、 CSS选择器
--> CSS如何引入?
1. 直接写在标签里面 style="样式1;样式2;"
2. 在head中通过style标签定义
3. 把样式单独写在css文件中,然后在html文件中通过link标签导入
--> CSS语法
选择器 {样式1;样式2}
1. 基本选择器
1. 标签选择器
2. ID选择器 ：前加"#"
3. 类选择器(class="c1 c2 ..."):前加"."
2. 通用选择器(*)
3. 组合选择器
1. 后代选择器(空格)
2. 儿子选择器(>)
3. 毗邻选择器(div+p)
4. 弟弟选择器(~)
4. 属性选择器
1. [s9]
2. [s9="hao"]
3. 其他不常用的(有印象即可)
5. 分组和嵌套
1. 分组(用逗号分隔的多个选择器条件)
2. 嵌套(选择器都可以组合起来使用)
6. 选择器的优先级
1. 越靠近标签的优先级越高(就近原则)
2. 权重的计算
1. 内联样式1000
2. ID选择器100
3. 类选择器10
4. 元素选择器1
div#d1(101)/div.c1(11)/div .c1
7. 伪类和伪元素
1. 伪类
1. :link
2. :visited
3. :hover (重要)
4. :active
5. :focus(input标签获取光标焦点)
2. 伪元素
1. :first-letter
2. :before(重要 在内部前面添加)
3. :after(重要 在内部后面添加)
2. CSS选择器补充
http://www.cnblogs.com/liwenzhou/p/7999532.html
3. CSS属性
1. 文字属性
1. font-family
2. font-size
3. font-weight
4. color
1. rgb(255, 255, 255)
2. #f00
3. red
4. rgba()
2. 文本属性
1. text-align
2. text-decoration
3. 背景属性
1. background-color
2. background-image
4. 边框属性
1. border
2. border-radius --> 变圆
5. display属性
1. inline
2. block
3. inline-block
4. none (隐藏)
6. CSS盒子模型(从外到内)
1. margin: 边框之外的距离(多用来调整 标签和标签之间的距离)
2. border边框
3. padding:内容区和边框之间的距离(内填充/内边距)
4. condent: 内容
7. 浮动:
div配合float 来做 页面的布局 任何元素浮动之后都会变成块元素。 float: 1. left 2. right 3. none
8. clear 清除浮动--> 清除浮动的副作用(内容飞出,父标签撑不起来)
1. 结合伪元素来实现
.clearfix:after {
content: "",
display: "block",
clear: both;
}
2. clear取值:
1. left
2. right
3. both
9. overflow
1. 标签的内容放不下(溢出)
2. 取值:
1. hidden --> 隐藏
2. scroll --> 出现滚动条
3. auto
4. scroll-x
5. scroll-y
例子:
圆形头像的例子
1. overflow: hidden
2. border-radius: 50% (圆角)
10. 定位:
1. static --> 默认的
2. relative --> 相对定位(相对于原来的位置来说)
3. absolute --> 绝对定位(相对于最近的一个被定位过的祖宗标签) (完全脱离文档流)
4. fixed --> 固定在某个位置(返回顶部按钮) left right top bottom
补充:
脱离文档流的3种方式
float
absolute
fixed
11. opacity (不透明度)
1. 取值0~1
2. 和rgba()的区别:
1. opacity改变元素\子元素的透明度效果
2. rgba()只改变背景颜色的透明度效果
12. z-index
1. 数值越大,越靠近你
2. 只能作用于定位过的元素
3. 自定义的模态框示例
