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的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...
随机推荐
- self sqflite sample =======================
import 'package:path_provider/path_provider.dart'; import 'dart:async'; import 'package:flutter/mate ...
- win10优化
1. 关闭磁盘碎片整理.自动维护计划任务 磁盘C-属性–工具–对驱动器进行优化和碎片整理–优化–更改设置–取消选择按计划运行 2. 关闭Windows Defender 控制面板–Wind ...
- id、class等各种选择器总结
1. id 选择器 # class 选择器 . 标签 选择器 标签名 群组 ...
- opencv学习之路（37）、运动物体检测（二）
一.运动物体轮廓椭圆拟合及中心 #include "opencv2/opencv.hpp" #include<iostream> using namespace std ...
- ECS之Git服务器搭建
最简教程 ### . 安装Git 安装Git服务,命令如下: ```Shell $ yum install curl-devel expat-devel gettext-devel openssl-d ...
- 给GRUB添加新的项目
安装了win10,然后又安装了manjaro,最后又安装了Ubuntu.开机默认就是进入的Ubuntu的grub,然而我比较喜欢manjaro的grub主题.在bios中设置manjaro的引导为默认 ...
- P4233 射命丸文的笔记
思路 题目要求求的是哈密顿回路的期望数量,实际上就是哈密顿回路的总数/有哈密顿回路的竞赛图的数量 n个点的所有竞赛图中哈密顿回路的总数为 \[ (n-1)! 2^{\frac{n(n-1)}{2}-n ...
- Unity3D里怎样隐藏物体
方法很多: 1.改position,移到视野外,推荐,最节省 2.gameObject.SetActive (false); //要提前引用,要不你就改不回来了... 3.renderer.enabl ...
- Python玩转Arduino——简单介绍
关于Python语言的介绍安装请参考廖雪峰的Python教程 Python是一门解释型语言,虽然不能够像c语言一样编译上传到Arduino--什么你说MicroPython,我们再说Arduino呢- ...
- ssh连接所生成的known_hosts出现的问题
问题现场及解析 用OpenSSH的人都知ssh会把你每个你访问过计算机的公钥(public key)都记录在~/.ssh/known_hosts.当下次访问相同计算机时,OpenSSH会核对公钥.如果 ...