css3和html5新特性

来源：互联网发布：设置php.ini路径编辑：程序博客网时间：2024/04/29 07:18

7.14 css3新特性

1.css3选择器
① 属性选择器（IE7及以上支持）
E[attr]只使用属性名，但没有确定任何属性值
E[type=”text”]指定属性名，并指定了该属性的属性值
E[attr~=”value”]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
E[attr^=”value”]指定了属性名，并且有属性值，属性值是以value开头的
E[attr$=”value”]指定了属性名，并且有属性值，而且属性值是以value结束的
E[attr*=”value”]指定了属性名，并且有属性值，而且属值中包含了value
E[attr|=”value”]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）

<style type="text/css">        body{            padding: 0;            margin: 0;        }        .box{            width: 1500px;            height: 150px;            border: 1px solid black;            margin: 0 auto;            margin-top: 150px;            display: flex;            justify-content:space-around;            padding-top: 20px;        }        .a1{            width:130px;            height: 130px;            background-color:red;            border-radius:50%;            text-align: center;            font-size: 40px;        }        .a1[id]{            background-color: #ff00de;        }        .a1[lang="add"]{            background-color: blue;        }        .a1[title~="ad"]{            background-color: aqua;        }        .a1[]    </style>

<div class="box">    <a class="a1" id="a" >1</a>    <a class="a1" title="b" >2</a>    <a class="a1" id="c">3</a>    <a class="a1" title="d" >4</a>    <a class="a1" id="e" lang="add">5</a>    <a class="a1" id="f" lang="eee">6</a>    <a class="a1" target="baa">7</a>    <a class="a1" title="ad dfg" >8</a>    <a class="a1" target="dcc" >9</a>    <a class="a1" title="ad sdf"  >10</a></div>

这里写图片描述

总结：属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配。
E[attr=”value”]和E[attr*=”value”]是最实用的，其中E[attr=”value”]能帮我们定位不同类型的元素，特别是表单form元素的操作，而E[attr*=”value”]能在网站中帮助我们匹配不同类型的文件。

②结构性伪类

E:nth-child(n) 表示E的父元素中的第n个子节点，且类型为E
p:nth-child(odd){background:red}/匹配奇数行/
p:nth-child(even){background:red}/匹配偶数行/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n个子节点，从后向前计算，且类型为E
E:nth-of-type(n) 表示E父元素中的第n个E子节点
E:nth-last-of-type(n)表示E父元素中的第n个E子节点，从后向前计算
E:empty 表示E元素中没有子节点。注意：包含文本节点
E:first-child 表示E父元素中的第一个子节点，且类型为E
E:last-child 表示E父元素中的最后一个子节点，且类型为E
E:first-of-type 表示E父元素中的第一个E子节点
E:last-of-type 表示E父元素中的最后一个E子节点
E:only-child表示E父元素中只有一个子节点。注意：不包含文本节点
E:only-of-type 表示E父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：不包含文本节点

这里写图片描述

 a:nth-child(3){            background-color:pink;        }        a:nth-child(odd){            background-color: black;            color: green;        }        a:nth-child(even){            background-color: green;            color: aqua;        }        a:nth-last-child(3){            background-color: blue;        }

这里写图片描述

③伪类

target:当浏览器地址里的href(地址里#号后面的部分)和:target伪选择器指定的ID匹配上时，它的样式就会在这个ID元素上生效。

E:target 表示当前的URL片段的元素类型（id被a的href链接并被点击），这个元素必须是E
E:disabled 表示不可点击（获取焦点）表单控件
E:enabled 表示可点击（获取焦点）的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符

<style type="text/css">        form{            width: 160px;            height: 200px;            border: 1px solid black;        }        li{           width: 160px;            height:60px ;            background-color: indigo;            margin-bottom: 4px;        }        p{           width: 100px;            height: 70px;            background-color: dimgray;        }        li:target{            color: blue;            background-color: yellowgreen;        }        form:first-line{            background-color: violet;        }    </style>

<body><p><a href="#new1">选一</a></p><p><a href="#new2">选二</a></p><p><a href="#new3">选三</a></p><form>    <li id="new1">1</li>    <li id="new2">2</li>    <li id="new3">3</li></form></body>

这里写图片描述

用伪类选择符（E:checked）实现多选框

 <style type="text/css">        input:checked+span{            background-color: red;        }        input:checked+span:after{            content: "选我";        }    </style>

    <ul>        <li><input type="checkbox" value="0" /><span>蓝色</span></li>        <li><input type="checkbox" value="1" /><span>红色</span></li>        <li><input type="checkbox" value="2" /><span>黑色</span></li>    </ul>

效果

这里写图片描述

E::selection表示E元素在用户选中文字时,只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性).
E::before 生成内容在E元素前
E::after 生成内容在E元素后
Content 属性，配合before和after使用
E:not(s) 表示E元素不被匹配（s是标签名）
E~F表示E元素毗邻的F元素（之后的同级，类似于nextAll()）

用伪类选择符（E::selection）

<style type="text/css">        p{            font-size: 15px;        }        p::selection{            color: #ff00de;            background-color: indigo;        }        p::before{            content: "插入文字";            background-color: yellowgreen;        }        p::after{            content: "不选就算了";            background-color: yellowgreen;        }    </style>

这里写图片描述

2.新增颜色模式
Rgba
r Red 红 0-255
g Green 绿 0-255
b Blue 蓝 0-255
a Alpha 透明 0-1

3.文字阴影（text-shadow）
text-shadow 的属性：text-shadow:x y blur color, …
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

①外发光

<style type="text/css">        body{            padding: 0;            margin: 0;        }        h1{            margin-left:400px;            margin-top: 100px;            font-size: 60px;            color: blueviolet;            text-shadow:  0 0 20px red;        }    </style>

②辉光效果

 <style type="text/css">        body{            padding: 0;            margin: 0;        }        h1{            margin-left:400px;            margin-top: 100px;            font-size: 60px;            color: blueviolet;            text-shadow: 0 0 5px #fff,               0 0 10px #fff,               0 0 15px #fff,               0 0 40px #ff00de,               0 0 70px #ff00de;        }    </style>

这里写图片描述

4.文本功能
①direction：属性规定文本的方向 / 书写方向。（direction：rtl）

rtl 从右向左排列

ltr 从左向右排列

注意要配合unicode-bidi 一块使用

②text-overflow ：属性规定当文本溢出包含元素时发生的事情。

clip 无省略号

ellipsis 省略号

注意配合overflow:hidden和white-space:nowrap（规定段落中的文本不进行换行）一块使用

5.盒模型阴影（box-shadow）
box-shadow：给元素块添加周边阴影效果,可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开。(text-shadow是给文本添加阴影效果)
属性至多有6个参数设置

阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；设置阴影类型为“inset”时，其投影就是内阴影；

X-offset:是指阴影水平偏移量，其值可以是正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；

Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数是可选值，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小

阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的chrome浏览器为无色，也就是透明，建议不要省略此参数。

兼容问题：Mozilla内核的要加-moz，webkit内核的加-webkit。最新版的Firefox和Google Chrome浏览器都无需加前缀。
①单边效果

<style type="text/css">        body{            padding: 0;            margin:0;        }        .shadow{            width: 150px;            height: 150px;            margin: 0 auto;            margin-top: 100px;            background-color: plum;            -moz-box-shadow:-2px 0 3px red ,              0 -2px 3px green,              2px 0 3px blue,              0 2px 3px yellow;            box-shadow: -2px 0 3px red ,            0 -2px 3px green,            2px 0 3px blue,            0 2px 3px yellow;            -webkit-box-shadow:-2px 0 3px red ,            0 -2px 3px green,            2px 0 3px blue,            0 2px 3px yellow;        }    </style>

这里写图片描述

②四边具有相同的阴影效果

 <style type="text/css">        body{            padding: 0;            margin:0;        }        .four{            width: 150px;            height: 150px;            margin: 0 auto;            margin-top: 100px;            background-color: plum;            box-shadow: -2px 0 8px red ,            0 -2px 8px red,            2px 0 8px red,            0 2px 8px red;    </style>

这里写图片描述

6.倒影

direction 方向 above|below|left|right;

距离

渐变（可选）

-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);

resize 自由缩放

both 水平垂直都可以缩放

horizontal 只有水平方向可以缩放

vertical 只有垂直方向可以缩放

注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放

7.实现圆角( border-radius)

border-radius可分为多个属性值（默认方向顺时针）

border-radius-top-left /左上角/

border-radius-top-right /右上角/

border-radius-bottom-right /右下角/

border-radius-bottom-left /左下角/

单个属性值
代码如下

<style type="text/css">        .box{            width: 200px;            height: 200px;            background-color: plum;            border-radius:10px;        }    </style>

效果图
这里写图片描述

多个属性值

<style type="text/css">        .box{            width: 200px;            height: 200px;            background-color: plum;            border-radius:10px 10px 0px 50px ;        }    </style>

效果图
这里写图片描述

border-radius的优势不仅仅在制作圆角的边框，还是利用border-radius属性来画圆和半圆。

① 半圆

<style type="text/css">        .semi-circle{            width: 200px;            height: 100px;/*高度是宽度的一半*/            background-color: plum;            border-radius:100px 100px 0 0;/*左上和右下至少为高度值*/        }    </style>

这里写图片描述

②实心圆
将四个角设置为高度或宽度的一半

<style type="text/css">        .circle{            width: 200px;            height: 200px;            background-color: plum;            border-radius: 50%;        }    </style>

这里写图片描述

阅读全文

0 0