胡子哥的重学前端（笔记）css语法

kelvinlee 发布于2019-08-30 15:55 / 2498人阅读

摘要：规则在外部样式表文件内使用。指定该样式表使用的字符编码。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。上说没有浏览器支持，暂不研究允许子孙元素使用取值序列中的值循环替换继承而来的值。函数返回选择元素的属性值。

at 规则 @charset

在外部样式表文件内使用。指定该样式表使用的字符编码。
该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。
在外部css文件中写法如下：

@charset "utf-8";
body{sRules}
div{sRules}
...

@import

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

@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

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

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

@counter-style

使用@counter-style命令，我们可以自定义列表样式，可以用在list-style、counter、counters等上。

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

详细使用方法

@key-frames

定义动画的关键帧

使一个div元素逐渐移动200像素：

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

@font-face

使用您需要的字体,当今流行的fontawesome就是用这种方式加载图标的
新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

@font-face
{
font-family: myFirstFont;
src: url("Sansation_Light.ttf"),
     url("Sansation_Light.eot"); /* IE9+ */
}

div
{
font-family:myFirstFont;
}

viewport

这个和meta name="viewport"类似，但支持没有使用meta的好，所以建议使用meta

CSS 支持一批特定的计算型函数：

calc() max() min() clamp() toggle() attr()

calc()

calc() 函数用于动态计算长度值。

 ● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

 ● 任何长度值都可以使用calc()函数进行计算；

 ● calc()函数支持 "+", "-", "*", "/" 运算；

 ● calc()函数使用标准的数学运算优先级规则；

max()

用于比较数值的大小并取出最大的那个。

div{font-size:max(30px, 3em);}
div{width:max(10% + 20px, 300px);}

min()

用于比较数值的大小并取出最小的那个。

div{font-size:min(30px, 3em);}
div{width:min(10% + 20px, 300px);}

clamp()

mozilla 上说没有浏览器支持，暂不研究

toggle()

允许子孙元素使用取值序列中的值循环替换继承而来的值。
在更老的版本中使用的是：cycle()

ul {
    list-style-type: toggle(disk, circle, square, box);
}

在上述代码中，定义一个多级的ul，第一级使用disk markers，子孙级依次使用circle, square, box。

attr()

attr() 函数返回选择元素的属性值。
content和attr()配合使用

attr属性通常和自定义属性data-配合使用，因为传统的其它属性虽然也能存值，但通常不适合存放表达性文字


div[data-line]:after { content: attr(data-line);/* 属性名称上不要加引号！ */ }

GPU云服务器云服务器 python语法笔记前端css css前端前端css框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117347.html

胡子哥的重学前端（笔记）css语法

摘要：规则在外部样式表文件内使用。指定该样式表使用的字符编码。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。上说没有浏览器支持，暂不研究允许子孙元素使用取值序列中的值循环替换继承而来的值。函数返回选择元素的属性值。 at 规则 @charset 在外部样式表文件内使用。指定该样式表使用的字符编码。该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。在外部cs...

Sleepy 2019-08-23 15:12 评论0 收藏0
重学前端学习笔记（十）--CSS语法关于带@的规则

摘要：指普通的规则，由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则，表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头，否则会被认为是变量。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有...

codeKK 2019-08-02 16:16 评论0 收藏0
重学前端学习笔记（十）--CSS语法关于带@的规则

摘要：指普通的规则，由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则，表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头，否则会被认为是变量。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有...

SolomonXie 2019-08-26 13:43 评论0 收藏0
重学前端学习笔记（十）--CSS语法关于带@的规则

摘要：指普通的规则，由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则，表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头，否则会被认为是变量。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有...

HollisChuang 2019-08-30 10:50 评论0 收藏0