day6——css3
一.css选择器
1. 考虑浏览器是否支持（谷歌和苹果所有样式都支持）
2. 元素选择器：*通配符，E F包含选择器，E>F 父子选择器，E+F:相邻选择器:紧贴在E元素后的F元素，E~F：兄弟选择器
E~F：E元素后的所有兄弟元素F（**不包括E元素**）
3. 伪类选择器：E:link, E:hover, E:foucs（获得焦点时触发）
4. 属性选择器
E[att ~=”value”]——p中有value属性且至少有一个空格的元素;
E[att$=”val”]:after{content:url(images/rar.jpg)}:找到符合条件的元素后在后面添加上选用的图片
5. 伪对象选择器
单冒号和双冒号效果相同，进化而来，目前css3使用双冒号
E:before,E:after必须和content搭配使用
eg:
实例:百度文库侧边栏练习
核心代码如下
<style>a{display: block;text-decoration: none;color: #5c5c5c;}a[href$="doc"]::before{content: url("../images/word.jpg");padding-right: 10px;}a[href$="rar"]::before{content: url("../images/rar.jpg");padding-right: 10px;}a[href$="mov"]::before{content: url("../images/qvod.jpg");padding-right: 10px;}a[href$="excel"]::before{content: url("../images/excel.jpg");padding-right: 10px;}a[href$="ppt"]::before{content: url("../images/ppt.jpg");padding-right: 10px;}a[href$="txt"]::before{content: url("../images/txt.jpg");padding-right: 10px;}a[href$="txt"]::after{content: "hot";color: #bd2c00;background: #fff242;font-weight: bold;font-size: 20px;padding-right: 10px;}a[href$="web"]::before{content: url("../images/web.jpg");padding-right: 10px;}span::selection{background: #7dffd1;}</style>
结构如下：
<body>
<a href="aaa.doc">文档文件</a>
<a href="aaa.rar">压缩文档</a>
<a href="aaa.mov">视频文档</a>
<a href="aaa.excel">表格文档</a>
<a href="aaa.ppt">ppt文档</a>
<a href="aaa.txt">文本文档</a>
<a href="aaa.web">web文档</a>
<span>123456</span>
</body>
E:selection:元素被选中时触发样式
6. 结构伪类选择器
- child类型——在子元素里寻找
e:first-child:第一个子元素
e——div分区或body中第一个子元素是不是e标签,若是则符合条件
e:last-child；最后一个子元素
e:nth-child(数字/odd/even/3n+1)：数字从1开始的第某个元素/奇数行/偶数行/某个自定义公式：n从0开始
e:only-child:某分区里仅含唯一一个子元素e - type类型
e:root:根元素
7. ui状态伪类选择器——在表单元素中的功能
eg：css选择器文件夹
样式如下:
(input的默认状态具有 enabled属性)
<style>input:disabled{background:yellow;color:green}input:enabled{background:#f90;color:red}input:checked+span{background:red}/*以上三个选择器都是针对表单做的提升修改*/</style>
body部分如下：
<form method="post" action="#"><fieldset><legend>disabled和enabled</legend><ul><li><label><input type="text" name="id" value="99" disabled /><span>ID</span></label></li><li><label><input type="text" name="user" value="" /><!--input的默认状态具有 enabled属性--><span>昵称</span></label></li><li><label><input type="text" name="pwd" value="" enabled /><span>密码</span></label></li></ul></fieldset><fieldset><legend>选中下面的项试试(单选按钮)</legend><ul><li><label><input type="radio" name="sex" value="0" /><span>蓝色</span></label></li><li><label><input type="radio" name="sex" value="1" /><span>红色</span></label></li><li><label><input type="radio" name="sex" value="2" /><span>黑色</span></label></li></ul></fieldset><fieldset><legend>选中下面的项试试(多选按钮)</legend><ul><li><label><input type="checkbox" name="like" value="0" /><span>蓝色</span></label></li><li><label><input type="checkbox" name="like" value="1" /><span>红色</span></label></li><li><label><input type="checkbox" name="like" value="2" checked /><span>黑色</span></label></li></ul></fieldset></form>
效果如图：
id不能由用户输入，昵称栏默认可选，密码为enable可选，单选按钮选中后背景变为红色，多选按钮默认黑色已选中
二.边框
- 圆角:border-radius
- 阴影：
box-shadow:h-shadow v-shadow blur spread color inset
属性含义：水平阴影，垂直阴影，阴影模糊距离，阴影模糊程度（宽度），阴影颜色，内置（不设置时默认为外置）
text-shadow: h-shadow v-shadow blur color
文本阴影属性含义：水平位置，垂直位置，阴影模糊距离，阴影颜色
- border-image(不支持ie浏览器)
border-image: source slice width outset repeat;
属性含义：图像源路径，边界向内偏移 ，图像边界宽度，用于指定在边框外部绘制，border-image-area 的量，是否重复（3值）
是否应重复（repeat）、拉伸（stretch）或铺满（round）
div{border:10px solid transparent;<!--需要提前设置边框-->width:40px;padding:5px 10px;-moz-border-image: url(../images/button.png) 0 14 stretch;-webkit-border-image: url(../images/button.png)0 14 stretch;-o-border-image: url(../images/button.png) 0 14 stretch;border-image: url(../images/button.png) 0 14 stretch;}
三.背景
多背景background-image——要注意图层放的顺序会影响最后的效果（最前面的在最上面）
background-size(背景图像大小)：两种方法-精确像素大小或者百分比调整（1个值为占总体，两个值为水平方向和竖直方向）
background-repeat：repeat或no-repeat
background-origin（背景定位位置）:border-box从边框线开始填充,padding-box：从内边界开始填充,content-box：从内容开始填充
background-clip:背景被裁剪到边框盒,背景被裁剪到内边距框,背景被裁剪到内容框：border-box,padding-box,content-box
eg:新年快乐.html
四.渐变
1.线性渐变
- 线性渐变-从上至下:
渐进增强——先写各个内核
优雅降级——先写标准形式
eg:渐进增强：
-webkit-linear-gradient(颜色块，颜色块)
-o-linear-gradient(颜色块，颜色块)
-moz-linear-gradient(颜色块，颜色块)
linear-gradient(颜色块，颜色块)
- 线性渐变-从左至右：
谷歌为从左边开始，记录起始位置，o朋和火狐为表明终点位置，标准写法为to+目的方向
线性渐变-任意角度：
linear-gradient(180deg,color1,color2…)
- 线性渐变-左上至右下（或其他）：
eg:
-webkit-linear-gradient(left top，red,blue)
-o-linear-gradient(right bottom, red,blue)
-moz-linear-gradient(right bottom, red,blue)
linear-gradient(to right bottom, red,blue)
- 线性渐变-多个颜色——均匀分布与不均匀分布
均匀分布时逐一添加颜色
不均匀分布时百分比表示节点（两个颜色交叠）而不是长度
liner-gradient(颜色块，位置点，颜色块，位置点)
eg: -webkit-linear-gradient(red 20%,yellow 70%,green 90%)
透明度transparent或rgba(),其中a即第四个值通过0-1数值（小数写为.5的形式）控制透明度，0为完全透明
白色为255，黑色为0，之间为灰色
- 重复渐变:
渐变时如果没有给起始颜色，则绿色会循环到起始位置如图二
eg:background:-webkit-repeating-linear-gradient(left,orange,yellow 10%,green 50%);
.box6{/*重复渐变*/background:-webkit-repeating-linear-gradient(left,yellow 30%,green 50%);background:-o-repeating-linear-gradient(left,yellow 30%,green 50%);background:-moz-repeating-linear-gradient(left,yellow 30%,green 50%);background:repeating-linear-gradient(left,yellow 30%,green 50%);}
eg:jianbian.html
2.径向渐变
background: radial-gradient(center, shape size, start-color, ...,last-color);
center表示中心坐标位置，默认在中心点，可以用百分比或精确值表示中心坐标位置
shape表示形状：circle 圆形 ellipse 表示椭圆形 默认为椭圆
- 大小: closest-side最近的边 farthest-side最远的边
closest-corner最近的角 farthest-corner最远的角
靠近他们的方向为均匀分布 - 重复的径向渐变
eg:
background: -webkit-repeating-radial-gradient(red, yellow 30%, green 50%); /* Safari 5.1 - 6.0 */
background: -o-repeating-radial-gradient(red, yellow 30%, green 50%); /* Opera 11.6 - 12.0 */
background: -moz-repeating-radial-gradient(red, yellow 30%, green 50%); /* Firefox 3.6 - 15 */
background: repeating-radial-gradient(red, yellow 30%, green 50%); /* 标准的语法（必须放在最后） */
eg:径向渐变文件夹
以上渐变时将四种支持形式全部写上以避免问题
五.文本效果
- 属性：text-shadow，box-shadow, text-overflow,word-wrap,
word-break - text-overflow:文本溢出
和white-space:nowrap;overflow:hidden一起使用才能产生效果 - word-wrap:强制换行
- word-break：非中日韩的文本换行
六.CSS字体
字体定义时首先建立style，然后在其中
@font-face{
font-family:
src:url()
}
eg:
<style>@font-face{font-family:font1;src:url(Marvel-Regular.ttf)}.one{/*font:20px font1;*/font-family: font1;}</style><body>
<p class="one">看得出你没看到你每次</p>
<p>第三次是那么差几块呢金</p>
</body>
</html>
eg：字体.html
七.CSS多列
（按下tab键后会显示所有兼容的浏览器格式）
column-count列数（根据文本字数划分）
column-gap 列间距
column-rule 间距分割线
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>多列</title><style>p{-webkit-column-count: 10;-moz-column-count: 10;column-count: 10;-webkit-column-gap: 30px;-moz-column-gap: 30px;column-gap: 30px;-webkit-column-rule:solid 2px blue;}</style>
</head>
<body>
<p>Phuket Island | 这里水色纯净、天色蔚蓝，有自成一派的浪漫，白色沙滩和碧绿海水是普吉岛最美的语言。恋上普吉岛，恋上那片幽幽的蓝。芭东海滩距普吉镇15公里，是普吉岛开发最完善的海滩区。白天的芭东海滩游人众多，吸引着越来越多的游客。喜欢逛街和购物的游客也很喜欢这里，因为在海滩附近有几条布满商店和餐馆的街道，走走看看间乐趣无穷。夜晚，度假村、露天酒吧、舞厅、夜总会人来人往。点一杯简单的饮料，在异国的夜晚和陌生的朋友聊聊天，看看外国人的夜生活，再吹一吹海风，真是非常享受。幻多奇乐园是普吉岛最受欢迎的旅游点。每晚幻多奇剧场都会表演精彩的节目，如歌舞、魔术、杂技以及大象表演，有英语和泰语讲解。这里以一座古老村落的形式出现，向游客展示泰国传统文化神秘的一面，尤其是最后十几头大象一起走到舞台上，气势十分壮观。 幻多奇乐园占地广阔，内有主题商业街、小吃摊、宫廷式餐厅及豪华的现代化大剧院。在这里不但能买到具有泰国特色的手工艺品，还能品尝到当地的特色佳肴及世界各国的风味美食。泰国人把它当作本土的迪士尼乐园。幻多奇剧场每晚都会表演精彩的节目，以讲故事的方式向游客展示泰国传统文化。皮皮岛位于泰国普吉岛东南约20公里处，是由两个主要岛屿（北部的大皮皮岛和南部的小皮皮岛）组成的姐妹岛，1983年被定为泰国国家公园。这是一个深受阳光眷宠的地方，柔软洁白的沙滩，宁静碧蓝的海水，鬼斧神工的天然洞穴，未受污染的自然风貌，使得她从普吉岛周围的30余个离岛中脱颖而出，一举成为近年来炙手可热的度假胜地之一。 喜欢宁静的人一定会喜欢皮皮岛的，花上几天在这里，一定会感受到人生最美好的感觉。如果是短暂、匆忙的一日游，虽然也可以看见属于皮皮岛的美景，可是很难彻底领略皮皮岛浪漫的风情，因为这里适合从容地居住和细心地体味。千万别吝啬你的假期，带上一本好书和一分好心情，出发吧！ 拉一把躺椅在海滩边享受温情脉脉的阳光，悠闲地翻几页书，啜一口色彩缤纷的鲜榨热带水果汁，偶尔发个呆，打个盹儿，也有连绵的海浪声依稀相伴，好不惬意；或许你热爱运动，那可一定要来这里一展身手！游泳、潜水、滑水、独木舟、风浪板、香蕉船……丰富多彩的水上、水下运动项目会让你手舞足蹈、无暇休息。当然也要注意动静相宜、张弛有道，激烈的运动后，不妨租个钓鱼杆，怡然自得地钓钓小鱼、小螃蟹之类，别太认真，愿者上钩嘛！ 爱好电影的朋友应该还记得2000年上映的由李奥纳多主演的美国热门影片《海滩》吧，但是你知道吗？那片梦幻般的碧海晴天正是在小皮皮岛实景拍摄的！能获得好莱坞大导演之青睐，可见皮皮岛真是魅力不凡。
</p>
</body>
</html>
八.CSS3用户界面
- resize:调整尺寸
eg:多行文本框时定义了resize：none,
他的属性有：none/both/vertical/horizontal；//不能调整大小、都可以调整，可以调整高，可以调整宽，
max-width,max-height:定义可拉伸的额最大宽高；
overflow:auto;超出时出现下拉菜单
outline-offset:属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
div
{
border:2px solid black;
outline:2px solid red; //超出部分为红色实线
outline-offset:15px;//超出距离15像素
}
效果如图：
九.弹性盒子（Flex box）
页面适应不同的屏幕大小
弹性容器Flex container +弹性子元素Flex item
display:-weblit-flex;
justify content:flex-start;//给父元素
justify-content的属性:
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔
day6——css3相关推荐
- HTML5+CSS3基础（day6）
一.CSS引入方式 CSS的三种样式表 1.内部样式表 示例 <title>内部样式表</title><style>div {color:pink;}</st ...
- html5+css3笔记整理
目录 day1 01-标题 02-段落标签 03-文本格式 04-图片标签 05-音频标签 06-视频标签 07-链接标签 day2 01-列表-无序 02-列表-有序 03-列表-自定义 04-列表 ...
- 【百度前端学院学习笔记】Day6 浮动/BFC
[百度前端学院学习笔记]Day6 浮动/BFC 一.什么是浮动? 二.普通流 / 浮动 / 绝对定位 三.BFC/Flow Root 3.1 什么是BFC? 3.2 BFC 的特性 3.2.1 特性一 ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- html滑动逐渐覆盖效果,创意jQuery和CSS3滑动覆盖响应式幻灯片特效
这是一款非常有创意的jQuery和CSS3滑动覆盖响应式幻灯片特效.该幻灯片特效采用响应式设计,在幻灯片切换时使用一个滑动块状区域来进行覆盖,显示新的幻灯片内容,整体效果非常不错. 使用方法 HTML ...
- css3之transition、transform、animation比较
css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解. 其实, ...
- 了解CSS/CSS3原生变量var (转)
一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...
- Notepad++支持jQuery、html5、css3
Notepad++里的代码提示文件是以XML文件存放于目录 ....\Notepad++\plugins\APIs\下的. 将这三个文件:html.xml, css.xml, javascript.x ...
- 纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
最新文章
- jquery插件，nocube
- Eclipse版本列表
- 各种排序实现以及稳定性分析
- python考核总结_Python阶段总结
- LoRa技术实现水表抄表远距离无线传输方案的应用
- 5.jQueryAjax
- SQLExecption：Operation not allowed after ResultSet closed解决办法
- akoj-1153-p次方求和
- redhat修改mysql编码格式_RedHatLinux下修改MySQL编码方式
- 票房连创新高 数据安全不能成为《熊出没》“拖油瓶”
- ElasticSearch全文搜索引擎之term和match的区别
- 魔兽世界服务器修改模型,超简单魔兽世界修改模型 2.43可用 无需登录器
- jQuery菜鸟教程
- 弹性模量及刚度之间的关系
- 迅雷的FLV文件迷你播放器
- 天神娱乐实控人朱晔宣布离职：暂时的离开是为更好相见
- 常数e怎么用计算机,自然常数e:原来是这么来的
- 手机用计算机微信运动记步吗,微信运动怎么用？微信运动计步功能使用方法介绍...
- K8S Flannel
- Jetson TX2重要技巧