前端基础之CSS(总结)
css学什么??
主要学习选择器和属性,选择器是去找到标签的位置,属性是给标签增加需要的样式。
CSS选择器
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
伪类和伪元素
1.伪类
1. : link
2. : visited
3. : hover(重要)
4. :active
5. :focus(input标签获取光标焦点)
2.伪元素
1. :first-letter
2. :before(重要 在内部前面添加)
3. :after(重要 在内部后面添加)
css属性
1.字体
1.font-family
2.font-size
3.font-weight
2.文本属性
1.text-align 对齐(重要)
2.text-decoration 装饰(去除a标签的下划线)
3.text-indent 行首缩进
3.背景属性
1.background-color 背景颜色
2.background-image 背景图片
4.color
1.red (直接写颜色)
2.#FF0000
3.rgb(255,0,0) --> rgba(255,0,0,0.5)
5.边框属性border
1.border-width (边框宽度)
2.border-style(边框样式)
3.border-color (边框颜色)
一般情况都用简写:border:1px solid red;
css盒子模型
1.content (内容)
2.padding(内填充)调整内容和边框之间距离时使用这个属性
3.border(边框)
4.margin(外边框)多用于调整标签之间的距离
注意:要习惯看浏览器console窗口那个模型
display (标签的展现形式)
1. inline
2.block 菜单里面的a标签可以设置成block
3.inline-block
4.none (不让标签显示,不占位)
float(浮动)
1. 多用于实现布局效果(1.顶部的导航条,2.页面左右分栏)
2.float:任何标签都可以浮动,浮动之后都会变成块级 (a标签float之后就可以设置高和宽)
3.float取值
1. left
2.right
3.none
clear 清除浮动 >>> 清除浮动的副作用 (内容飞出,父标签撑不起来)
1.结合伪元素来实现
.clearfix:after {
content:“”;
display:“block”;
clear:both;
}
2.clear取值 >>> left right both
overflow
1.标签的内容放不下(溢出)
2.取值:
1.hidden ----> 隐藏
2.scroll -----> 出现滚动条
3.auto
4.scroll-x
5.scroll-y
定位 position
1.static(默认)
2.relative(相对定位 --> 相当于原来的位置)
3.absolute(绝对定位 --> 相当对于定位过的前辈标签)
4.fixed (固定 ---> 返回顶部按钮示例)
脱离文档流的3种方式
float
absolute
fixed
opacity(不透明度)
1.取值0~1
2.和rgba()的区别:
1.opacity改变元素\子元素的透明度效果
2.rgba()只改变背景颜色的透明效果
z-index
1.数值越大,越靠近你
2.只能作用于定位过的元素
3.自定义的模态框示例