CSS3笔记之第三天
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 的文本阴影
5px
5px
5px
#FF0000;
10px
10px
5px
grey;加模糊效果
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>
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"。 |
| font-style |
|
可选。定义字体的样式。默认是 "normal"。 |
| font-weight |
|
可选。定义字体的粗细。默认是 "normal"。 |
| unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
CSS3笔记之第三天的更多相关文章
- 【Unity Shaders】学习笔记——SurfaceShader（三）BasicDiffuse和HalfLambert
[Unity Shaders]学习笔记——SurfaceShader(三)BasicDiffuse和HalfLambert 转载请注明出处:http://www.cnblogs.com/-867259 ...
- 【Git 使用笔记】第三部分：多分支开发
###举例仓库 仓库地址A:git@gitlab.54php.cn:guowei/demos.git 仓库地址B:git@gitlab.54php.cn:infra/demos.git 开发人员仓库C ...
- Deep Learning论文笔记之（三）单层非监督学习网络分析
Deep Learning论文笔记之(三)单层非监督学习网络分析 zouxy09@qq.com http://blog.csdn.net/zouxy09 自己平时看了一些论文,但老感 ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第三章：变换
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第三章:变换 学习目标 理解如何用矩阵表示线性变换和仿射变换: 学习在 ...
- 《Java 8实战》读书笔记系列——第三部分：高效Java 8编程（四）：使用新的日期时间API
https://www.lilu.org.cn/https://www.lilu.org.cn/ 第十二章:新的日期时间API 在Java 8之前,我们常用的日期时间API是java.util.Dat ...
- CSS3秘笈第三版涵盖HTML5学习笔记6~8章
第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...
- CSS3秘笈第三版涵盖HTML5学习笔记1~5章
第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...
- CSS3秘笈第三版涵盖HTML5学习笔记9~12章
第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...
- CSS3 笔记三（Shadow/Text/Web Fonts）
CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...
随机推荐
- 利用Fiddler修改请求信息通过Web API执行操作(Action)实例
本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复261或者20170724可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong.me ...
- JMeter 监控和记录&常用功能
使用https连接时,如果对应站点的CA 证书错误,会直接报连接不到服务器的错误,org.apache.commons.httpclient.NoHttpResponseException,把错误证书 ...
- java多线程系列(四)---Lock的使用
Lock的使用 前言:本系列将从零开始讲解java多线程相关的技术,内容参考于<java多线程核心技术>与<java并发编程实战>等相关资料,希望站在巨人的肩膀上,再通过我的理 ...
- WebService中的WSDL详解 及jmeter测试
首先简单讲解一下什么是wsdl. 一个WSDL文档通常包含8个重要的元素,即definitions.types.import.message.portType.operation.bin ...
- [IB]PeopleSoft异步详细信息中状态“已完成”但订阅合同状态“新建”问题
最近遇到一个IB异步程序状态不一致问题,异步详细信息中上面的状态是“DONE”但是订阅合同中还是“新建”状态.在域状态中清除域状态也不管用. 重启app server也不好使.最后执行了appmsgp ...
- 6步就能搞出个react网站哈，玩一把！
1.安装mk-tools命令行工具 $ npm i -g mk-tools 2.创建空website $ mk website myDemo $ cd myDemo 3.clone应 ...
- swift UITapGestureRecognizer获取点击事件点击的位置point
func picTap(sender: UITapGestureRecognizer) { let point = sender.location(in: sender.view) } 其中获取的po ...
- 数据库db2错误代码大全
sqlcode sqlstate 说明000 00000 SQL语句成功完成01xxx SQL语句成功完成,但是有警告+012 01545 未限定的列名被解释为一个有相互关系的引用+098 01568 ...
- SecureCRT-转换密钥-Xshell-配置服务-使用xshell登录远程linux服务器
这篇文档不保证正确,仅仅是备份个因为所以,不必当真. SecureCRT和xShell这2个工具功能类似,均可以控制远程服务器模拟并发用户. SecureCRT自带功能可以将私钥转换为xShell可用 ...
- oracle数据库与实例
========================================================================================== oracle数据库 ...