资讯专栏INFORMATION COLUMN

胡子哥的重学前端(笔记)css语法

kelvinlee / 2325人阅读

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

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);/* 属性名称上不要加引号! */ }

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

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

相关文章

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

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

    Sleepy 评论0 收藏0
  • 重学前端学习笔记(十)--CSS语法关于带@的规则

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

    codeKK 评论0 收藏0
  • 重学前端学习笔记(十)--CSS语法关于带@的规则

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

    SolomonXie 评论0 收藏0
  • 重学前端学习笔记(十)--CSS语法关于带@的规则

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

    HollisChuang 评论0 收藏0
  • 重学前端学习笔记(十)--CSS语法关于带@的规则

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

    yexiaobai 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<