什么是CSS，什么是CSS3？

非常简单，CSS代表“Casading Style Sheets”，就是样式表，是一种替代并为网站添加样式的标记性语言。现在所使用的CSS基本是在1998年推出的CSS2的基础上发展而来的。10年前在internet开始普及的时候，就能够使用样式表对网页进行视觉效果的统一编辑，但是在10年间CSS基本没有什么太大的变化，一直到2010年终于推出了一个全新的版本---CSS3 。CSS3只是表示下一代CSS，3只是版本号，css3在css2.1版本上加入了一些新特性。

CSS3新特性

圆角效果
图形化边界
块阴影与文字阴影
使用 RGBA 实现透明效果
渐变效果
使用 @Font-Face 实现定制字体
多背景图
文字或图像的变形处理（旋转、缩放、倾斜、移动）
多栏布局
媒体查询

CSS3技术概述

CSS3选择器
CSS3文字与文字相关样式
CSS3盒相关样式
CSS3背景与边框相关样式
CSS3中的变形处理
CSS3布局相关样式
CSS3媒体查询（Media Queries）
CSS3颜色相关样式
CSS3渐变

CSS3选择器

选择器
      CSS选择器是个难以置信地强大的工具：它们允许我们在标签中指定特定的HTML元素而不必使用多余的 class、 ID 或JavaScripts。而且它们中的大部分并不是CSS3中新添加的，而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离，高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。

1.   属性选择器
[att=“value”] 匹配属性等于某特定值的元素
[att^="value"] 匹配属性包含以特定的值开头的元素
[att$="value"] 匹配属性包含以特定的值结尾的元素
[att*=“value”] 匹配属性包含含有特定的值的元素
实例：

a[title$="tweetCC"] {

position: absolute;   
top: 0;

right: 0;

display: block;

width: 140px;

height: 140px;

}
浏览器支持:
        只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你样式中使用属性选择器是比较安全的

案例：

伪类选择器
 伪类选择器是css中已经定义好的选择器，不能随便起名常用的伪类选择器是使用在
 a元素上的几种，如：a:link,a:visited,a:hover,a:active.

伪元素
 伪元素选择器不是针对真正的元素使用的选择器，而是针对css中已定义好的伪元素
 使用的选择器，css中有如下四种 first-line，first-letter，before，after
 例如：p:first-line{color:red;},p:after{content：”内容”}

效果：

结构性伪类选择器
 在css3中引入的结构行伪类选择器的共同特性是允许开发者根据文档树中的结构来指
 定元素样式。
:root    :not    :empty :trget
:nth-child(n)  :nth-last-child(n)
:only-child
:first-child  :last-child
详解：
1. root
 :root 伪类选择页面的根元素。十有八九根节点是 <html> 元素，例如：
 :root { background-color: pink; }

2. not
 :not 想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素。例如：
 body *:not(h1) { background-color: pink; }
3.empty                                                                       
 :empty 当元素内容为空时被选中。例如：                     
 :empty { background-color: pink; }                            
 <table>
 <tr><td>a</td><td>b</td></tr>
 <tr><td>c</td><td></td></tr>
 </table>

4.target
:target目标 当跳转到目标是进行改变
  例如:   :target h3{color:pink}

5.nth-child(n)和nth-last-child(n)
第一种： 简单数字序号写法
 :nth-child(number)：直接匹配第number个元素。参数number必须为大于0的整数。例如：
 li:nth-child(3){background:orange;} /*把第3个LI的背景设为橙色*/
 :nth-last-child(n)与上个选择器的思想同样，但是从后面匹配元素

第二种：倍数写法
 :nth-child(an):匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。
 例子：
 li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

第三种：倍数分组匹配
 li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
第四种：奇偶匹配
 :nth-child(odd) 与 :nth-child(even)
 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)(2n)结果一样。

第五种 nth-of-tyoe（） 为了解决在同一级别出现其他标签导致找不到想要的元素。
   

6.last-child 用于选择父元素下的最后一个子节点。例如：
 li { border-bottom: 1px solid #ccc; }
 li:last-child { border-bottom: none; }

7.first-child 用法同last-child相同，用于选择父元素下的第一个子节

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)

简单文字阴影：

初次了解CSS3的更多相关文章

  1. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  2. CSS3 动画一瞥

    伴随HTML5而来的CSS3让前端大湿们可以用简单的CSS样式即可写出动画效果来,而在这之前,一提到动画我们可能会想到JavaScript,Flash,Java插件等.如果是用JavaScript那倒 ...

  3. 转载：CSS3 Flexbox可视化指南

    0. 目录 目录 引言 正文 1 引入 2 基础 3 使用 4 弹性容器Flex container属性 41 flex-direction 42 flex-wrap 43 flex-flow 44 ...

  4. 超赞的CSS3进度条 可以随进度显示不同颜色

    原文:超赞的CSS3进度条 可以随进度显示不同颜色 现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...

  5. css3 弹性效果上下翻转demo

    最近扒了一个有弹性效果上下翻转demo 上图: 上代码: <!DOCTYPE html> <html lang="en"> <head> < ...

  6. CSS3 选择器 基本选择器介绍

    CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选 ...

  7. CSS3 Flexbox可视化指南

    0. 目录 目录 引言 正文 1 引入 2 基础 3 使用 4 弹性容器Flex container属性 41 flex-direction 42 flex-wrap 43 flex-flow 44 ...

  8. Sublime Text3安装以及初次配置

    Sublime Text3安装以及初次配置 工具:官网下载:Sublime Text3 安装:直接运行安装.http://write.blog.csdn.net/postedit 激活:参考文/晚晴幽 ...

  9. CSS3入门学习之属性大全手册

    CSS Level 2 经历了 9 年的时间(从 2002 年 8 月到 2011 年 6 月)才达到 Recommendation(推荐) 状态.主要的原因是被一些 secondary featur ...

随机推荐

  1. mem 族函数的实现

    1.void * memcpy ( void * dest, const void * src, size_t num ); 头文件:#include <string.h>memcpy() ...

  2. 『重构--改善既有代码的设计』读书笔记----Introduce Local Extension

    同Introduce Foreign Method一样,很多时候你不能修改编辑原始类,你需要为这些服务类增加一些额外的函数,但你没有这个权限或者入口.如果你只需要一个或者两个外加函数那么你可以放心的使 ...

  3. [转]jQuery,javascript获得网页的高度和宽度

    网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...

  4. linux下搭建svn服务器

    安装步骤如下: 1.yum install subversion   2.输入rpm -ql subversion查看安装位置,如下图:   我们知道svn在bin目录下生成了几个二进制文件. 输入 ...

  5. python自动开发之第十八天

    一.JS正则 test - 判断字符串是否符合规定的正则 rep = /\d+/; rep.test("asdfoiklfasdf89asdfasdf") # true rep = ...

  6. Python Tutorial 学习(五)--Data Structures

    5. Data Structures 这一章来说说Python的数据结构 5.1. More on Lists 之前的文字里面简单的介绍了一些基本的东西,其中就涉及到了list的一点点的使用.当然,它 ...

  7. Typefaces and Personalities (字体与性格)

    Boring afternoon, searching something fun. See this article What Your Favorite Font Says About You , ...

  8. js 实现 di

    前些时候有使用过AngularJS一些时间,最大的感受就是Angular完全颠覆了我们开发Web应用的方式,自己被其许多耳目一新的设计思想所折服. 首先想说的就是依赖注入(DI),这也意味着,你在使用 ...

  9. The Child and Sequence

    Codeforces Round #250 (Div. 1)D:http://codeforces.com/problemset/problem/438/D 题意:给你一个序列,然后有3种操作 1x ...

  10. Mysql中类似于nvl()函数的ifnull()函数

    IFNULL(expr1,expr2) 如果expr1不是NULL,IFNULL()返回expr1,否则它返回expr2.IFNULL()返回一个数字或字符串值,取决于它被使用的上下文环境. mysq ...