css的写法一共有多少种?分别怎么写?
时间: 2023-03-15 09:19:21 浏览: 82
CSS有三种写法:嵌入式,内联和外部。嵌入式CSS写法是将CSS代码放在HTML文件的<head>标签内部;内联的CSS写法是将CSS代码写在HTML文件的各个HTML标签内;外部的CSS写法是将CSS代码放在一个单独的文件,然后使用link标签将CSS文件引入HTML文件。
相关问题
uniapp中css样式穿透的写法?
在uniapp中,可以使用CSS样式穿透来解决组件中scoped样式无法修改的问题。Uniapp支持使用三种方式来实现样式穿透:
1. 使用`>>>`或`/deep/`操作符:在style标签中,通过`.parent >>> .child`或`.parent /deep/ .child`的方式来选择子组件中的元素,并修改其样式。例如,在style标签中使用`.parent >>> .child { /*样式*/ }`或`.parent /deep/ .child { /*样式*/ }`来修改子组件`.child`的样式。这样会生效并穿透到子组件中的样式。
2. 使用`::v-deep`操作符:在vue3中,可以使用`::v-deep`操作符来选择子组件中的元素,并修改其样式。例如,使用`.parent ::v-deep .child { /*样式*/ }`来修改子组件`.child`的样式。这样会生效并穿透到子组件中的样式。
3. 使用`/deep/`操作符:对于一些无法正确解析`>>>`的预处理器,如Sass和Less,可以使用`/deep/`操作符代替`>>>`来选择子组件中的元素,并修改其样式。例如,使用`.parent /deep/ .child { /*样式*/ }`来修改子组件`.child`的样式。这样会生效并穿透到子组件中的样式。
需要注意的是,样式穿透只能修改子组件中的样式,无法修改父组件中的样式。另外,在使用样式穿透时,要确保选择器的优先级足够高,以覆盖原有的scoped样式。
综上所述,在uniapp中,可以使用`>>>`、`/deep/`或`::v-deep`操作符来实现样式穿透,以修改组件中的样式。
能监测手机分辨率的宽高来用两种css写法
当我们需要根据不同的手机分辨率来显示不同的样式时,可以使用媒体查询(Media Query)。
以下是两种根据不同分辨率显示不同样式的 CSS 写法:
1. 使用 max-width 和 min-width 媒体查询:
```css
/* 当屏幕宽度小于等于600px时,应用以下样式 */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
/* 当屏幕宽度大于600px时,应用以下样式 */
@media (min-width: 601px) {
body {
font-size: 16px;
}
}
```
2. 使用设备像素比(Device Pixel Ratio,简称DPR)媒体查询:
```css
/* 当DPR为1时,应用以下样式 */
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
body {
background-color: #f0f0f0;
}
}
/* 当DPR为2时,应用以下样式 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
body {
background-color: #e0e0e0;
}
}
```
注意:以上代码仅为示例,实际使用时需根据具体需求进行修改。