0%

css小技巧

上一篇主要就是css的一些常用的指定方式。但是看着就是很简单的一种语言,甚至都不需要缩写。

但是看了书发现还是有一些高级用法的。

根据屏幕大小来指定使用哪个css,这个不就可以用在定义手机端样式和pc端样式啊。

1
<link href="lounge-mobile.css" rel="sytlesheet" media="screen and (max-device-width: 480px)">

这里就是指定了这个css只有在有屏幕的设备同时设备屏幕宽度不能超过480像素。

当然我们可以不在link标记内使用,原生css里也可以指定

1
2
3
4
5
@media screen and (min-device-width: 481px) {
#guarantee {
margin-right: 250px;
}
}

上面这个就是所有屏幕宽度大于481像素都可以使用这些规则。

当然可以不光是screen,还有print这种选项。

下面这一种是之前怎么都没想到的。不过也可以看出css中伪类是需要好好学习的。

以前当我们需要给表格中不同行设置不同的背景色或者字体什么的,都是通过不同的class来定义的。很多教程都是这样的:https://www.runoob.com/try/try.php?filename=trycss_table_fancy

但是其实我们是可以借用css中的伪类来实现。

1
2
3
4
5
6
p:nth-child(2n) {
background-color: red;
}
p:nth-child(2n+1) {
background-color: green;
}