美文网首页
1.4.1css简介

1.4.1css简介

作者: 每日活菌 | 来源:发表于2016-03-03 18:40 被阅读0次

    概念

    cascading style sheet 成叠样式表
    主要定义页面中的表现

    发展史

    1996 css1,1998 css2,2007 css2.1,2001 css3

    引入

    • 外部样式表
    <head>
        <link rel="stylesheet" href="base.css">
    </head>
    

    用link标签引入外部样式表,href属性里写css文件地址

    • 内部样式表
    <head>
        <style>
            body{background-color:red}
            p{margin-left:20px}
        </style>
    </head>
    

    通过style标签引入,样式内容少时用内部样式。

    • 内嵌样式
    <p style="color:red;margin-left:20px;">
        this is a paragraph
    </p>
    

    使得html与css杂合在一起不利于维护。不建议引用

    语法

    /*用户列表*/
    .m-userlist{margin: 0 0 30px}
    .m-userlist.list{position: relative;height: 93px;overflow: hidden;}
    .m-userlist.list ul{margin: -13px 0 0 -13px;zoom:1;}
    

    selector{property1:value;property2:value;}
    大括号之前为选择器,大括号里面属性声明,每个属性声明用分号隔开,每个属性声明=属性名:属性值
    注释/* */

    浏览器私有属性

    • chrome,safari
      -webkit
    • firefox
      -moz
    • IE
      -ms-
    • opera
      -o-
      私有属性为了兼容不同浏览器书写如下
    .pic{
        -webkit-transform:rotate(-3deg);
        -moz-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
        -o-transform:rotate(-3deg);
        transrorm:rotate(-3deg);
    }
    

    把私有的属性写着前面,把标准的写着后面。

    属性值语法

    margin: [<length>|<percentage>|auto]{1,4}
    基本元素,组和符号,数量符号

    基本元素

    • 关键字
      -auto,solid,bold…
    • 类型
      基本类型(<length>,<percentage>,<color>…)
      其他类型(<'padding-width'>.<color-stop>…)
    • 符号(/,)
      分割属性值
    • inherit,initial

    组和符号-空格

    <'font-size'> <'font-family'>
    两个都要出现且顺序一致

    • 合法值
      -12px arial
    • 不合法值
      -2em
      -arial 14px

    组和符号-&&

    <length>&&<color>
    两个都要出现,顺序不要求

    • 合法值
      -green 2px
      -1em blue
    • 不合法值
      -blue

    组合符号-||

    underline||overline||line-through||blink
    至少出现一个顺序没有关系

    • 合法值
      -underline
      -overline underline

    组和符号-|

    <color>|transparent
    两个基本元素只能出现一个

    • 合法值
      -orange
      -transparent
    • 不合法值
      -blue transparent

    组和符号-[]

    bold[thin||<length>]
    分组作用,大括号里可以看作一个整体

    • 合法值
      -bold thin
      -bold 2em

    数量符号-无

    <length>
    基本元素只能出现一次

    • 合法值
      -1px
      -10em

    数量符号-+

    <color-stop>[,<color-stop>]+
    出现一次或者多次

    • 合法值
      -#ff,red
      -blue,green50%,gray
    • 不合法值
      -red

    数量符号-?

    inset?&&<color>
    基本属性可以出现也可以不出现

    • 合法值
      -inset blue
      -red

    数量符号-{}

    <length>{2,4}
    基本元素可以出现几次,最少出现几次,最多出现几次

    • 合法值
      -1px 2px
      -1px 2px 3px
    • 不合法值
      -1px

    数量符号-*

    <time>[,<time>]*

    可以出现零次,一次或者多次

    • 合法值
      -1s
      -1s,4ms

    数量符号-#

    <time>#
    需要出现一次或者多次,中间需要用逗号隔开

    • 合法值
      -2s,4s
    • 不合法值
      -1ms 2ms

    属性值例子

    • padding-top:<length>|<percentage>
    • 合法值
      -padding-top:1px
    • 不合法值
      -padding-top:1em 5%
    • box-shadow:[inset?&&[<length>{2,4}&&<color>?]]#|none
    • 合法值
      box-shadow:3px 3px rgb(50% 50% 50%),red 0 0 4px inset

    @规则语法

    @import"subs.css";
    @charset"UTF-8";
    @media print{
        body{font-size: 10pt}
    }
    @keyframes fadeint{
        0%{top: 0;}
        50%{top: 30px;}
        100%{top: 0;}
    }
    

    @标识符 xxx;
    @标识符 xxx {}

    @规则

    • @media
      用来做布局,设备只有符合了媒体查询条件,里面的样式才能生效
    • keyframes
      用来描述css动画的中间步骤
    • font-face
      引入外部字体,十页面中字体更加丰富

    相关文章

      网友评论

          本文标题:1.4.1css简介

          本文链接:https://www.haomeiwen.com/subject/dcrnkttx.html