前端 -＞ CSS笔记

css带入方式

优先级:就近原则,谁离代码近谁优先

选择器

基本选择器





层次选择器:





结构伪类选择器

CSS :active 选择器

• 定义和用法
• :active向活动的链接添加特殊的样式。
• 当你点击一个链接时它变成活动链接。

选择激活的链接样式：

a:active
{
background-color:yellow;
}

属性表达式

CSS样式

字体

文本样式

阴影

超链接伪类:鼠标悬停改变状态

列表样式

背景图片

渐变:

https://www.grabient.com/

盒子模型

边框圆角

display:显示

float:浮动,缺点:浏览器改变大小宽度,浮动的东西会改变位置(塌陷),下面会解决

浮动:本来这个东西是在一个span或者div中,浮动后就不在, 会浮在这上面

稍微看看就行,乱截的

解决浮动塌陷,父级边框塌陷

左右两侧不允许浮动:就是这个标签或者图片的位置,左右都不予许有浮动的东西



overflow:溢出 会出现滚动条什么的

定位:一个页面中会有一些元素,不管怎么滑动页面都在一个位置不动,如返回顶部

小练习

绝对定位

这不是固定位置的定位
也存在相对父级元素的位置的改变,如果父级元素有相对位置,那么子级元素的绝对定位就是根据父级判断的
会出现滚动页面,元素改变位置的情况
返回首页不是用的绝对定位

固定定位

返回首页用的就是这个

z-index:定位,跟浮动的差不多,就是覆盖的叠加的位置,可以设置多层