CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够对想学这方面知识的小白有所帮助。因为是各种渠道找的资料,学习的不算系统,所以知识点涵盖的不甚全面,望各位看官不吝指正批评。
CSS3简介
CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。
css3现状
- 浏览器支持程度差,需要添加私有前缀
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
CSS3新增选择器
1.属性选择器新增
- E[属性名^=值]:从头去匹配这个‘属性 = 对应值’的E元素
- E[属性名$=值]:从尾去匹配这个‘属性 = 对应值’的E元素
- E[属性名*=值]:从任意位置去匹配这个‘属性 = 对应值’的E元素
- E[属性名|=值]:匹配具备该属性的元素,并且属性值以对应值开头并紧接着“-”,如果该属性的属性值仅有匹配值,也能匹配到。
2.伪类选择器
- E:first-child 找到第一个孩子为E的元素
- E:last-child 找到最后一个孩子为E的元素
- E:nth-child(N)找到第N个孩子为E的元素,N以1开始
- E:nth-child(odd)匹配奇数的孩子为E的元素
- E:nth-child(even)匹配偶数的孩子为E的元素
- E:nth-child(3n+1)匹配第3n+1个孩子为E的元素,n从0开始
:nth-of-type使用方法与:nth-child类似。
3.其他选择器
- input:focus{} => 选择获取焦点的表单
- Input:checked{} => 选择被选中的checkbox表单
- input:enabled{} => 选择可操控的表单元素
- input:disabled{} => 选择不可操控的表单
- E:target{} => 选择通过锚点跳转的当前E元素
- E:empty{} => 选择没有子节点的E元素包括文本节点(基本不用)
伪元素before after
作用:渲染一个虚拟的标签插入到当前元素的内部前面或后面
总结:
- 伪元素默认是行内元素,我们可以进行转换,在实践中,我们常用来模拟装饰标签
- 伪元素是虚拟的,不能通过js去获取,但可以用类样式进行覆盖
- 清除浮动的底层原理,就是通过伪元素去清除浮动,节约DOM内存
- content不能省略,即便里面没有内容
- 当伪类需要配合iconfont去使用的话需要打开iconfont.css 拿到content里面对应的值
- 当伪元素需要hover的效果的时候不能直接hover 需要借助于父级 写法:父级:hover:伪元素
圆角 border-radius
实现元素的圆角化,使用方式与border、padding和margin类似,可以合写,也可以单独设置。
- 一个值设置的是盒子的四个角的水平和垂直半径
- 每个角都可以单独进行设置 其取值顺序是左上 右上 右下 左下顺时针设置
- 可以简写 简写的逻辑跟padding和margin一样
- 单位支持像素,和百分比(参照的是宽度和高度)
- 可以用 水平半径/垂直半径 去单独控制半径 并且每一个半径都可以单独控制
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>dcocument</title>
<style>
ul{margin:0;padding:0;}
li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;}
.test .one{border-radius:10px;}
.test .two{border-radius:10px 20px;}
.test .three{border-radius:10px 20px 30px;}
.test .four{border-radius:10px 20px 30px 40px;}
.test2 .one{border-radius:10px/5px;}
.test2 .two{border-radius:10px 20px/5px 10px;}
.test2 .three{border-radius:10px 20px 30px/5px 10px 15px;}
.test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}
</style>
</head>
<body>
<h2>水平与垂直半径相同时:</h2>
<ul class="test">
<li class="one">提供1个参数<br />border-radius:10px;</li>
<li class="two">提供2个参数<br />border-radius:10px 20px;</li>
<li class="three">提供3个参数<br />border-radius:10px 20px 30px;</li>
<li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px;</li>
</ul>
<h2>水平与垂直半径不同时:</h2>
<ul class="test2">
<li class="one">提供1个参数<br />border-radius:10px/5px;</li>
<li class="two">提供2个参数<br />border-radius:10px 20px/5px 10px;</li>
<li class="three">提供3个参数<br />border-radius:10px 20px 30px/5px 10px 15px;</li>
<li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>
</ul>
</body>
</html>
阴影box-shadow
语法 box-shadow:水平偏移 垂直偏移 模糊大小 阴影大小 颜色 阴影
- 第一个值 :Npx 阴影向水平方向偏移N个像素 正数往右 负数往左
- 第二个值 :Npx 阴影向垂直方向偏移N个像素 正数往下 负数往上
- 第三个值 :px 模糊大小
- 第四个值 :px 阴影尺寸
- 第五个值 :颜色 默认值是黑色
- 第六个参数: 内外阴影 默认是外阴影 内阴影是inset
- 阴影可以写多个,中间用逗号隔开
- 阴影可以简写,但是需要注意有一些值需要补0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: green;
margin: 10px auto;
}
/* 第一个值 :Npx 阴影向水平方向偏移N个像素 正数往右 负数往左 */
div:nth-child(1){
box-shadow: -10px 0;
}
/* 第二个值 :Npx 阴影向垂直方向偏移N个像素 正数往下 负数往上 */
div:nth-child(2){
box-shadow: 0px -10px;
} div:nth-child(3){
box-shadow: 10px 10px;
}
/* 第三个值 :羽化大小 (模糊的大小) */
div:nth-child(4){
box-shadow: 10px 10px 50px;
}
/* 第四个值 :阴影尺寸 */
div:nth-child(5){
box-shadow: 0px 0px 10px 5px;
}
/* 第五个值 :颜色 默认值是黑色 */
div:nth-child(6){
box-shadow: 0px 0px 10px 5px rgba(100,100,100,0.5);
}
/* 第六个值 内外阴影 默认是外阴影 内阴影是inset */
div:nth-child(7){
box-shadow: 0px 0px 10px 5px red inset;
}
/* 阴影可以写多组 用逗号隔开*/
div:nth-child(8){
box-shadow: 0px 0px 10px 5px red inset,5px 5px 5px 5px pink,10px 10px 5px 5px blue;
}
div:nth-child(9){
box-shadow: 5px 5px red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
边框图片border-image(了解,有兼容性问题,同时效果难做)
以九宫格的方式来切割图片,然后把每部分图片平铺作为边框。
值说明:
- border-image-source:url('border.png'); 图片路径
- border-image-slice:26;图片切割,不要带单位,遵从九宫格式切图法(上下左右各来一刀)
- border-image-repeat:round或者stretch或者repeat; round没有瑕疵,stretch默认拉伸,repeat 平铺(可能有瑕疵)
- 简写:border-image:url('border.png') 26 round;
背景图片系列(重点)
1.背景图片的基准点
background-origin:值
- border-box:忽略边框 直接从边框的起始 0 ,0点平铺
- padding-box:默认值,忽略padding 直接从padding的起始 0 ,0点平铺
- content-box:从内容部分开始平铺 跟padding有关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 800px;
height: 800px;
border: 10px dashed #000;
background: url(image/heihei.jpg) 0 0 no-repeat;
/* padding-box 默认取值,从padding的起始点开始平铺 padding的大小不会产生影响*/
/* border-box 从border的起始点开始平铺 border的大小不会产生影响 */
/* content-box 从内容的起始点开始平铺,会留出padding的位置 */
background-origin: content-box;
padding: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.多重背景
背景图片之间用逗号隔开,可以写多组,最先渲染的图片有可能会遮住后面渲染的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 800px;
height: 800px;
border: 10px dashed #000;
background: url(image/heihei.jpg) 0 0 no-repeat,url(image/hehe.png) right bottom no-repeat,url(image/11051156_1536_864.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.背景大小
background-size:值
- 当只有一个值的情况下,宽度实现拉伸,并且高度会保持等比例,可以支持px,也可以支持百分比,百分比参照的是这个盒子本身的宽度
- 当有两个值的情况下,宽度和高度会分别拉伸到对应的值,可能会变形,可以支持px,也可以支持百分比,百分比参照的是这个盒子本身的宽度
- contain 当图片的宽度或者是高度在缩放的时候有一个“碰到”了盒子的边缘,则停止变化,(宽度或高度满足一个即可)
- 在contain的基础上保证不留白,这就是cover的效果(宽度和高度都需要满足)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 800px;
height: 800px;
border: 10px dashed #000;
background: url(image/Aatrox_1.jpg) 0 0 no-repeat;
/* 一个值的情况下,宽度会进行拉伸,高度会保持等比例 */
/* 两个值的情况下,宽度和高度都会拉伸,可能会产生变形 */
/* 可以接受百分比 百分比参照的是盒子的宽和高 */
/* contain 当图片的宽度或者是高度有一个达到了最大值,整体停止缩放 可能会带来留白呀*/
/* cover 在contain的基础上,保持不留白,继续放大,知道另外一个边也得到最大值 */
background-size:cover; /* 预告: background-size会在自适应页面里面用到,在全屏轮播图里面用到 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
盒子内减box-sizing
之前我们的盒子的实际宽度是 实际宽度 = width + padding + border,而内减属性会自动帮我们减去padding和border值 ,所以用了内减的盒子实际宽度就等于width,至于padding和border的值会自动被width内减掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: yellowgreen;
margin: 10px auto;
}
div:nth-child(2){
padding: 10px;
}
div:nth-child(3){
padding: 10px;
border: 10px solid hotpink;
}
div:nth-child(4){
padding: 10px;
border: 10px solid hotpink;
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- 一个盒子真正的实际宽度包括 Border + padding + width
在css3中,可以借助于border-sizing去实现盒子自动内减,有两个值
broder-box
content-box broder-box 内减掉边框和padding
content-box 是默认值 该是多少就是多少
-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
渐变
1.线性渐变
background:-webkit-linear-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 10px auto;
/* 线性渐变
语法:background:linear-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);
(1)需要添加私有前缀
(2)第一个参数,起始位置 可以接受方位名词 也可以是一个点
也可以是deg 角度 控制的是渐变线的角度 正值是逆时针,负值是顺时针
(3)颜色 可以是任意颜色
*/
background: -webkit-linear-gradient(45deg,red 20%,green 60%,blue);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.径向渐变
background:-webkit-radial-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 10px auto;
/* 径向渐变
语法:background:radial-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);
(1)需要添加私有前缀
(2)第一个参数,起始位置 可以接受方位名词 也可以是一个点
也可以是像素 不接受deg
(3)颜色 可以是任意颜色
*/
background: -webkit-radial-gradient(150px 150px,red 20%,green 60%,blue 10%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
总结:
- 两种渐变的参数都是一样的 ,起始位置都接受方位名词
- 线性渐变的起始位置还能接受deg 角度 径向渐变不能接受deg但是接受px
- 需要添加私有前缀
- 颜色位置的取值遵守递增的关系
私有前缀
作用:兼容低版本的一些高级浏览器,或者一些特定的css3属性需要添加私有前缀才起作用 每一条css3属性合理来说都需要添加对应浏览器的前缀,以保证其兼容性
- 谷歌 苹果:-webkit
- 火狐:-moz-
- IE:-ms-
- o:-o-
注意:在手机端,一般来说只需要写一个-webkit-(针对国内的绝大部分手机端)
添加的位置:大部分都是直接添加到最前面,css2没有的属性都是添加在最前面的,有一些是css2就有的属性是添加在后面的(例如:background:-webkit-linear-gradient())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3学习笔记1-选择器和新增属性的更多相关文章
- [CSS3] 学习笔记-CSS选择器
CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...
- css权威指南学习笔记 —— css选择器
1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器: p>a a是直接是p的 ...
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- CSS3学习笔记(1)-CSS3选择器
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- [CSS3] 学习笔记-CSS3选择器详解(一)
1.属性选择器 在CSS3中,追加了3个属性选择器,分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. <!doctype html> ...
- [CSS3] 学习笔记-选择器详解(二)
1.选择器first-child.last-child.nth-child和nth-last-child 利用first-child.last-child.nth-child和nth-last-chi ...
- 十天精通CSS3学习笔记 part2
第6章 征服CSS3选择器(上) 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS ...
- CSS学习笔记(1):选择器
一.元素选择器 HTML文档元素就是最基本的选择器 如: <!DOCTYPE html> <html lang="en"> <head> < ...
- CSS3学习笔记之linear-gradient
我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...
随机推荐
- linux创建动态库
[1]新建源程序sharelib.c /************************************************************************* > F ...
- 配置DNS服务器,实现局域网内的地址正反向解析
这里会用到BIND(Berkeley Internet Name Domain) 首先查询下本地bind有没有安装 yum list all | grep "^bind" 如果没有 ...
- UML类图分析
继承: 实现: 关联: 依赖: 组合: 聚合:
- Could not load java.net.BindException错误解决
出现了错误异常:信息: Illegal access: this web application instance has been stopped already. Could not load ...
- liunx之:ln命令
linux 一个很重要的命令 它的功能是为某一个文件在另外一个位置建立一个同步的链接,这个命令最常用的参数是-s,具体用法是: ln -s 源文件 目标文件 -s 是 symbolic的意思 ...
- dw的流体网格布局
在设计视图拖拽 在插入面板中选择插入流体网格布局标签 在对话框中如果不选中新建行复选框 如果总的列数是5列 一行的列宽和上一行的列宽加起来没有5列的话,下一行会上浮
- alibaba-dexposed 原理解析
alibaba-dexposed 原理解析 使用参考地址: http://blog.csdn.net/qxs965266509/article/details/49821413 原理参考地址: htt ...
- js 防止页面后退的方法
//防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function ( ...
- cellmap for iphone
说明:Cellmap的Iphone版本已经上架APP Store. 如需下载,可以登陆app store,然后搜索cellmap进行下载. 或者直接登陆以下地址下载: https://itunes.a ...
- ubuntu下sublime中文无法输入的问题
感谢- http://www.cnblogs.com/ningvsban/p/4346766.html