我的CSS3学习笔记
1.元字符使用:
[]: 全部可选项
||:并列
|:多选一
?: 0个或者一个
*:0个或者多个
{}: 范围
2.CSS3属性选择器:
E[attr]:存在attr属性即可;
E[attr=val]:属性值完全等于val
E[attr*=val]:属性值里包含val字符并且在“任意”位置
E[attr^=val]:属性值里包含val字符并且在“开始”位置
E[attr$=val]:属性值里包含val字符并且在“结束”位置
3.CSS3伪类选择器:
P:first-child:P元素的父元素的第1个子元素(第一个元素必须是p标签,否则无效)
P:last-child:其父元素的最后1个子元素
P:nth-child(n): 其父元素的第n个子元素(n遵循线性变化,其取值0、1、2、3、4...)
P:nth-last-child(n): 其父元素的第n个子元素(倒着数)
4.伪类:
E:empty :空伪类;选中没有任何子节点的E元素;(使用不是非常广泛)
E:target :目标伪类;结合锚点进行使用,处于当前锚点的元素会被选中;
E:not(selector) :排除伪类;除selector(任意选择器)外的元素会被选中;
5.伪元素:
1、E::first-letter文本的第一个单词或字(如中文、日文、韩文等)
2、E::first-line 文本第一行;
3、E::selection 可改变选中文本的样式;
4、E::before和E::after:在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。
6.颜色:
RGBA:Red、Green、Blue、Alpha(红、绿、蓝、透明度)
HSLA:Hue、Saturation、Lightness、Alpha(色调(0-360)、饱和度(0%~100%)、亮度(0%~100%)、透明度(0~1))
注意:Alpha透明度相较opacity不可继承,不会影响子元素的透明度。
关于CSS透明度:
1、opacity只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度;
2 、transparent 不可调节透明度,始终完全透明
7.文本阴影 text-shadow(水平偏移量,垂直偏移量,模糊度,颜色)
如:text-shadow: 2px 2px 2px #CCC;(模糊度是不能为负值)
8.盒模型
1、box-sizing: border-box 盒子大小为 width
2、box-sizing: content-box 盒子大小为 width + padding + border
9.边框圆角 border-radius
10.边框阴影 box-shadow(水平偏移量,垂直偏移量,模糊度,颜色)
如box-shadow: 5px 5px 5px #CCC(模糊度是不能为负值;inset可以设置内阴影)
11.边框图片 border-image
参数详解
1、border-image-source
指定图片路径
2、border-image-repeat
指定裁切好的虚拟图片的平铺方式
a) round会自动调整尺寸,完整显示边框图片
b) repeat 单纯平铺,多余部分,会被“裁切”而不能完整显示。
3、border-image-slice
4、border-image-width
设置边框背景区域的大小,这个值的大小不会影响到盒子的大小。
12.背景
1.background-size:背景图片大小
其参数设置如下:
a) 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)
b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。
c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
2、background-origin:背景图片定位的(background-position)参照原点
参数:
border-box以边框做为参考原点;
padding-box以内边距做为参考原点;
content-box以内容区做为参考点;
3、background-clip:对背景区域进行裁切,改变背景区域大小
参数:
border-box裁切边框以内为背景区域;
padding-box裁切内边距以内为背景区域;
content-box裁切内容区做为背景区域;
13.渐变
1.线性渐变(横向的):linear-gradient【必要元素:方向、起始色、终止色、渐变距离】
2.径向渐变(由一个中心点开始扩散):radial-gradient【必要元素:圆半径,中心点、起始色、终止色、渐变范围】
注:
注意:a 关于中心点
中心位置参照的是盒子的左上角,例如background-image: radial-gradient(120px at 0 0 yellow green)其圆心点为左上角,background-image: radial-gradient(120px at 0 100% yellow green)其圆心为左下角。
b 关于辐射范围
其半径可以不等,即可以是椭圆,如background-image: radial-gradient(120px 100px at 0 0 yellow green)会是一个椭圆形(横轴120px、纵轴100px)的渐变。
14.过渡 transition
过渡属性详解:
设置过渡属性:transition-property: all;
设置过渡时间:transition-duration: 2s;
过渡延时:transition-delay: 3s;
过渡速度:transition-timing-function: linear;
15.2D转换
1.移动 translate(X轴方向移动的距离,Y轴方向移动的距离),单位像素值或者百分百,当为百分比时,是相对于自身的宽度和高度;
2.缩放scale(水平缩放,垂直缩放),值可以取小数。
3.旋转 rotate(deg) :正值为顺时针,负值为逆时针;
4.倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜,可为负值,第二个参数不写默认为0。
5.矩阵matrix() 把所有的2D转换组合到一起,需要6个参数(了解)。
6.transform-origin可以调整元素转换的原点
连写:transform: translate() rotate() scale() 顺序会影响转换的效果。
16.3D转换
rotateX:绕X轴旋转
rotateY:绕Y轴旋转
rotateZ.:绕Z轴旋转
translateX:在X轴移动
translateY:在Y轴移动
translateZ:在Z轴移动
用法:transform: rotateX(180deg); 表示绕X轴转180度
其他:
透视:perspective:
a) 作为一个属性,设置给父元素,作用于所有3D转换的子元素
b) 作为transform属性的一个值,做用于元素自身
transform-style: preserve-3d; 让元素在3D空间展示
backface-visibility:设置元素背面是否可见
学习文档:CSS3动画库;animate.css
17.CSS3动画
原理:设置多个节点来精确控制一个或者一组动画。
1.必要元素:
a、通过@keyframes指定动画序列;
/*定义动画序列*/
@keyframes rotate {
0% {
transform: rotateZ(0deg) scale(1);
}
50% {
}
100% {
transform: rotateZ(360deg) scale(2);
}
}
b、通过百分比将动画序列分割成多个节点;
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素;
2.关键属性
a、animation-name设置动画序列名称
b、animation-duration动画持续时间
c、animation-delay动画延时时间
d、animation-timing-function动画执行速度,linear、ease等
e、animation-play-state动画播放状态,running、paused等
f、animation-direction动画逆播,alternate等
g、animation-fill-mode动画执行完毕后状态,forwards、backwards等
h、animation-iteration-count动画执行次数,inifinate等
i、steps(60) 表示动画分成60步完成
3.连写:animation: rotate 3s infinite linear;
18.伸缩布局 display:flex
1、必要元素:
a、指定一个盒子为伸缩盒子 display: flex
b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
c、明确主侧轴及方向
d、可互换主侧轴,也可改变方向
2、各属性详解
a、flex-direction调整主轴方向(默认为水平方向)
b、justify-content调整主轴对齐
c、align-items调整侧轴对齐
d、flex-wrap控制是否换行
e、align-content堆栈(由flex-wrap产生的独立行)对齐
f、flex-flow是flex-direction、flex-wrap的简写形式
g、flex子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配
h、order控制子项目的排列顺序,正序方式排序,从小到大
19.Web字体
五种字体类型:
A .ttf
B .otf
C .woff
D .eot
E .svg
查找中文字体的网站:http://www.zhaozi.cn/、http://www.youziku.com/
20.字体图标
用法:
1.定义字体,名字随便起
如:@font-face {
font-family: peach;
/* 指定字体文件,保证所有浏览器都能识别 */
src: url(../fonts/MiFie-Web-Font.ttf) format("truetype"), url(../fonts/MiFie-Web-Font.svg) format("svg"), url(../fonts/MiFie-Web-Font.woff) format("woff")
}
2.用乱码
.icon-mobilephone::before {
content: "\e908";
}
参考:
Font Awesome 使用介绍
http://fontawesome.dashgame.com/
定制自已的字体图标库:
过程:UI倒出svg格式的图片(矢量图)-->上传至iconfont.cn/其他-->生成字体图标-->生成字体文件
其他:
http://iconfont.cn/
https://icomoon.io/
SVG素材
http://www.iconsvg.com/
我的CSS3学习笔记的更多相关文章
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- CSS3学习笔记之linear-gradient
我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...
- CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
- 十天精通CSS3学习笔记 part4
CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- HTML5+CSS3学习笔记(一)
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
- CSS3学习笔记——伪类hover
最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示” ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Bo ...
- css3学习笔记三
css3有些特殊的元素选择器这和jquery相似.效果图如下
- HTML5+CSS3学习笔记(一) 概述
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...
随机推荐
- AtomicHashMap
folly/AtomicHashmap.h folly/AtomicHashmap.h introduces a synchronized UnorderedAssociativeContainer ...
- ceph集群jewel版本 rbd 块map 报错-故障排查
测试信息如下: [root@ceph_1 ~]# ceph osd pool lsrbdchy_123swimmingpool #新建rbd 块: rbd create swimmingpool/ba ...
- C语言和C++中的字符串(string)
知识内容: 1.C\C++字符串简述 2.C字符串相关操作 3.C++ string类相关操作 一.C\C++字符串简述 1.C语言字符串 C语言字符串是字符的数组.单字节字符串顺序存放各个字符串,并 ...
- Rpm打包程序
1.Rpm打包程序1.1为什么要使用rpm打包1.编译安装软件,优点是可以定制化安装目录.按需开启功能等,缺点是需要查找并实验出适合的编译参数,诸如MySQL之类的软件编译耗时过长.2.yum安装软件 ...
- C#中如何判断线程当前所处的状态
转自原文 在C#中如何判断线程当前所处的状态 在C#中,线程对象Thread使用ThreadState属性指示线程状态,它是带Flags特性的枚举类型对象. ThreadState 为线程定义了 ...
- KindEditor 和 xss过滤
KindEditor 1.进入官网 2.下载 官网下载:http://kindeditor.net/down.php 本地下载:http://files.cnblogs.com/files/wup ...
- BurpSuite系列(十二)----User options模块(用户选择)
一.简介 User options模块主要用来配置一些常用的选项. 二.模块说明 User options主要由4个模块组成: 1.Connections 连接 2.SSL 3.Display 4 ...
- python web框架简介Bottle Flask Tornado
Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Python的标准库外,其不依赖任何其他模块. ? 1 2 3 4 pip inst ...
- Pycharm 激活码 2019年1月9日16:57:13
K03CHKJCFT-eyJsaWNlbnNlSWQiOiJLMDNDSEtKQ0ZUIiwibGljZW5zZWVOYW1lIjoibnNzIDEwMDEiLCJhc3NpZ25lZU5hbWUiO ...
- IOS学习经验总结
学习ios有一段时间了,感觉有些盲目.有些迷茫,从网上收集了一些比人的学习经验,来参考. IOS学习经验总结--来自知乎网友 转自知乎:http://www.zhihu.com/question/20 ...