一、选择器:

分为关系选择器 ,属性选择器 ,伪类选择器

1.1关系选择器 

后代选择器   ul li  选择所有的后代元素

子代选择器   ul > li 选择ul的儿子

紧邻选择器  .box + li 选择.box后面的一个li元素

兄弟选择器  .box ~ li 选择.box后面所有的li元素

1.2属性选择器  :通过属性来选择对应的元素

(1)E[属性名] : 选择所有的具备这个属性的E元素

(2)E[属性名=值] :选择所有的具备这个‘属性 = 对应值’的E元素

(3)E[属性名~=值]:选择所有的包含这个‘属性 = 对应值’的E元素

css3新增的:

(4)E[属性名^=值]:从头去匹配这个‘属性 = 对应值’的E元素

(5)E[属性名$=值]:从尾去匹配这个‘属性 = 对应值’的E元素

(6)E[属性名*=值]: 从任意位置去匹配这个‘属性 = 对应值’的E元素

1.3伪类选择器

我们以前学过 before after  a:link

(1)E:first-child  从父级出发找到第一个孩子为E的元素   (css2)

(2)E:last-child 从父级出发找到最后一个孩子为E的元素   (css3)

(3)E:nth-child(N)从父级出发找到第N个孩子为E的元素  (css3)

小知识点:

(1)even 控制偶数 odd控制奇数

(2)nth-child(5n+1) : N是从0开始逐次+1

(3)有一个跟nth-child()特别类似的一个选择器 nth-of-type()

1.4其他选择器

(1)input:focus{} => 选择获取焦点的表单

(2)input:enabled{} => 选择可操控的表单元素

(3)input:disabled{} => 选择不可操控的表单

(4)E:target{} => 选择通过锚点跳转的当前E元素

(5)E:empty{} => 选择没有子节点的E元素包括文本节点(基本不用)

(6)Input:checked => 选择被选中的checkbox表单

二、伪元素 before after

作用:渲染一个虚拟的标签插入到当前元素的内部的前面或者后面

总结:

(1)伪元素默认是行内元素,我们可以进行转化,在实际工作中,多用来模拟一些小的标签去装饰

(2)因为伪元素是不存在的,所以不能直接用JS去获取(可以利用类去覆盖之前的样式)

(3)清除浮动的底层原理:就是让一个伪元素(因为伪元素不占dom内存)去清除浮动,从而节约了dom内存。

(4)text-indent针对伪类不起作用

(5)当伪类需要配合iconfont去使用的话需要打开iconfont.css 拿到content里面对应的值

(6)当伪元素需要hover的效果的时候不能直接hover 需要借助于父级 写法:父级:hover:伪元素

(7)content一定不能省略,即使里面没有内容

三、字体的用法

网址:http://www.iconfont.cn/  阿里

http://www.youziku.com/  有字库

兼容:支持所有的浏览器

步骤:(这里列举了阿里的web字体的使用)

(1)进入官网  点击webfont

(2)输入对应的文字 然后选择添加字体

(3)可以直接引用线上地址或者本地下载,引用线上地址需要添加http,(在服务器环境下可以不用),如果是本地下载需要解压,打开demo.html复制代码即可

(4)注意修改路径,给文字添加上对应的类

四、 圆角

broder-radius:值

值说明:

(1)一个值设置的是盒子的四个角的水平和垂直半径

(2)每个角都可以单独进行设置 其取值顺序是左上 右上 右下 左下顺时针设置

(3)可以简写  简写的逻辑跟padding和margin一样

(4)单位支持像素,和百分比(参照的是宽度和高度)

(5)可以用 水平半径/垂直半径 去单独控制半径 并且每一个半径都可以单独控制

5 阴影

语法:box-shadow:值

值说明:

(1)第一个值 :Npx  阴影向水平方向偏移N个像素  正数往右 负数往左

(2)第二个值 :Npx  阴影向垂直方向偏移N个像素  正数往下 负数往上

(3)第三个值 :羽化大小 (模糊的大小)

(4)第四个值 :阴影尺寸

(5)第五个值 :颜色 默认值是黑色

(6)第六个参数: 内外阴影 默认是外阴影 内阴影是inset

(7)阴影可以写多个,中间用逗号隔开

(8)阴影可以简写,但是需要注意有一些值需要补0

文字阴影

语法: text-shadow:水平偏移 垂直偏移 羽化大小 颜色

巧妙运用可以制作文字凹凸效果

6边框图片

语法:border-image:值

遵从的是九宫格式切图,上下左右分别来一刀

值说明:

(1)border-image-source:url('border.png'); 图片路径

(2)border-image-slice:26;图片切割,不要带单位,遵从九宫格式切图法(上下左右各来一刀)

(3)border-image-repeat:round或者stretch或者repeat; round没有瑕疵,stretch默认拉伸,repeat 平铺(可能有瑕疵)

(4)简写:border-image:url('border.png') 26 round;

总结:是以九宫格式的方式切图

7 背景系列

 (7.1)背景图片的基准点

语法:background-origin:值

值说明:

(1)border-box  :忽略边框 直接从边框的起始 0 ,0点平铺

(2)padding-box: 默认值,忽略padding 直接从padding的起始 0 ,0点平铺

(3)content-box :从内容部分开始平铺 跟padding有关系

7.2多重背景

说明:背景图片之间用逗号隔开,可以写多组,最先渲染的图片有可能会遮住后面渲染的图片

7.3)控制背景图片的大小

语法:background-size:值

值说明:

(1)当只有一个值的情况下,宽度实现拉伸,并且高度会保持等比例,可以支持px,也可以支持百分比,百分比参照的是这个盒子本身的宽度

(2)当有两个值的情况下,宽度和高度会分别拉伸到对应的值,可能会变形,可以支持px,也可以支持百分比,百分比参照的是这个盒子本身的宽度

(3)contain 当图片的宽度或者是高度在缩放的时候有一个“碰到”了盒子的边缘,则停止变化

(4)在contain的基础上保证不留白,这就是cover的效果

8盒子内减 --- 重要

之前我们的盒子的实际宽度是 实际宽度 = width + padding + border,而内减属性会自动帮我们 padding 和 border值 ,所以 用了内减的盒子实际宽度就等于width,至于padding和border的值会自动被width内减掉

在实际工作中,内减配合百分比布局是实现移动端布局的方式之一

(9)渐变

9.1)线性渐变

background:-webkit-linear-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);

总结:(1)需要添加私有前缀

(2)起始位置建议用方位名词去控制

9.2)径向渐变

background:-webkit-radial-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);

总结:

(1)起始位置可以是方位名词 也可以是角度 角度主要是渐变线的角度 渐变线默认是水平方向 箭头朝右,正值逆时针旋转 负数反之(线性渐变)

(2)不支持角度 支持像素 和方位名词 (径向渐变)

9.3私有前缀

每一条css3属性合理来说都需要添加对应浏览器的前缀,以保证其兼容性

谷歌 苹果:-webkit-

火狐:-moz-

IE:-ms-

o:-o-

小细节:在手机端,一般来说只需要写一个-webkit-(针对国内的绝大部分手机端)

添加的位置:大部分都是直接添加到最前面,css2没有的属性都是添加在最前面的,有一些是css2就有的属性是添加在后面的(background:-webkit-linear-gradient())

CSS3基础01的更多相关文章

  1. CSS3基础入门01

    CSS3 基础入门 01 前言 相对于css2来说,css3更新了很多的内容,其中包括选择器.颜色.阴影.背景.文本.边框.新的布局方案.2d.3d.动画等等. 而如果想要学习css3的诸多部分,不妨 ...

  2. CSS3基础入门03

    CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径 ...

  3. h5、css3基础

    一.html(超文本标记语言) 作用:实现页面布局 页面由许多标记符号组成 由浏览器解释执行 二.html主题创建方式 !(英文状态)+tab html:4s+tab html:5+tab 三.标签 ...

  4. javascript基础01

    javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...

  5. Androd核心基础01

    Androd核心基础01包含的主要内容如下 Android版本简介 Android体系结构 JVM和DVM的区别 常见adb命令操作 Android工程目录结构 点击事件的四种形式 电话拨号器Demo ...

  6. java基础学习05(面向对象基础01)

    面向对象基础01 1.理解面向对象的概念 2.掌握类与对象的概念3.掌握类的封装性4.掌握类构造方法的使用 实现的目标 1.类与对象的关系.定义.使用 2.对象的创建格式,可以创建多个对象3.对象的内 ...

  7. css3基础教程:CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  8. Linux基础01 学会使用命令帮助

    Linux基础01 学会使用命令帮助 概述 在linux终端,面对命令不知道怎么用,或不记得命令的拼写及参数时,我们需要求助于系统的帮助文档:linux系统内置的帮助文档很详细,通常能解决我们的问题, ...

  9. css3基础教程十六变形与动画animation

    前面我们讲过的变形与动画一般都是通过鼠标的单击.获得焦点,被点击或对元素进行一定改变后以后触发效果的,那么有没有像Flash一样自动播放的动画效果呢?答案当然是肯定的,这就是我们今天要讲到的anima ...

随机推荐

  1. ireport开发报表,Java和JSP端如何集成

    Java端: @RequestMapping("/report") public String report() { return "/credit/report/rep ...

  2. js 网站顶部通用导航

    js代码: (function (scriptId, styleVersion) { var hotgameData = { 'title': '热门游戏', 'list': [ {'text': ' ...

  3. B - Encoded Love-letter 字符串的处理

    B - Encoded Love-letter Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & % ...

  4. Socket编程基础——Socket选项

    有些情况下,我们需要对Socket行为和属性进一步控制,例如修改缓冲区大小,查看Socket状态,这就需要设置/获取Socket选项. 1.获取Socket选项int getsockopt(SOCKE ...

  5. map的应用

    1.map最基本的构造函数:    map<string , int >mapstring;         map<int ,string >mapint;    map&l ...

  6. async 函数学习笔记

    async函数就是Generator函数的语法糖. var fs = require('fs'); var readFile = function (fileName) { return new Pr ...

  7. LeetCode【169. Majority Element】

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  8. command -ubuntu

    WC -c, --bytes print the byte counts -m, --chars print the character counts -l, --lines print the ne ...

  9. android中的AIDL进程间通信

    关于IPC应该不用多介绍了,Android系统中的进程之间不能共享内存,那么如果两个不同的应用程序之间需要通讯怎么办呢?比如公司的一个项目要更新,产品的需求是依附于当前项目开发一个插件,但是呢这个插件 ...

  10. duplicate symbols for architecture armv7解决办法

    XCODE编译的时候报错:duplicate symbols for architecture armv7   1.首先排查是否有名字重复的文件:   2.检查是否在#import头文件的时候,不小心 ...