这篇文章上次修改于 2097 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

css2和css3的区别:

1、css3能使代码更加简洁、页面结构更加清晰合理、性能和效果都能得到兼顾;而css2请求服务器次数要明显高于css3,因而它的性能和访问相较于css3较差
2、css3能够实现动画效果;而css2更偏向于表现
3、css3数据更加精简实用,许多css2中要用图片实现的效果,在css3中都可以通过代码直接实现
4、兼容问题,就目前来说css3是新事物,部分属性不能再浏览器中呈现,所以目前是使用css3来加强css2的效果

css3选择器:
1、属性选择器

element[attr^=value]{ css样式 } 指定了属性名称,并且以属性值value开头的元素
element[attr$=value]{ css样式 } 指定了属性名称,并且以属性值value结尾的元素
element[attr*=value]{ css样式 } 指定了属性名称,并且属性值中包含value的所有的元素

2、结构性伪类选择器

1):root{ css样式 } 匹配文档根元素(html标签)

2) element:first-child{ css样式 } 在一组相同元素中选择第一个元素
3) element:last-child{ css样式 } 在一组相同元素中选择最后一个元素
4) element:nth-child(n){ css样式 } 在一组相同元素中选择第n个元素,n的取值:数值、关键词、表达式
    偶数:2n或even
    奇数:2n+1或odd
5)element:nth-last-child(n){ css样式 } 在一组相同元素中选择倒数第n个元素,n的取值:数值、关键词、表达式

6)element:nth-of-type(n){ css样式 } 在一组元素中选择与element一致(element类型)的第n个元素,n的取值:数值、关键词、表达式

7)element:only-child{ css样式 } 匹配属于父元素的唯一的子元素

文字阴影text-shadow:

            text-shadow: x轴偏移量 y轴偏移量 阴影的羽化值 阴影的颜色;

word-break文字换行形式

            word-break: break-all; 允许长单词或URL地址内部换行
            word-break: normal; 只允许在断字点换行(默认值)

英文特殊字体的使用:

        1、在系统中找到要用的特殊字体(系统安全字除外)
        2、在www.font2web.com中对字体进行转换
        3、将转换完成的fonts文件夹与fonts.css文件拷贝到网站目录中
        4、定义字体,在fonts.css文件中定义:
            @font-face{
                font-family:"字体的英文名称";
                src: url(字体路径),url(字体路径);
            }
         5、使用字体,链接fonts.css文件:
            <link rel="stylesheet" src="fonts.css的路径">
         在css样式中添加:
            font-family: "字体的英文名称";

图标字体的应用:

        1)在网站上下载图标字体
        2)将fonts文件夹拷贝到网站目录中
        3)将font-awesome.min.css文件拷贝到css文件夹中
        4)在应用图标字体的网页中导入font-awesome.min.css文件
            <link rel="stylesheet" href="css/font-awesome.min.css"/>
         5)在网页中指定图标应用 ‘类名 类名-图标名称’
            <em class="fa fa-taxi"></em>

            <em class="icon-图标英文名称"></em>

css3颜色模式:

        rgba(r,g,b,a)
            r-red红色,取值范围0~255
            g-green绿色,取值范围0~255
            b-blue蓝色,取值范围0~255
            a-alpha不透明度,取值范围0~1
        hsl(h,s,l)
            h-hue色调,取值0~360
            s-saturation饱和度,取值范围0%~100%
            l-lightness亮度,取值范围0%~100%

border-radius圆角

    */
    .box1{
        border-radius: 50%;
    }
    .box2{
        border-radius: 100px;/* 元素的左上、右上、右下、左下各有100像素的圆角*/
    }
    .box3{
        border-radius: 50px 100px;/* 元素的左上和右下各有50像素,右上和左下各有100像素的圆角*/
    }
    .box4{
        border-radius: 30px 60px 100px;/* 元素的左上30像素,右上和左下各有60像素的,右下有100像素,圆角*/
    }
    .box5{
        border-radius: 10px 30px 60px 100px;/* 元素的左上10像素,右上有30像素,右下有60像素的,左下有100像 
 素的圆角*/
    }

background-image多背景:

        background-image: url(), url();
    background-size 背景图尺寸
        background-size: 数值; 背景图按照比例缩放——一个水平方向,一个垂直方向
        background-size: cover; 覆盖,定比例缩放到铺满整个盒子,背景图可能无法完整的显示在盒子中
        background-size: contain;包含,等比例缩放图片到完整显示在盒子中,背景图片在区域内铺不满

background-origin: 背景图的定位区域

        background-origin: padding-box; 默认值,背景图在padding和content内容区显示
        background-origin: content-box; 背景图在content内容区显示
        background-origin: border-box; 背景图在border区、padding区和content内容区显示

background-clip: 背景的绘制区域

        background-clip: border-box; 默认值,背景在border区、padding区和content区显示
        background-clip: padding-box; 背景在padding区、content区显示
        background-clip: content-box; 背景在content区显示

盒子阴影:

            box-shadow: x轴偏移量 y轴偏移量 阴影的羽化值 [阴影的大小] 阴影的颜色 内阴影inset|外阴影(默认值);
           */
        box-shadow: 0 0 0 10px #000 inset;