CSS @规则

最新推荐文章于 2023-07-26 11:21:24 发布

喵_美

最新推荐文章于 2023-07-26 11:21:24 发布

阅读量704

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_34708564/article/details/108617781

版权

html 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

CSS @规则

@charset
用于提示 CSS 文件使用的字符编码方式，它如果被使用，必须出现在最前面。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果。
@import
@import 用于引入一个 CSS 文件，除了 @charset 规则不会被引入，@import 可以引入另一个文件的全部内容。

@media
可以针对不同的屏幕尺寸设置不同的样式

@media (min-width: 1200){
    //>=1200的设备
 }
 @media (max-width: 1200){ 
    //<=1200的设备
  }
  @media screen and (min-width: 960px) and (max-width: 1199px) {
     //大于960px，小于1199px
}

判断手机横屏还是竖屏

@media screen and (orientation:portrait){
  // 竖屏
 }
 @media screen and (orientation:landscape){
   // 横屏
 }

@ counter-style
用于定义列表项（ol、li）的表现。
（1）结构解析

@counter-style counter名字{
     system  : 算法;
     range   : 使用范围;
     symbols : 符号; or additive-symbols: 符号
     prefix  : 前缀;
     suffix  : 后缀;
     pad     : 补零(eg. 01,02,03);
     negative: 负数策略;
     fallback: 出错后的默认值;
     speakas : 语音策略;
}

(2)算法-system
在这里插入图片描述
算法详细解释如下表所说。

其他详细说明见CSS3 Counter Style详细说明
(3)案例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" >
 
/*两位数字编号-01,02,03……10,11*/
@counter-style decimal-leading-zero {
  system: extends decimal;
  pad: 2 '0';
}
/*中文数字编号*/
@counter-style cjk-decimal {
  system: numeric;
  range: 0 infinite;
  symbols: \3007  \4E00  \4E8C  \4E09  \56DB  \4E94  \516D  \4E03  \516B  \4E5D;
  /* 〇 一 二 三 四 五 六 七 八 九 */
  suffix: "\3001";
  /* "、" */
}
/*天干编号*/
@counter-style cjk-heavenly-stem {
  system: alphabetic;
  symbols: "\7532" "\4E59" "\4E19" "\4E01" "\620A" "\5DF1" "\5E9A" "\8F9B" "\58EC" "\7678";
  /* 甲 乙 丙 丁 戊 己 庚 辛 壬 癸 */
  suffix: "、";
}
/*地支编号*/
@counter-style cjk-earthly-branch {
  system: alphabetic;
  symbols: "\5B50" "\4E11" "\5BC5" "\536F" "\8FB0" "\5DF3" "\5348" "\672A" "\7533" "\9149" "\620C" "\4EA5";
  /* 子 丑 寅 卯 辰 巳 午 未 申 酉 戌 亥 */
  suffix: "、";
}
/*中文大写编号-壹仟壹佰壹拾壹*/
@counter-style simp-chinese-formal {
/* this is a predefined complex style in the CSS3 Counter Styles specification */
system: additive;
range: -9999 9999;
additive-symbols: 9000 \7396\4EDF, 8000 \634c\4EDF, 7000 \67d2\4EDF, 6000 \9646\4EDF, 5000 \4f0d\4EDF, 4000 \8086\4EDF, 3000 \53C1\4EDF, 2000 \8CB3\4EDF, 1000 \58F9\4EDF, 900 \7396\4F70, 800 \634C\4F70, 700 \67D2\4F70, 600 \9646\4F70, 500 \4f0d\4F70, 400 \56DB\4F70, 300 \53C1\4F70, 200 \8CB3\4F70, 100 \58F9\4F70, 90 \7396\62FE, 80 \634C\62FE, 70 \67D2\62FE, 60 \9646\62FE, 50 \4f0d\62FE, 40 \8086\62FE, 30 \53C1\62FE, 20 \8CB3\62FE, 10 \58F9\62FE, 9 \7396, 8 \634C, 7 \67D2, 6 \9646, 5 \4f0d, 4 \8086, 3 \53C1, 2 \8CB3, 1 \58F9, 0 \96F6;
suffix:'、 ';
negative: "\8D1F";
}
.a {
   list-style:cjk-earthly-branch ;
}
 </style>	
</head>
<body>
    <ol class="a">
        <li>1 </li>
        <li>2 </li>
        <li>3 </li>
        <li>4 </li>
    </ol>
</body>
</html>

效果如下：
在这里插入图片描述
4. @page
@page规则可以对打印进行更多的设置，比如指定页面的尺寸。页边距,页眉页脚等，以求达到更好的效果
5. @ keyframes
keyframes 产生一种数据，用于定义动画关键帧。
6. @font-face
用于定义一种字体，一般用于字体图标的引入，icon font 技术就是利用这个特性来实现的。
7. @support
用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。但是这里有一点需要注意的是：@support对于浏览器的版本也是有要求的，不是说所有的浏览器以及其所有的版本都是支持@support的。
（1）基本语法是这样的：

@support(prop:value){
/*自己的样式*/
}
@supports (display: flex) {  div {    display: flex;  }}
  /* 注释：如果浏览器支持display:flex属性的话，那么div的样式就是display:flex */
}

（2）逻辑操作符：“not” 的用法

@supports not (display: flex) {  div {    float: right;  }}
  /* 注释：如果浏览器不支持display:flex属性的话，那么div的样式就是display:right */

（3）逻辑操作符：“and”的用法

@supports (display: flex) and ( box-shadow: 2px 2px 2px black ) {
	/*自己的样式*/
}
/*浏览器支持display:flex和box-shadow的属性，就执行里面自己的样式*/

（4）逻辑操作符：“or” 的用法

@supports (display: -webkit-flex) or (display: -moz-flex) or(display: flex) {
      /*自己的样式 */
}
   /*如果浏览器支持其中一个就可以执行里面自己的样式 */

（5）混用的例子
“or”和“and”混用，在@supports中“or”和“and”混用时，必须使用括号（）来区分其优先级

@support(prop:value){
/*自己的样式*/
}
@supports (display: flex) {  div {    display: flex;  }}

“or”、“and” 和 “not” 混用

@support(prop:value){
/*自己的样式*/
}
@supports (display: flex) {  div {    display: flex;  }}

@namespace
用于跟 XML 命名空间配合的一个规则，表示内部的 CSS 选择器全都带上特定命名空间。
@viewport
用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被 HTML 的 meta 代替。

喵_美

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
CSS @规则

CSS @规则@charset用于提示 CSS 文件使用的字符编码方式，它如果被使用，必须出现在最前面。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果。@import@import 用于引入一个 CSS 文件，除了 @charset 规则不会被引入，@import 可以引入另一个文件的全部内容。@media可以针对不同的屏幕尺寸设置不同的样式@media (min-width: 1200){ //>=1200的设备 } @media (max-wid
复制链接

扫一扫