一、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初步的更多相关文章

  1. CSS3 初步学习

    CSS3有一些是与旧版CSS2.1重叠的,有一些是没有浏览器支持的,全学没必要,下面只记录一下有用的. 一.CSS3边框 1.圆角border-radius border-radius:值越大,角越圆 ...

  2. 移动端之Android开发的几种方式的初步体验

    目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式 开发环境 是否需要AndroidSDK 支持跨平台 开发语言&技能 MUI Win+ ...

  3. [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 （二）

    [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date  周六 10 一月 2015 By 钟谢伟 Category website develop ...

  4. CSS3动画属性Transform解读

    无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经 烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅 ...

  5. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

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

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

  7. CSS3制作动画的三个属性

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...

  8. CSS3 Border-image

    CSS3中有关于border的属性我们一起学习完了圆角border-radius和边框颜色border-color,只剩下最后一个边框图片border-image.今天我们就一起来学习这个border ...

  9. CSS3打造3D效果——perspective transform的深度剖析

    声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...

随机推荐

  1. Qt creator 搭配 valgrind 检测内存泄漏

    继上次重载operator new检测内存泄漏失败之后,妥协了.决定不管是否是准确指明哪一行代码出现内存泄漏,只要告诉我是否有泄漏就行了,这样就没有new替换的问题.在开发中,总是一个个小功能的开发. ...

  2. Oracle与DB2的区别

    系统结构概述 首先,我们需要理解 Oracle 使用的架构,并理解它与 DB2 的不同之处.图 1 展示了 Oracle 的系统结构.将该图与 图 2 进行比较,后者显示了 DB2 的系统结构.在阅读 ...

  3. 利用Python进行数据分析——数据规整化：清理、转换、合并、重塑(七)(1)

    数据分析和建模方面的大量编程工作都是用在数据准备上的:载入.清理.转换以及重塑.有时候,存放在文件或数据库中的数据并不能满足你的数据处理应用的要求.很多人都选择使用通用编程语言(如Python.Per ...

  4. input输入字母自动大小写转换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. C#基于委托的带参数的消息传递设计

    需求场景 在对象A中注册消息,指定回调函数 在对象B中解释消息,调用对应的回调函数,附上对应的参数对象 定义 public delegate void MessengerDelegate(object ...

  6. AE分级渲染

    分级渲染classbreakrenderer位于carto类库中,进行分级渲染时,首先要将相应图层按照某一Field分级.可使用esrisystem类库中的iclassifyGEN类的classify ...

  7. Xcode 常用快捷键及代码自动排版

    1. 文件CMD + N: 新文件CMD + SHIFT + N: 新项目CMD + O: 打开CMD + S: 保存CMD+OPt+S:保存所有文件CMD + SHIFT + S: 另存为CMD + ...

  8. XML 解析中，如何排除控制字符

    XML 解析中,如何排除控制字符 今天在解析一个中文的 XML时,始终报错 PCDATA invalid Char value 21 in Entity ,查询了一下这个 21 的ascii 值,发现 ...

  9. python中json的操作示例

    先上一段示例 # -*- coding: cp936 -*- import json #构造一个示例数据,并打印成易读样式 j = {} j["userName"]="a ...

  10. shell script中的$*和$@

    在shell script中,$*和$@都是获取所有的命令行参数,但是这两者在使用的过程中会有细微的差别,差别主要是在有没有使用双引号,即是直接使用$*,$@,还是使用"$*",& ...