CSS3学习笔记1-选择器和新增属性

前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够对想学这方面知识的小白有所帮助。因为是各种渠道找的资料,学习的不算系统,所以知识点涵盖的不甚全面,望各位看官不吝指正批评。

CSS3简介

CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。

css3现状

  • 浏览器支持程度差,需要添加私有前缀
  • 移动端支持优于PC端
  • 不断改进中
  • 应用相对广泛

CSS3新增选择器

1.属性选择器新增

  • E[属性名^=值]:从头去匹配这个‘属性 = 对应值’的E元素
  • E[属性名$=值]:从尾去匹配这个‘属性 = 对应值’的E元素
  • E[属性名*=值]:从任意位置去匹配这个‘属性 = 对应值’的E元素
  • E[属性名|=值]:匹配具备该属性的元素,并且属性值以对应值开头并紧接着“-”,如果该属性的属性值仅有匹配值,也能匹配到。

2.伪类选择器

  • E:first-child 找到第一个孩子为E的元素
  • E:last-child 找到最后一个孩子为E的元素
  • E:nth-child(N)找到第N个孩子为E的元素,N以1开始
  • E:nth-child(odd)匹配奇数的孩子为E的元素
  • E:nth-child(even)匹配偶数的孩子为E的元素
  • E:nth-child(3n+1)匹配第3n+1个孩子为E的元素,n从0开始

:nth-of-type使用方法与:nth-child类似。

3.其他选择器

  • input:focus{} => 选择获取焦点的表单
  • Input:checked{} => 选择被选中的checkbox表单
  • input:enabled{} => 选择可操控的表单元素
  • input:disabled{} => 选择不可操控的表单
  • E:target{} => 选择通过锚点跳转的当前E元素
  • E:empty{} => 选择没有子节点的E元素包括文本节点(基本不用)

伪元素before after

作用:渲染一个虚拟的标签插入到当前元素的内部前面或后面

总结:

  1. 伪元素默认是行内元素,我们可以进行转换,在实践中,我们常用来模拟装饰标签
  2. 伪元素是虚拟的,不能通过js去获取,但可以用类样式进行覆盖
  3. 清除浮动的底层原理,就是通过伪元素去清除浮动,节约DOM内存
  4. content不能省略,即便里面没有内容
  5. 当伪类需要配合iconfont去使用的话需要打开iconfont.css 拿到content里面对应的值
  6. 当伪元素需要hover的效果的时候不能直接hover 需要借助于父级 写法:父级:hover:伪元素

圆角 border-radius

实现元素的圆角化,使用方式与border、padding和margin类似,可以合写,也可以单独设置。

  1. 一个值设置的是盒子的四个角的水平和垂直半径
  2. 每个角都可以单独进行设置 其取值顺序是左上 右上 右下 左下顺时针设置
  3. 可以简写 简写的逻辑跟padding和margin一样
  4. 单位支持像素,和百分比(参照的是宽度和高度)
  5. 可以用 水平半径/垂直半径 去单独控制半径 并且每一个半径都可以单独控制

[blockquote]

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>dcocument</title>
<style>
ul{margin:0;padding:0;}
li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;}
.test .one{border-radius:10px;}
.test .two{border-radius:10px 20px;}
.test .three{border-radius:10px 20px 30px;}
.test .four{border-radius:10px 20px 30px 40px;}
.test2 .one{border-radius:10px/5px;}
.test2 .two{border-radius:10px 20px/5px 10px;}
.test2 .three{border-radius:10px 20px 30px/5px 10px 15px;}
.test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}
</style>
</head>
<body>
<h2>水平与垂直半径相同时:</h2>
<ul class="test">
    <li class="one">提供1个参数<br />border-radius:10px;</li>
    <li class="two">提供2个参数<br />border-radius:10px 20px;</li>
    <li class="three">提供3个参数<br />border-radius:10px 20px 30px;</li>
    <li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px;</li>
</ul>
<h2>水平与垂直半径不同时:</h2>
<ul class="test2">
    <li class="one">提供1个参数<br />border-radius:10px/5px;</li>
    <li class="two">提供2个参数<br />border-radius:10px 20px/5px 10px;</li>
    <li class="three">提供3个参数<br />border-radius:10px 20px 30px/5px 10px 15px;</li>
    <li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>
</ul>
</body>
</html>

[/blockquote]

阴影box-shadow

语法 box-shadow:水平偏移 垂直偏移 模糊大小 阴影大小 颜色 阴影

  1. 第一个值 :Npx 阴影向水平方向偏移N个像素 正数往右 负数往左
  2. 第二个值 :Npx 阴影向垂直方向偏移N个像素 正数往下 负数往上
  3. 第三个值 :px 模糊大小
  4. 第四个值 :px 阴影尺寸
  5. 第五个值 :颜色 默认值是黑色
  6. 第六个参数: 内外阴影 默认是外阴影 内阴影是inset
  7. 阴影可以写多个,中间用逗号隔开
  8. 阴影可以简写,但是需要注意有一些值需要补0

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 10px auto;
        }
        /* 第一个值 :Npx  阴影向水平方向偏移N个像素  正数往右 负数往左 */
        div:nth-child(1){
            box-shadow: -10px 0;
        }
        /* 第二个值 :Npx  阴影向垂直方向偏移N个像素  正数往下 负数往上 */
        div:nth-child(2){
            box-shadow: 0px -10px;
        }

        div:nth-child(3){
            box-shadow: 10px 10px;
        }
        /* 第三个值 :羽化大小 (模糊的大小) */
        div:nth-child(4){
            box-shadow: 10px 10px 50px;
        }
        /* 第四个值 :阴影尺寸 */
        div:nth-child(5){
            box-shadow: 0px 0px 10px 5px;
        }
        /* 第五个值 :颜色 默认值是黑色 */
        div:nth-child(6){
            box-shadow: 0px 0px 10px 5px rgba(100,100,100,0.5);
        }
        /* 第六个值 内外阴影 默认是外阴影 内阴影是inset */
        div:nth-child(7){
            box-shadow: 0px 0px 10px 5px red inset;
        }
        /* 阴影可以写多组 用逗号隔开*/
        div:nth-child(8){
            box-shadow: 0px 0px 10px 5px red inset,5px 5px 5px 5px pink,10px 10px 5px 5px blue;
        }
        div:nth-child(9){
            box-shadow: 5px 5px red;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

[/blockquote]

边框图片border-image(了解,有兼容性问题,同时效果难做)

以九宫格的方式来切割图片,然后把每部分图片平铺作为边框。

值说明:

  • border-image-source:url('border.png'); 图片路径
  • border-image-slice:26;图片切割,不要带单位,遵从九宫格式切图法(上下左右各来一刀)
  • border-image-repeat:round或者stretch或者repeat; round没有瑕疵,stretch默认拉伸,repeat 平铺(可能有瑕疵)
  • 简写:border-image:url('border.png') 26 round;

背景图片系列(重点)

1.背景图片的基准点

background-origin:值

  • border-box:忽略边框 直接从边框的起始 0 ,0点平铺
  • padding-box:默认值,忽略padding 直接从padding的起始 0 ,0点平铺
  • content-box:从内容部分开始平铺 跟padding有关系

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            border: 10px dashed #000;
            background:  url(image/heihei.jpg) 0 0 no-repeat;
             /* padding-box  默认取值,从padding的起始点开始平铺 padding的大小不会产生影响*/
            /*  border-box 从border的起始点开始平铺 border的大小不会产生影响 */
            /* content-box 从内容的起始点开始平铺,会留出padding的位置 */
            background-origin: content-box;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

[/blockquote]

2.多重背景

背景图片之间用逗号隔开,可以写多组,最先渲染的图片有可能会遮住后面渲染的图片

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            border: 10px dashed #000;
            background:  url(image/heihei.jpg) 0 0 no-repeat,url(image/hehe.png) right bottom no-repeat,url(image/11051156_1536_864.jpg) no-repeat;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

[/blockquote]

3.背景大小

background-size:值

  • 当只有一个值的情况下,宽度实现拉伸,并且高度会保持等比例,可以支持px,也可以支持百分比,百分比参照的是这个盒子本身的宽度
  • 当有两个值的情况下,宽度和高度会分别拉伸到对应的值,可能会变形,可以支持px,也可以支持百分比,百分比参照的是这个盒子本身的宽度
  • contain 当图片的宽度或者是高度在缩放的时候有一个“碰到”了盒子的边缘,则停止变化,(宽度或高度满足一个即可)
  • 在contain的基础上保证不留白,这就是cover的效果(宽度和高度都需要满足)

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            border: 10px dashed #000;
            background:  url(image/Aatrox_1.jpg) 0 0 no-repeat;
            /* 一个值的情况下,宽度会进行拉伸,高度会保持等比例 */
            /* 两个值的情况下,宽度和高度都会拉伸,可能会产生变形 */
            /* 可以接受百分比  百分比参照的是盒子的宽和高 */
            /* contain 当图片的宽度或者是高度有一个达到了最大值,整体停止缩放 可能会带来留白呀*/
            /* cover 在contain的基础上,保持不留白,继续放大,知道另外一个边也得到最大值 */
            background-size:cover;

            /* 预告: background-size会在自适应页面里面用到,在全屏轮播图里面用到 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

[/blockquote]

盒子内减box-sizing

之前我们的盒子的实际宽度是 实际宽度 = width + padding + border,而内减属性会自动帮我们减去padding和border值 ,所以用了内减的盒子实际宽度就等于width,至于padding和border的值会自动被width内减掉。

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            margin: 10px auto;
        }
        div:nth-child(2){
            padding: 10px;
        }
        div:nth-child(3){
            padding: 10px;
            border: 10px solid hotpink;
        }
        div:nth-child(4){
            padding: 10px;
            border: 10px solid hotpink;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <!-- 一个盒子真正的实际宽度包括 Border + padding + width   
        在css3中,可以借助于border-sizing去实现盒子自动内减,有两个值 
        broder-box 
        content-box

        broder-box 内减掉边框和padding
        content-box 是默认值 该是多少就是多少
    -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</body>
</html>

[/blockquote]

渐变

1.线性渐变

background:-webkit-linear-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 10px auto;
            /* 线性渐变      
                语法:background:linear-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);    
                (1)需要添加私有前缀 
                (2)第一个参数,起始位置  可以接受方位名词 也可以是一个点
                    也可以是deg 角度  控制的是渐变线的角度 正值是逆时针,负值是顺时针
                (3)颜色 可以是任意颜色     
            */
            background: -webkit-linear-gradient(45deg,red 20%,green 60%,blue);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

[/blockquote]

2.径向渐变

background:-webkit-radial-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 10px auto;
            /* 径向渐变 
                语法:background:radial-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);    
                (1)需要添加私有前缀 
                (2)第一个参数,起始位置  可以接受方位名词 也可以是一个点
                    也可以是像素  不接受deg
                (3)颜色 可以是任意颜色    
            */
            background: -webkit-radial-gradient(150px 150px,red 20%,green 60%,blue 10%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

[/blockquote]

总结:

  1. 两种渐变的参数都是一样的 ,起始位置都接受方位名词
  2. 线性渐变的起始位置还能接受deg 角度 径向渐变不能接受deg但是接受px
  3. 需要添加私有前缀
  4. 颜色位置的取值遵守递增的关系

私有前缀

作用:兼容低版本的一些高级浏览器,或者一些特定的css3属性需要添加私有前缀才起作用 每一条css3属性合理来说都需要添加对应浏览器的前缀,以保证其兼容性

  • 谷歌 苹果:-webkit
  • 火狐:-moz-
  • IE:-ms-
  • o:-o-

注意:在手机端,一般来说只需要写一个-webkit-(针对国内的绝大部分手机端)

添加的位置:大部分都是直接添加到最前面,css2没有的属性都是添加在最前面的,有一些是css2就有的属性是添加在后面的(例如:background:-webkit-linear-gradient())

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

[/blockquote]

相关推荐