css

css

层叠

css层叠样式来源

• 内联
• 内部引用
• 外部引用
• 用户自定义的浏览器样式
• 浏览器默认样式

样式规则优先级一次降低

层叠概念

层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。

单位

px,rpx,em,rem

px

固定单位,代表一像素。

rpx

小程序中有用到

px = 750/屏宽* rpx
iphone中1px = 2rpx;

em

相对单位，相对于父元素的大小。 默认 1em = 16px;

rem

相对单位，相对于根元素html，可以用来做响应式设计。

相关应用

1像素border

=>(https://jeft-hai.github.io/css-skills/) css=>18

.border{
	position:relatve;
}
.border:after{
	position:absolute;
	display:block;
	width:100%;
	top:0;
	left:0;
	bottom:0;
    content:'';
    border-bottom: 1px solid #f00;
}

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
    .border{
      -webkit-transform: scaleY(.7);
        transform: scaleY(.7);
    }    
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
    .border{
      -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
    }    
}

粗体与斜体

<b>和<strong>有啥区别？<i>和<em>有啥区别？

b,i 是视觉要素，表示无意义的加粗和斜体。
strong，em 是表达元素，表示强调文本。strong比em还要强烈。

选择器

选择器种类

属性选择器
id选择器
class选择器
标签选择器
单标签选择器
多标签选择器
子选择器
后代选择器
相邻选择器

选择器优先级

id选择器(100)>class选择器(10)>标签选择器(1), !important最高

伪类和伪员素

UI伪类

a: link visited hover active
input: focus
#title:target

eg: 访问过的a链接，hover时不再有样式

调整链接样式顺序，l(link)ov(visited)e，h(hover)a(active)te

结构化伪类

: first-child,last-child,nth-child

伪元素

:after,:before

eg: 三角，清除浮动=>(https://jeft-hai.github.io/css-skills/) css=>1