CSS3-1
css3
1 学习前置条件：html + css2
2 概述
*历史
css3 就是层叠样式表的目前的最高版本，带来了许多新特性。如，圆角、渐变、过渡、动画、新布局(多列布局缩进盒子等)
// css 发展之初的这个设计，以至于css得以发展的如此之好。
// 遇到不认识的标签 它不会报错，并能让下面的代码继续起效。
haha { }
// 无haha 标签，但是 p标签依旧有效
p {
hello: 122px;
font-size: 20px;//无hello元素，但是 font-size依旧有效。
}
* 兼容
http://html5test.com/ 在此内可以看看兼容的一些问题
css3更多用在移动端，移动端没有IE浏览器，PC端还要等段
时间才能完全使用
3 css3新增内容
* 选择器
关系选择器：
//1. 设置亲儿子的属性样式，孙子无用。 亲儿子 不是后代，IE7开始兼容
.wrap > p {
color: red;
}
//h2 标签的紧挨着的下一个 p 标签 下一个兄弟 IE7开始兼容
h2+p{
color: red;
}
//h4 标签后面的所有的兄弟 p 标签 同上
h4~p{
color: red;
}
属性选择器 //通过选择指定标签内的值来选择标签
img[src="img/3.png"]{
border:1px solid red;
}
还可以 []直接选择 ， 甚至可以 [][]
[src="img/3.png"]{
}
[src="img/3.png"][alt="aa"]{
}
还有以...开头的标签选择
// ^ 表示以...开头的标签
// $ 表示以...结尾的标签
// * 表示含有...的标签
// | 表示以...开头，并紧跟一个 - 的标签，等价于 [class^="para-"]
// ~ 表示含有后面设置的类选择器名称的标签
p[class^="para"]{
color: red;
}
p[class$="1"]{
font-size: 24px;
}
p[class*="p"]{
background-color: yellow;
}
p[class|="p"]{
background-color: yellow;
}
p[class~="demo1"]{
text-decoration: underline;
} <body>
<p class="para-1 demo1">段落</p>
<p class="para-2 demo1">段落</p>
<p class="para-3 demo2">段落</p>
<p class="para-4">段落</p>
<p class="pg1">段落</p>
<p class="pg2">段落</p>
</body>
儿子序选择器 (序号从1开始不是0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test anything</title>
<style type="text/css">
/* 逐一打开注解进行测试 */
/* 1 :first-of-type 选择属于其父元素的首个 .haha 元素的每个 .haha 元素。*/
/*.haha:first-of-type{
color: green;
}*/ /* 2 :last-of-type 选择属于其父元素的最后 .haha 元素的每个 .haha 元素。*/
/*.haha:last-of-type{
color: red;
}*/ /* 3 :only-of-type 选择属于其父元素唯一的 .haha 元素的每个 .haha 元素。*/
/*.haha:only-of-type{
color: orange;
}*/ /* 4 :only-child 选择属于其父元素的唯一子元素的每个 .haha 元素。*/
/*.haha:only-child{
color: pink;
}*/ /* 5 :nth-child(n) 选择属于其父元素的第二个子元素的每个 .haha 元素。*/
/*.haha:nth-child(2){
color: blue;
}*/ /* 6 :nth-last-child(n) 元素从最后一个子元素开始计数,选择属于其父元素第二个子元素每个.haha*/
/*.haha:nth-last-child(2){
color: blue;
}*/ /* 7 :nth-of-type(n) 选择属于其父元素第二个 .haha 元素的每个 .haha 元素。*/
/*.haha:nth-of-type(2){
color:red;
}*/
/* 8 :nth-last-of-type(n) */
/*.haha:nth-last-of-type(2){
color:red;
}*/
/* 9 :first-child 选择属于父元素的第一个子元素的每个 .haha 元素。*/
/*.haha:first-child{
color:red;
}*/
/* 10 :last-child 选择属于其父元素最后一个子元素每个 .haha 元素。*/
/*.haha:last-child{
color:red;
}*/
</style>
</head> <body> <p class="haha">p1</p>
<p class="haha">p2</p>
<p class="haha">p3</p>
<p class="haha">
<span class="haha">p4 span1</span>
<i class="haha">p4 i1</i>
<span class="haha">p4 span2</span>
<i class="haha">p4 i2</i>
<span class="haha">p4 span3</span>
<i class="haha">p4 i3</i>
</p>
<p class="haha">p5</p>
<div class="haha">
<div class="haha">
div1 div1
</div>
</div>
<div class="haha">
<div class="haha">
div2 div1
</div>
</div>
<div class="heihei">
<div class="haha">
div3 div1
</div>
<div class="haha">
div3 div2
</div>
</div>
<h1 class="haha">h1</h1>
<h3 class="haha">h3_1</h3>
<h3 class="haha">h3_2</h3>
<h3 class="haha">h3_3</h3>
<h3 class="haha">h3_4</h3>
</body>
</html>
伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* a:link a:hover a:visited a:active * :hover 能够被所有的元素使用 IE7兼容
div:hover {}
* :focus得到焦点时 * :not
p:not(.demo) 代表选择中class没有demo类的p元素 * :only-child 唯一的儿子 * :empty 空标签 <div></div> * :checked选中的 * :disabled和:enabled IE9兼容 */
</style>
</head>
<body>
<p> 一： :hover
以前的伪类： a:link a:hover a:visited a:active <br/>
:hover 能够被所有的元素使用 IE7兼容 <br/>
比如: div:hover {}
</p>
<p>
二: :focus
比如： input:focus 选择获得焦点的 input 元素。
大致使用意义在于：焦点到了input元素后，设置 input 的一些特效。
</p>
<p>
三： :not
比如： p:not(.demo) 代表选择中class没有demo类的p元素(排除的效果)
</p>
<p>
四： :only-child 每个标签下，只有一个指定元素。
</p>
<p>
五： :empty 空标签
比如：<div></div> （标签首尾相接，无任何东西。用得少）
</p>
<p>
六： :checked 选中的 (一般用在单选按钮和复选框)
如：
input[type="radio"]:checked { }
</p>
<p>
七： :disabled和:enabled 不可编辑和可以编辑 IE9兼容
<input type="text" disabled><!-- 文本框就不可被编辑 -->
<input type="text" enabled> <!-- 文本框就可被编辑,默认 -->
</p>
</body>
</html>
伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>伪元素 </h2>
<h3>::before与::after</h3>
<h4>::before是在标签内容<strong>内</strong>的最开始。所以，其内容的父类是使用它的元素标签</h4>
<p>如下：p标签是 内容“>>>>”的父类</p>
<p>
p::before {
content:">>>>"; //在内容的最前面加入的内容
display: block; //对添加内容设置成块元素
color: red; //对添加内容设置颜色。
}
</p>
<p>p::after 同上</p>
<p>
总结：
1、content表示内容，所有的::before必须有content属性，没有content，则写成content:""
2、::before和::after是行内元素，假如要设置宽高 需要转成块元素
3、IE8不兼容::after 但是兼容:after 所以我们为了更大的兼容 :after即可
4、还可以用伪元素清除浮动！！如下：
</p>
<p>
.cl::after{
content:"";
display: block;
clear: both;
}
</p> <h2>其他几个伪元素</h2>
<p>
::selection 被选中的文字样式 IE9开始兼容
::first-letter 表示第一个文字 IE9开始兼容
::first-line 表示第一行 IE9开始兼容
</p>
</body>
</html>
CSS3-1的更多相关文章
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- 三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
- Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
- 原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- css3线条围绕跑马+jquery打字机效果
原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...
随机推荐
- JSP等模板引擎已死，大前端为趋势
我们先来看一下tomcat版本数据: 我们可以看到,从tomcat8之后JSP就再没有新的支持了,tomcat8大概是2013年发布的,也就是说,从2013年开始jsp技术已经实质上不被官方继续维护了 ...
- Hibernate的Cascade——级联操作
在Hibernate中,针对持久化实体的配置文件中有Cascade这样一个属性,顾名思义就是级联,也就是说在操作当 前实体时,针对当前实体的操作会影响到相应配置的关联实体.比如针对当前实体进行保存操作 ...
- Git操作手册（开发人员）
一.git信息配置 1.1配置git账号信息 Window ->Preferences -> Team -> Git -> Configuration,在点击AddEntry… ...
- 271. 杨老师的照相排列【线性DP】
杨老师希望给他的班级拍一张合照. 学生们将站成左端对齐的多排,靠后的排站的人数不能少于靠前的排. 例如,12名学生(从后向前)可以排列成每排5,3,3,1人,如下所示: X X X X X X X X ...
- C#中的反射解析及使用（转）
原文:https://cloud.tencent.com/developer/article/1129356 1.对C#反射机制的理解 2.概念理解后,必须找到方法去完成,给出管理的主要语法 3.最终 ...
- javascript 之 数组
定义:var colors=new Array(); var colors=new Array(3); var colors=new Array('red'); var colors=['red',' ...
- Axios Token验证拦截器
import axios from 'axios'; // req拦截 axios.interceptors.request.use( //设置头部的token config.headers['tok ...
- selenium中CSS选择器定位
selenium元素定位,CSS选择器定位效率会高很多. CSS选择器用于选择你想要的元素的样式的模式.表格摘自“菜鸟教程”,具体用法可去查阅 选择器 示例 示例说明 CSS .class .intr ...
- 牛客OI周赛9-提高组题目记录
牛客OI周赛9-提高组题目记录 昨天晚上做了这一套比赛,觉得题目质量挺高,而且有一些非常有趣而且非常清奇的脑回路在里边,于是记录在此. T1: 扫雷 题目链接 设 \(f_i\) 表示扫到第 \(i\ ...
- curl 向远程服务器传输file文件
public function upload(){ //获取上传文件信息,文件名称以自己实际上传文件名称为准 $fileinfo = $_FILE['filename']; //请求参数,依据商户自己 ...