CSS3初步
一、CSS与CSS3的区别
非常简单，CSS代表“Casading Style Sheets”，就是样式表，是一种替代并为网站添加样式的标记性语言。现在所使用的CSS基本是在1998年推出的CSS2的基础上发展而来的。10年前在internet开始普及的时候，就能够使用样式表对网页进行视觉效果的统一编辑，但是在10年间CSS基本没有什么太大的变化，一直到2010年终于推出了一个全新的版本---CSS3 。CSS3只是表示下一代CSS，3只是版本号，css3在css2.1版本上加入了一些新特性。 CSS3到底给我们带来了哪些新特性呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影等。CSS3不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。
二、CSS3 的新特性
圆角效果
图形化边界
块阴影与文字阴影
使用 RGBA 实现透明效果
渐变效果
使用 @Font-Face 实现定制字体
多背景图
文字或图像的变形处理（旋转、缩放、倾斜、移动）
多栏布局
媒体查询
三、CSS3技术概述
CSS3选择器
CSS3文字与文字相关样式
CSS3盒相关样式
CSS3背景与边框相关样式
CSS3中的变形处理
CSS3布局相关样式
CSS3媒体查询（Media Queries）
CSS3颜色相关样式
CSS3渐变
四、CSS3选择器
1. 属性选择器
[att=“value”] 匹配属性等于某特定值的元素
[att^="value"] 匹配属性包含以特定的值开头的元素
[att$="value"] 匹配属性包含以特定的值结尾的元素
[att*=“value”] 匹配属性包含含有特定的值的元素
2、伪元素
伪元素选择器不是针对真正的元素使用的选择器，而是针对css中已定义好的伪元素 使用的选择器，
css中有如下四种 first-line，first-letter，before，after
例如：p:first-line{color:red;},p:after{content：”内容”}
|
1
2
3
|
<p>今儿天气可以！！<br /> 今儿天气可以！！<br /> 今儿天气可以！！<br /></p> |
3、结构性伪类选择器
在css3中引入的结构行伪类选择器的共同特性是允许开发者根据文档树中的结构来指 定元素样式。
:root :not :empty :target
:nth-child(n) :nth-last-child(n)
:only-child :first-child :last-child
详解：
1. root :root 伪类选择页面的根元素。十有八九根节点是 <html> 元素，例如： :root { }
2. not :not 想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素。例如： body *:not(h1) { }
3.empty empty 当元素内容为空时被选中。例如： :target 目标 当跳转到目标是进行改变 :empty { }
4.target 例如： :target 目标 当跳转到目标是进行改变
|
1
2
3
4
5
6
7
8
9
10
|
<table> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td></td> </tr> </table> |
|
1
2
3
4
5
6
7
8
9
10
|
<a href="#html">html</a> <a href="#jsp">jsp</a> <div id="html"> <h3>this is html</h3> </div> <div id="jsp"> <h3>this is jsp</h3> </div> |
|
1
2
3
4
5
6
|
<ul> <li>今儿天气可以！！</li> <li class="la">今儿天气可以！！</li> <li>今儿天气可以！！</li> <li>今儿天气可以！！</li></ul> |
|
1
2
3
4
5
6
7
|
<ul> <li>今儿天气可以！！</li> <li class="la">今儿天气可以！！</li> <li><p>哈哈</p></li> <li>今儿天气可以！！</li> <li>今儿天气可以！！</li> </ul> |
五、CSS3渐变效果
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue))
渐变的类型? (linear)
渐变起头的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
起头的颜色? (from(red))
竣事的颜色? (to(blue))
background:-webkit-linear-gradient(top, red, blue);
请注重我们将渐变的类型——linear——放到了属性前缀中了
渐变从哪里起头 ? (top – 我们也可以使费用数，好比 -45deg)
起头的颜色? (red)
竣事的颜色? (blue)
|
1
|
<div class="div"></div> |
六、CSS3文字阴影
|
1
2
3
4
5
6
|
<p class="p"> 今天天气不错，非常适合提前放学1节课<br> 今天天气不错，非常适合提前放学2节课<br> 今天天气不错，非常适合提前放学3节课<br> 今天天气不错，非常适合提前放学4节课<br> </p> |
CSS3初步的更多相关文章
- CSS3 初步学习
CSS3有一些是与旧版CSS2.1重叠的,有一些是没有浏览器支持的,全学没必要,下面只记录一下有用的. 一.CSS3边框 1.圆角border-radius border-radius:值越大,角越圆 ...
- 移动端之Android开发的几种方式的初步体验
目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式 开发环境 是否需要AndroidSDK 支持跨平台 开发语言&技能 MUI Win+ ...
- [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 （二）
[入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date 周六 10 一月 2015 By 钟谢伟 Category website develop ...
- CSS3动画属性Transform解读
无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经 烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅 ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- CSS3选择器——基本选择器
CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选 ...
- CSS3制作动画的三个属性
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...
- CSS3 Border-image
CSS3中有关于border的属性我们一起学习完了圆角border-radius和边框颜色border-color,只剩下最后一个边框图片border-image.今天我们就一起来学习这个border ...
- CSS3打造3D效果——perspective transform的深度剖析
声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...
随机推荐
- JSP通过SmartUpload上传文件实例
httpRequest.setCharacterEncoding("gbk"); String preName = genName.doMake();//设置文件前缀名 Strin ...
- 重载operator new实现检测内存泄漏是否可行
行与不行,就凭我这水平,说出来未免显示太过自大.不还,我还想根据自己的代码来讨论这个问题. 重载operator new来检测内存只的办法,那就是在new的时候记录指针地址及文件名.行号,在delet ...
- pyqt 同时勾选多个items(网友提供学习)
框选多个item之后,用空格键可以勾选/去选多个item,效果如下图所示: http://oglop.gitbooks.io/pyqt-pyside-cookbook/list/img/checkbo ...
- Bin & Jing in wonderland(概率，组合数学)
Problem 2103 Bin & Jing in wonderland Accept: 201 Submit: 1048 Time Limit: 1000 mSec Memor ...
- 用户向导页面实现左右滑动的ImageSwitcher
当你第一次打开app时刻,通常有使用向导现在演示APK基本功能和用法,该向导是非常重要的,用户可以知道并调整到速度app如何. 实现此使用向导有非常多种方法,比方用ImageSwitcher.View ...
- js获取名字为XX的标签
$("input[name='XX']"); <input name="address_select" type="radio" va ...
- SQLLoader3(数据文件没有分隔符时的导入)
数据文件:D:\oracletest\ldr_tab_fiile.dat1.数据文件字段中间以制表符TAB隔开:7369 SMITH CLERK7499 ALLEN SALESMAN7521 WARD ...
- html_day2
总结下今天学的HTML知识.单词 跑马灯标记 <marquee></marquee>属性: direction:滚动的方向 取值:left .right. up. down b ...
- C#实现防拷贝工具示例
思路是用加密程序 对硬盘号,cpu号和MAC号取出字符串并加密 产生一个序列号 每次程序启动后重新产生这个序列号并比对,如果一致则验证通过 using System;using System.Coll ...
- JS闭包（一）
闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包的常见方法:在一个函数内部创建另一个函数. 对彻底理解闭包,需要知道如何创建作用域链以及作用域链有什么作用的细节. 闭包的功能: 保存函数执行 ...