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. 函数响应式编程及ReactiveObjC学习笔记 (三)

    之前讲了RAC如何帮我们实现KVO / 代理 / 事件 / 通知 今天先不去分析它的核心代码, 我们先看看ReactiveObjC库里面一些特别的东西,  如果大家点开ReactiveObjC目录应该 ...

  2. hashcode-equals方法

    package com.charles.collection; import java.util.HashSet; import java.util.Set; public class Point { ...

  3. （转）spring学习之@ModelAttribute运用详解

    @ModelAttribute使用详解 1 @ModelAttribute注释方法 例子(1),(2),(3)类似,被@ModelAttribute注释的方法会在此controller每个方法执行前被 ...

  4. 使用gitLab 或 github 关联本地仓库

    要先在git里面注册自己的邮箱 然后: git commit -m 是为本次提交命名 刷新gitLab 发现更新了

  5. R语言成功加载rJava方法

    加载rJava的同时,要下载JAVA的JRE并且配置环境变量JAVA_HOME,因为rJava的调用需要java运行环境. 1.下载JRE 64位版本的JRE官网下载:http://www.java. ...

  6. python扫描proxy并获取可用代理ip

    今天咱写一个挺实用的工具,就是扫描并获取可用的proxy 首先呢,我先百度找了一个网站:http://www.xicidaili.com 作为例子 这个网站里公布了许多的国内外可用的代理的ip和端口 ...

  7. javascript基础知识2#数据类型

    数据类型 typeof 操作符 undefined类型 boolean类型 Nubmer类型 NaN(not a number) 数值转换parseInt,parseFloat String类型 字符 ...

  8. Git时光机穿梭之删除文件

    在Git中,删除也是一个修改操作,我们实战一下,先添加一个新文件test.txt到Git并且提交: $ git add test.txt $ git commit -m "add test. ...

  9. 如何在MySQL中设置外键约束以及外键的作用

    1.外键的作用,主要有两个:     一个是让数据库自己通过外键来保证数据的完整性和一致性     一个就是能够增加ER图的可读性 2.外键的配置 1)先创建一个主表,代码如下: #创建表studen ...

  10. [算法题] Reverse Linked List II

    题目内容 题目来源:LeetCode Reverse a linked list from position m to n. Do it in-place and in one-pass. For e ...