1.4.1css简介

2016-03-03  本文已影响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;}
大括号之前为选择器，大括号里面属性声明，每个属性声明用分号隔开，每个属性声明＝属性名：属性值
注释/* */

浏览器私有属性

.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}
基本元素，组和符号，数量符号

基本元素

组和符号－空格

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

组和符号－&&

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

组合符号－||

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

组和符号－|

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

组和符号－[]

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

数量符号－无

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

数量符号－＋

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

数量符号－？

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

数量符号－{}

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

数量符号－*

<time>[,<time>]*

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

数量符号－#

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

属性值例子

@规则语法

@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 {}

@规则

上一篇下一篇

猜你喜欢

热点阅读