1.关于CSS3
CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。
文本,背景,动画,2d 3d转换伸缩布局,多列布局
在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。
前缀 浏览器
-webkit chrome和safari
-moz firefox
-ms IE
-o opera
CSS3给我们带来了什么好处呢?简单的说,CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影,过渡、动画等。CSS3简化了前端开发工作人员的设计过程,加快页面载入速度。
2:选择器
CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
2.1 属性选择器
其特点是通过属性来选择元素,具体有以下5种形式:
E[attr] 存在attr属性即可
E[attr=val] 属性值完全等于val
E[attr*=val] 属性值里包含val字符并且在“任意”位置
E[attr^=val] 属性值里包含val字符并且在“开始”位置
E[attr$=val] 属性值里包含val字符并且在“结束”位置
img[alt] {
margin: 10px;
}
</style>
<img src="image1.jpg" alt="" />
<img src="image3.jpg" />
选择具有att属性并且属性值等于val的元素
input[type="text"] {
border: 2px solid #000;
}
</style>
<input type="text" />
<input type="submit" />
2.2选择器属性
div[class~="a"] {
border: 2px solid #000;
}
</style>
<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>
选择具有att属性且属性值为以val开头的字符串的E元素。
<style>div[class^="a"] {
border: 2px solid #000;
}
</style>
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
选择具有att属性且属性值为以val结尾的字符串的E元素。
div[class$="c"] {
border: 2px solid #000;
}
</style>
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
选择具有att属性且属性值为包含val的字符串的E元素。
<style>div[class*="ab"] {
border: 2px solid #000;
}
</style>
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
2.2 伪类选择器
E:first-child 其父元素的第1个子元素
E:last-child 其父元素的最后1个子元素
E:nth-child(n) 其父元素的第n个子元素
E:nth-last-child(n) 其父元素的第n个子元素(倒数)
E:nth-of-type(n) 同一父元素的第n个E元素
n遵循线性变化,其取值0、1、2、3、4、...
n可是多种形式:nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等;
注:指E元素的父元素,并对应位置的子元素必须是E
li:first-child {
color: red;<sty
}
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
2.2.2、E:last-child:其父元素的最后一个子元素,且子元素必须是E
p:last-child{color:#f00;}
<div>
<h2>我是一个标题</h2>
<p>我是一个p</p>
</div>
2.2.3、E:nth-child(n):其父元素的第n个子元素,且子元素必须是E
<style>
li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
</style>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
因为(n)代表一个乘法因子,可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数,而(2n+1)换算出来会是奇数
HTML示例代码:
<div>
<p>第1个p</p>
<p>第2个p</p>
<span>第1个span</span>
<p>第3个p</p>
<span>第2个span</span>
<p>第4个p</p>
<p>第5个p</p>
</div>
CSS Case 1:
p:nth-child(2){color:#f00;}
很明显第2个p会被命中然后变成红色
CSS Case 2:
p:nth-child(3){color:#f00;}
这是会命中第3个p么?如果你这么认为那就错了,这条选择符就不会命中任何一个元素。
CSS Case 3:
p:nth-child(4){color:#f00;}
这时你以为会命中第4个p,但其实命中的却是第3个p,因为它是第4个子元素
2.2.4:E:nth-last-child(n) 其父元素的倒数第n个元素
<div>
<p>第1个p</p>
<p>第2个p</p>
<span>第1个span</span>
<p>第3个p</p>
<span>第2个span</span>
</div>
如上HTML,假设要命中倒数第一个p(即正数第3个p),那么CSS选择符应该是:
p:nth-last-child(2){color:#f00;}
而不是:
p:nth-last-child(1){color:#f00;}
因为倒数第1个p,其实是倒数第2个子元素。
2.2.5 nth-of-type(n)
odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。
在这里,我们为奇数和偶数 p 元素指定两种不同的背景色:
p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}
实例 2
使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。
在这里,我们指定了下标是 3 的倍数的所有 p 元素的背景色:
p:nth-of-type(3n+0)
{
background:#ff0000;
}
2、空伪类
E:empty 选中没有任何子节点的E元素;(使用不是非常广泛)
p{
background: orange;
min-height: 30px;
}
p:empty {
display: none;
}
<p>我是一个段落</p>
<p> </p>
<p></p>
4、排除伪类
E:not选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。就拿form元素来说,比如说你想给表单中除submit按钮之外的input元素添加红色边框,CSS代码可以写成:
form {
width: 200px;
margin: 20px auto;
}
div {
margin-bottom: 20px;
}
input:not([type="submit"]){
border:1px solid red;
}
2.3伪元素选择器
p {
width: 200px;
padding: 5px 10px;
border: 1px solid #ddd;
font: 14px/1.5 simsun;
}
p::first-letter {
float: left;
font-size: 40px;
font-weight: bold;
line-height: 1;
}
<h1>杂志常用的首字下沉效果</h1>
<p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>
2、E::first-line 文本第一行;
p {
width: 200px;
padding: 5px 10px;
border: 1px solid #ddd;
font: 14px/1.5 simsun;
}
p::first-line {
color: #090;
}
<h3>第一行文字的颜色与其它不同</h3>
<p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>
3、E::selection 可改变选中文本的样式;
p::selection {
background: #000;
color: #f00;
}
<h1>选中下面的文字,看看它的颜色</h1>
<p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用。</p>
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。
p::before {
background: #fff;
color: red;
content: "如果你的能看到这段文字,说明你的浏览器支持E:before和E::before";
font-size: 14px;
}
p::after {
background: #fff;
color: pink;
content: "如果你的能看到这段文字,说明你的浏览器支持E:after和E::after";
font-size: 14px;
}
<p>我是一个段落</p>
E:after、E:before 在旧版本里是伪元素,CSS3的规范里“:”用来表示伪类,“::”用来表示伪元素,但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before,这样做的目的是用来做兼容处理。
E:after、E:before后面的练习中会反复用到,目前只需要有个大致了解
":" 与 "::" 区别在于区分伪类和伪元素
2.4颜色
Red、Green、Blue、Alpha即RGBA
R、G、B 取值范围0~255,A为透明度参数,取值在0~1之间,不可为负值。
Hue、Saturation、Lightness、Alpha即HSLA
不同的颜色表示方法其取值也不相同,具体如下:
H 色调 取值范围0~360,0/360表示红色、120表示绿色、240表示蓝色
S 饱和度 取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度 取值范围0~1
RGBA、HSLA可应用于所有使用颜色的地方。
background-color: rgba(100, 200, 20, 0.5);
background-color: hsla(100, 80%, 80%, 0.5);
关于CSS透明度:
1、opacity只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度;
2 、transparent 不可调节透明度,始终完全透明
div {
background: red;
}
.test {
/* background: opacity;*/
background: transparent;
}
<div class="test">看看各带color的属性设置为transparent时的效果</div>
p:nth-of-type(5) { visibility:hidden;} 隐藏,原来位置会被保留
p:nth-of-type(6){ display:none;} 隐藏,原来位置不会被保留
2.4 文本
1:text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。
Font line-height text-indent(首行缩进) text-align:center text-decoration
text-indent:50px; 可以为负值。
但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果
2:文本阴影:
text-shadow可以用来设置文本的阴影效果。
语法:text-shadow: X-Offset Y-Offset blur color;
X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;
Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;
Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;有单位:px
Color:是指阴影的颜色,其可以使用rgba色。
比如,我们可以用下面代码实现设置阴影效果。
.demo {
width: 340px;
padding: 30px;
font: bold 55px "微软雅黑";
background: #C5DFF8;
text-shadow: 2px 2px 0 red;
}
2. 边框
其中边框圆角、边框阴影属性,应用十分广泛,兼容性也相对较好,我们需要重点掌握。
1.圆角边框
border-radius
圆角处理时,脑中要形成圆、圆心、横轴、纵轴的概念,正圆是椭圆的一种特殊情况。如下图
为了方便表述,我们将四个角标记成1、2、3、4,如2代表右上角,CSS里提供了border-radius来设置这些角横纵轴半径值。
支持简写模式,具体如下:
1、border-radius: 10px; 表示四个角的横纵轴半径都为10px;
2、border-radius: 10px5px; 表示1和3角横纵轴半径都为10px,2和4角横纵轴半径为5px;
3、border-radius: 10px 5px8px; 表示1角模纵轴半径都为10px,2和4角横纵轴半径都为5px,3角的横纵轴半径都为8px;
4、border-radius: 10px 8px6px 4px; 表示1角横纵轴半径都为10px,表示2角横纵轴半径都为8px,表示3角横纵轴半径都为6px,表示4角横纵轴半径都为6px;
.circle {
width: 100px;
height: 100px;
background-color: aqua;
/* 四个圆角值都设置为宽度或者高度的一半,显示一个圆*/
border-radius:50%;/* 设置为50%,显示一个椭圆(宽高不一样时)*/
border-radius: 50px;
}
.square {
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 20px;
}
.irregular {
width: 100px;
height: 100px;
background-color: red;
/* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
border-radius: 10px 5px 20px 15px;
}
/* 上半圆,高度为宽度的一半,边框只加上半部分*/
.half-circle {
width: 100px;
height: 50px;
/* 空心 border: 1px solid red;*/
background-color: green;
border-radius: 50px 50px 0 0;
}
.left-circle {
width: 50px;
height: 100px;
background-color: gold;
border-radius: 50px 0 0 50px;
}
2. 边框阴影
box-shadow
与文字阴影类似,可分别设置盒子阴影偏移量、模糊度、颜色(可设透明度)。
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
如box-shadow: 5px 5px 5px #CCC
1、水平偏移量 正值向右 负值向左;
2、垂直偏移量 正值向下 负值向上;
3、模糊度是不能为负值;
4、inset可以设置内阴影;
注:设置边框阴影不会改变盒子的大小,即不会影响其兄弟元素的布局。可以设置多重边框阴影,实现更好的效果,增强立体感,实际开发中可以大胆使用。
.outset {
width: 100px;
height: 100px;
/* x 偏移量 y偏移量 阴影模糊半径 阴影扩展半径 阴影颜色*/
box-shadow: 10px 2px 20px;
}
/* 内阴影*/
.inset {
width: 100px;
height: 100px;
/* x 偏移量 y偏移量 阴影模糊半径 阴影扩展半径 阴影颜色*/
box-shadow: 10px 2px 20px inset;
}
/* 阴影x为负数*/
.negative1 {
width: 100px;
height: 100px;
box-shadow: -10px 2px 6px red;
}
/* 阴影y为负数*/
.negative2 {
width: 100px;
height: 100px;
box-shadow: 4px -10px 6px red;
}
/* 多阴影*/
.multi {
width: 100px;
height: 100px;
/*如果需要添加多个阴影只需要用逗号隔开*/
box-shadow: 4px 2px 20px red, -4px -2px 6px green, 0px 0px 12px 5px blue inset;
}
3. 渐变
渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。1.1 线性渐变
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果,如下图是从黄色渐变到绿色。
1、必要的元素:
a、方向
b、起始色
c、终止色
2、关于方向
设置渐变方向,可以用关键字如to top、to right,也可以用角度(正负值均可)如45deg、-90deg等,当以角度做为参数时,可参照下图来使用,0deg从下往上,90deg从左向右,进而可以推算出180deg从上向下。#grad {
height: 100px;
background: linear-gradient(red, blue);
}
/* 从左到右的渐变*/
#right-grad {
margin-top: 50px;
height: 100px;
background: linear-gradient(to right, red, blue);
}
/* 从左上角到右下角*/
#angles-grad {
margin-top: 50px;
height: 100px;
background: linear-gradient(to bottom right, red, green);
}
/* 多种颜色的渐变*/
#colorful-grad {
margin-top: 50px;
height: 100px;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
/* 带透明度渐变*/
#transparency-grad {
margin-top: 50px;
height: 100px;
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 0, 1));
}
/* 重复颜色的渐变*/
#repeat-grad {
margin-top: 50px;
height: 100px;
/*表示百分之10的地方是红色,百分之30的地方是绿色*/
background: linear-gradient(to right, red 10%, green 30%);
radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
径向渐变由它的中心定义。
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是ellipse(表示椭圆形),渐变的大小是farthest-corner(表示到最远的角落)。
写在最后
关于渐变不同浏览器有不同的版 本,即语法格式不一样,我们以最新语法为准,可自行查找资料了解即可。
.
#radial-grad {
margin-top: 50px;
height: 100px;
width: 200px;
background: radial-gradient(circle, red, yellow, green);
}
#radial-grad1 {
margin-top: 50px;
height: 100px;
width: 200px;
/*默认是椭圆的径向*/
background: radial-gradient(ellipse, red 10%, green 30%, blue);
}
最后,文字跑马灯效果
behavior属性的参数值为alternate、scroll、slide中的一个,分别表示文字来回滚动、单方向循环滚动、只滚动一次,需要注意的是:如果在<marquee>标签中同时出现了direction和behavior属性,那么scroll和slide的滚动方向将依照direction属性中参数的设置。
alternate |
来回滚动 |
scroll |
单方向循环滚动 |
slide |
只滚动一次 |
bgcolor属性-文字滚动范围的背景颜色
direction属性
文字滚动的方向,属性的参数值有down、left、right、up共四个单一可选值,分别代表滚动方向向下、向左、向右、向上
width和height属性
width和height属性的作用决定滚动文字在页面中的矩形范围大小。width属性用以规定矩形的宽度,height属性规定矩形的高度。这两个属性的参数值可以是数字或者百分数,数字表示矩形所占的(宽或高)像素点数,百分数表示矩形所占浏览器窗口的(宽或高)百分比。如下所示:
<marquee width="300px"height="30px" bgcolor="red">我宽300像素,高30像素。</marquee>
loop属性
loop属性决定滚动文字的滚动次数,缺省是无限循环。参数值可以是任意的正整数,如果设置参数值为-1或infinite时将无限循环。如下所示:
<marquee loop="2">我滚动2次。</marquee>
<marquee loop="infinite">我无限循环滚动。</marquee>
<marquee loop="-1">我无限循环滚动。</marquee>
crollamount和scrolldelay属性
这两个属性决定文字滚动的速度(scrollamount)和延时(scrolldelay),参数值都是正整数。如下所示:
<marqueescrollamount="100">我速度很快.</marquee>
<marquee scrollamount="50">我慢了些。</marquee>
<marquee scrolldelay="30">我小步前进。</marquee>
<marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>