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 笔记的更多相关文章

  1. css3笔记系列-3.css中的各种选择器详解,不看后悔系列

    点击上方蓝色字体,关注我 最详细的css3选择器解析 ​ 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...

  2. 【css3笔记】---- 渐变的秘密

    <CSS揭秘>这本书非常不错,充满了干货和惊喜.以下主要是关于使用渐变做出来的一些效果的笔记.请用最新的现代浏览器观看. 首先要回顾下一个css语句: linear-gradient([ ...

  3. CSS3 笔记四(Transforms/Transition/Animations)

    CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate() T ...

  4. CSS3 笔记三(Shadow/Text/Web Fonts)

    CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...

  5. CSS3 笔记二(Gradients)

    CSS3 Gradients Two types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial ...

  6. CSS3 笔记一(Rounded Corners/Border Images/Backgrounds)

    CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...

  7. CSS3笔记

    CSS/CSS3在线手册:http://www.css119.com/book/css/   CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...

  8. CSS3笔记(一)

    最开始的时候 CSS3产生的一个新属性是一个浏览器的私有的,然后W3C 可能会拿来采用做个标准,再没公布标准之前就只能用私有属性(加前缀)来表达各自厂商的实现,主要是CSS3刚出现那会儿,它暗示该CS ...

  9. CSS3笔记之第四天

    CSS3 2D 转换 了解2D变换方法: translate() rotate() scale() skew() matrix() translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参 ...

  10. CSS3笔记之第三天

    CSS浮动 float:right 伪类: a:link {color:#FF0000;}      /* 未访问链接*/ a:visited {color:#00FF00;}  /* 已访问链接 * ...

随机推荐

  1. Java ConcurrentHashMap初始化

    初始化ConcurrentHashMap时可以指定map大小,由于ConcurrentHashMap代码默认大小是2n,这里需要把用户填的大小转换成2n备注:代码基于jdk 1.8.0_91Concu ...

  2. Java内部类详解 2

    Java内部类详解 说起内部类这个词,想必很多人都不陌生,但是又会觉得不熟悉.原因是平时编写代码时可能用到的场景不多,用得最多的是在有事件监听的情况下,并且即使用到也很少去总结内部类的用法.今天我们就 ...

  3. 前端(三大框架、Bootstrap,jQuery,自整理)

    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...

  4. 使用Android Studio搭建Android开发环境

    一.Android Studio简单介绍 2013年GoogleI/O大会首次发布了Android Studio IDE(Android平台集成开发环境).它基于Intellij IDEA开发环境,旨 ...

  5. git如何进行远程分支切换

    git如何进行远程分支切换 git上查看远程分支命令: git branch -a  例如: 然后我想切换到daily/1.0.0远程分支:前提是必须要创建一个本地分支,并让它和远程分支进行关联,gi ...

  6. 【PIC单片机】MPLAB X IDE快速入门指南

    引言:近期由于项目实践需要,开始动手学习相关硬件知识.从PIC单片机入手. 单片机学习核心要点:查数据手册 配置寄存器 一.基于MPLAB X IDE配置位设置 MPLAB X IDE和MPLAB I ...

  7. python 后台运行命令

    nohup python a.py  > a.log 2>&1 & 在窗口中单开虚拟session: tmux new -s "name" 推出虚拟窗口 ...

  8. .NET部分知识点整理

    .Net学习 Visual Studio2018 企业版:NJVYC-BMHX2-G77MM-4XJMR-6Q8QF 专业版:KBJFW-NXHK6-W4WJM-CRMQB-G3CDH 开发工具常用V ...

  9. CSS3中REM使用详解

    px 在Web页面制作中,我们一般使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改 ...

  10. python入门11 元组tuple

    tuple元组是一种不可变数据类型,也是一种序列,因此可用序列的各类方法,比如切片和索引 #coding:utf-8 #/usr/bin/python """ 2018- ...