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. 一个Web 持续集成工作实践

    一个web的持续基础实践: https://mp.weixin.qq.com/src=3&timestamp=1494325174&ver=1&signature=wFVC0E ...

  2. 运行Jmeter.bat出错：Not able to find java executor or version. Please check your installation. errorlevel=2

    下载JMeter. 解压后运行Jmeter.bat竟然报错了. 解决办法整理: 方法1: 1.检查JDK环境变量配置: ①系统变量→新增JAVA_HOME. 变量值填写jdk的安装目录(本人是 E:\ ...

  3. 配置PLSQL,提升工作效率

    界面模板的配置: 方便用户快速点击需要的功能.如打开SQL Window 1.打开customize,用户自定义Toolbars对话框. 2.在Commands命令标签页,选中要添加的命令,拖动到工具 ...

  4. 【Owin 学习系列】1. 第一个 Owin 程序

    IIS 中的 Owin 在 IIS 里面部署 Owin,既能得到 Owin 管道模型的灵活性和模块特性,也能很好地利用 IIS 成熟的配置,Owin 程序将会跑在 ASP.NET request 的管 ...

  5. JavaScript系统学习小结——变量、作用域和内存问题

    趁着写完小论文还未彻底消散的学习氛围,开始着重巩固自己JavaScript的基础知识,为秋招做最基本的准备. 变量:Js的变量可能保存两种不同数据类型的值:基本类型值和引用类型值. 基本类型包括:Un ...

  6. CSS随笔2

    1. css中: a:link { /*表示普通的,未被访问的链接状态*/    color: black;} a:visited { /*表示链接被访问过后的状态*/    color: bluev ...

  7. 微信小程序-滚动消息通知效果

    这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置 ...

  8. Git的一些知识

    Git Git的特点: Git存储的是文件快照, 即整个文件内容, 并保存指向快照的索引 分布式 原理 这个之前面试实习的时候被问到过, 搞懂基本原理还是很重要的 Git的目录结构在执行git ini ...

  9. css3鼠标悬停图片抖动效果

    提供一个参考的链接 http://demo.lanrenzhijia.com/2015/pic0113/

  10. JavaNIO深入学习

    NIO是Jdk中非常重要的一个组成部分,基于它的Netty开源框架可以很方便的开发高性能.高可靠性的网络服务器和客户端程序.本文将就其核心基础类型Channel, Buffer, Selector进行 ...