CSS语法规则

名称 版本 描述
!important CSS1 提升指定样式的应用优先权
@import CSS1/3 导入外部样式表及目标媒体,该规则必须在样式表头部最先声明
@media CSS2/3 指定样式表规则用于指定的媒体类型和条件
@font-face CSS3 设置嵌入HTML文档的OpenType字体
@keyframes CSS3 指定动画名称和动画效果
CSS度量单位 CSS CSS常用单位
CSS浏览器前缀 CSS3 CSS浏览器引擎前缀

!important


HTML中的标签会继承部分父标签的样式。body { color:#ff0000;}   
那么页面中,body之下的所有标签及标签下的所有子标签的文本都将变成红色  

!important 在两个相同类型的css样式定义中,往优先执行后面一个

p{font-size:14px;font-size:20px;}

但是可以通过!important语法,提升某一句样式表的重要性,使及优先执先 !important标注的语句

p{ 
    font-size:14px!important; 
    font-size:20px;
}


@import

  1. 指定导入的外部样式表及目标媒体

  2. 该规则必须在样式表头部最先声明

  3. IE使用@import无法引入超过35条的样式表

  4. 使用url(url)和直接使用url需要注意的地方



@import url("global.css");
@import url(global.css);
@import "global.css";

以上3种方式都有效。当使用url(url)的方式时，包住路径的引号可有可无；
当直接使用url时，包住路径的引号必须保留

指定媒体查询
@import url(example.css) screen and (min-width:800px);
@import url(example.css) screen and (width:800px),(color);
@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);

media

1. 指定样式表规则用于指定的媒体类型和查询条件
2. IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型
3. 媒体查询可以被用在CSS中的@media和@import规则上，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件. 
通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面.特别是移动设备，将会运用更加的广泛.

语法结构及用法
@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二{sRules}

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

@media screen and (max-width: 600px) {   
  选择器 {   
    属性：属性值；   
  }   

}  


body {
    background-color:lightgreen;
}

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}


属性 值 Min/Max 描述
device-height length yes 设备屏幕的输出高
device-width length yes 设备屏幕的输出宽度
height length yes 渲染界面的高度
width length yes 渲染界面的宽度
orientation portrait , landscape no 横屏或竖屏

@font-face

设置嵌入HTML文档的字体

需要兼容当前的主流浏览器，需同时使用.ttf、.woff、.eot、.svg四种字体格式


@font-face {
    font-family: 'diyfont';
    src: url('diyfont.eot'); /* IE9+ */
    src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('diyfont.woff') format('woff'), /* chrome、firefox */
         url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
         url('diyfont.svg#fontname') format('svg'); /* iOS 4.1 */
}


常用的CSS度量单位


em 
相对长度单位。相对于当前对象内文本的字体尺寸。 
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

em有如下特点： 
1. em的值并不是固定的； 
2. em会继承父级元素的字体大小。 

px 
像素（Pixel）。相对长度单位。 
像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。
而MAC的用户所使用的分辨率一般是72像素/英寸。 

em vs px 
em 指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。
那么12px=0.75em, 10px=0.625em。
为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，
这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 
也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 

rem
相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

实例：
<style>
    html,h1 {
        font-size: 12px;
    }
    p {
        font-size: 2rem;
    }
</style>

<body>
    <h1>下面的文字将是html定义的字体大小的2倍：</h1>
    <p>我是html定义的12px的2倍，字体大小为24px</p>
</body>

在使用rem单位的时候，我们为了统一管理和转换，一般会在初始化(reset.css)中设置
<style>
    html{
        /* 16px = 1rem */
        font-size: 16px;
    }
</style>


vw / vh 
相对于视口的宽度。视口被均分为100单位的vw
相对于视口的高度。视口被均分为100单位的vh

<style>
    h1 {
        font-size: 8vw;
    }

    h2 {
        font-size: 8vh;
    }
</style>


颜色


color:red /* 用单词形式来表示颜色 */
color:rgb();   /* 用rgb的形式来表示颜色 */
color:rgba();  /* 用rgba的形式来表示颜色 a 表示opacity 表示透明度*/
color:#3456787    /* 用十六进制的形式来表示颜色 */


浏览器引擎前缀(Vendor Prefix)有哪些？


-moz-     /* 火狐等使用Mozilla浏览器引擎的浏览器 */
-webkit-  /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */
-o-       /* Opera浏览器(早期) */
-ms-      /* Internet Explorer (不一定) */


浏览器引擎前缀(vendor-prefix)的用法


当需要使用浏览器引擎前缀(vendor-prefix)时，最好是把带有各种前缀的写法放在前面，
然后把不带前缀的标准的写法放到最后。比如：

/* 简单属性 */
.myClass {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    -ms-animation-name: fadeIn;
    animation-name: fadeIn;  /* 不带前缀的放到最后 */
}


/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 0; }
}
powered by GitbookEdit Time： 2023-04-08 10:28:32