CSS浮动

float：right

伪类：

a:link {color:#FF0000;}      /* 未访问链接*/

a:visited {color:#00FF00;}  /* 已访问链接 */

a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */

a:active {color:#0000FF;}  /* 鼠标点击时 */

:first-child：匹配第一个元素

i:first-child：匹lang(no)配第一个x元素的i元素

:lang(no)

:first-letter

:first-line

:before

:after

opacity:0.6;不透明度

[title]----选择具有titile的元素

{

color:blue;

}

[title=runoob]----title等于特定值的元素

CSS3 模块

CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。

一些最重要CSS3模块如下：

  • 选择器
  • 盒模型
  • 背景和边框
  • 文字特效
  • 2D/3D转换
  • 动画
  • 多列布局
  • 用户界面

CSS3 边框

用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。

在本章中，您将了解以下的边框属性：

  • border-radius-----圆角
  • box-shadow----阴影
  • border-image----你可以使用图像创建一个边框border-image属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：

box-shadow: 10px 10px 5px #888;

CSS3 圆角

border-radius 属性，你可以给任何元素制作 "圆角"。

border-radius: 15px
50px 30px 5px;上右下左1

新的背景属性

顺序 描述 CSS
background-clip 规定背景的绘制区域。 3
background-origin 规定背景图片的定位区域。 3
background-size 规定背景图片的尺寸。 3

CSS3 渐变（Gradients）

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义

background: linear-gradient(direction, color-stop1, color-stop2,
...);

CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

CSS3 的文本阴影

CSS3 中，text-shadow属性适用于文本阴影。
text-shadow:
5px
5px
5px
#FF0000;
box-shadow:
10px
10px
5px
grey;加模糊效果


<!DOCTYPE
html>

<html>

<head>

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

<style>

div.card {

  width: 250px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  text-align: center;

}





div.header {

    background-color: #4CAF50;

    color: white;

    padding: 10px;

    font-size: 40px;

}





div.container {

    padding: 10px;

}

</style>

</head>

<body>


<!DOCTYPE
html>

<html>

<head>

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

<style>

div.polaroid {

  width: 250px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  text-align: center;

}





div.container {

  padding: 10px;

}

</style>

</head>

<body>





<h2> 卡片</h2>





<p>box-shadow属性可以用来创建纸质样式卡片:</p>





<div class="polaroid">

  <img src="rock600x400.jpg" alt="Norway" style="width:100%">

  <div class="container">

    <p>Hardanger, Norway</p>

  </div>

</div>





</body>

</html>

word-wrap:break-word;换行

CSS3 单词拆分换行

word-break:keep-all;

word-break:break-all;

CSS3字体

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf')

,url('Sansation_Light.eot'); /* IE9 */

}

@font-face{
font-family:
myFirstFont;
src:
url(sansation_bold.woff);
font-weight:bold;}

CSS3 字体描述

下表列出了所有的字体描述和里面的@font-face规则定义：

描述符 值 描述
font-family name 必需。规定字体的名称。
src URL 必需。定义字体文件的 URL。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 可选。定义如何拉伸字体。默认是 "normal"。
font-style
  • normal
  • italic
  • oblique
 可选。定义字体的样式。默认是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 可选。定义字体的粗细。默认是 "normal"。
unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

CSS3笔记之第三天的更多相关文章

  1. 【Unity Shaders】学习笔记——SurfaceShader（三）BasicDiffuse和HalfLambert

    [Unity Shaders]学习笔记——SurfaceShader(三)BasicDiffuse和HalfLambert 转载请注明出处:http://www.cnblogs.com/-867259 ...

  2. 【Git 使用笔记】第三部分：多分支开发

    ###举例仓库 仓库地址A:git@gitlab.54php.cn:guowei/demos.git 仓库地址B:git@gitlab.54php.cn:infra/demos.git 开发人员仓库C ...

  3. Deep Learning论文笔记之（三）单层非监督学习网络分析

    Deep Learning论文笔记之(三)单层非监督学习网络分析 zouxy09@qq.com http://blog.csdn.net/zouxy09          自己平时看了一些论文,但老感 ...

  4. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第三章：变换

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第三章:变换 学习目标 理解如何用矩阵表示线性变换和仿射变换: 学习在 ...

  5. 《Java 8实战》读书笔记系列——第三部分：高效Java 8编程（四）：使用新的日期时间API

    https://www.lilu.org.cn/https://www.lilu.org.cn/ 第十二章:新的日期时间API 在Java 8之前,我们常用的日期时间API是java.util.Dat ...

  6. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

  7. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

  8. CSS3秘笈第三版涵盖HTML5学习笔记9~12章

    第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...

  9. CSS3 笔记三（Shadow/Text/Web Fonts）

    CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...

随机推荐

  1. [转]从入门到精通: 最小费用流的“zkw算法”

    >>>> 原文地址:最小费用流的“zkw算法” <<<< 1. 网络流的一些基本概念 很多同学建立过网络流模型做题目, 也学过了各种算法, 但是对于基本 ...

  2. (转)Java多线程编程总结

    -------------------------------------------------------------------------------------------------   ...

  3. 打造 高性能，轻量级的 webform框架---js直接调后台（第二天）

    问题2: 每次与后台打交道 都需要写一些自己都看不太懂的事件,而且传参数很麻烦,这就是.net 封装的事件,如何解决呢?        首先以为webfrom事件,都需要写 服务器控件来绑定后台的事件 ...

  4. HTML随笔2

    1. 快捷键: * div*8 + tab键 - 可快捷出现八个div标签. * 标签名."名称" + tab键 - 可快速出现类名为"名称"的该标签,如果不加 ...

  5. 前端程序员经常忽视的一个JavaScript面试题

    在网上找到一个有关JavaScript的面试题,特整理如下: function Foo() { getName = function () { alert (1); }; return this; } ...

  6. Maven导出Project依赖的jar包

    Maven导出Project依赖的jar包 从Maven仓库中导出jar包: mvn dependency:copy-dependencies 会导出到Project的targed/dependenc ...

  7. 认真地搞OI

    新博客的开头 OI生涯的开始 #include<cstdio> int main() { puts("Hello world!"); ; }

  8. 由.Net类库提供的农历计算

             由.Net类库提供的农历计算(C#农历)                 2007-11-21 12:47:00 标签:.Net 类库 农历计算 C#农历 休闲            ...

  9. 4．写一个控制台应用程序，接收一个长度大于3的字符串，完成下列功能： 1）输出字符串的长度。 2）输出字符串中第一个出现字母a的位置。 3）在字符串的第3个字符后面插入子串“hello”，输出新字符串。 4）将字符串“hello”替换为“me”,输出新字符串。 5）以字符“m”为分隔符，将字符串分离，并输出分离后的字符串。 */

    namespace test4 {/* 4．写一个控制台应用程序,接收一个长度大于3的字符串,完成下列功能: 1)输出字符串的长度. 2)输出字符串中第一个出现字母a的位置. 3)在字符串的第3个字符 ...

  10. 为什么要学习Java EE

    Java EE学习之路 学习了Java SE,还只是完成“万里长征”的第一步. 接下来选择学习Java EE或是Java ME(或者你还想不断深入学习Java SE,只要你喜欢,你可以一直深入下去,就 ...