一、选择器:

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

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. LPTHW 笨方法学python 19章

    本章节,我只是把所有的输出加上了自己的注释. #!/usr/bin/env python # -*- coding:utf-8 -*- def cheese_and_crakers(cheese_co ...

  2. Codeforces 733F Drivers Dissatisfaction

    题意:有n个点,m条边,每条边有不满意度w[i],以及减小一个不满意度代价c[i],问给你s元用来减少代价,找到一个总不满意度最小的生成树,保证有解.(减少后的不满意度可以为负数)思路:显然所有的钱都 ...

  3. 原型模式(Prototype Pattern)

    用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象. 它通过复制一个已经存在的实例来返回新的实例,而不是新建实例.被复制的实例就是我们所称的原型,这个原型是可定制的. 原型模式多用于创建复杂 ...

  4. div的显示和隐藏

    本文从学习角度出发,仅当做笔记.高手可以忽略本文. 借助div的display属性可以实现div的显示或隐藏,而且在隐藏后不占用原来显示的空间. js控制显示和隐藏的代码: <script ty ...

  5. JS--事件模块

    一.JS event 的浏览器兼容 说到JS事件,不能不先讲一下事件流 1 事件流的定义:事件流是指从页面中接收事件的顺序 如下图所示,假设有四个圆层叠在一起,如果我们单击图中最里面的那个圆,那么我们 ...

  6. Shiro 整合SpringMVC 并且实现权限管理

    Apache Shiro是Java的一个安全框架.目前,使用Apache Shiro的人越来越多,因为它相当简单,对比Spring Security,可能没有Spring Security做的功能强大 ...

  7. 【AT91SAM3S】英倍特串口示例工程05-UART中,串口是怎样初始化的

    在这个示例工程的main.c文件中,进入main之后,没有发现串口功能的任何配置.直接使用了printf这个东西进行输出.将软件下载到开发板上之后,在电脑端使用串口软件,可以看板子有数据发来.说明这个 ...

  8. UVA 753 UNIX 插头(EK网络流+Floyd传递闭包)

    UNIX 插头 紫书P374 [题目链接]UNIX 插头 [题目类型]EK网络流+Floyd传递闭包 &题解: 看了书之后有那么一点懂了,但当看了刘汝佳代码后就完全明白了,感觉他代码写的好牛逼 ...

  9. 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存

    本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...

  10. 关于AX 2012 SSRS 导出PDF时出现group by 分页错误的情况

    近期,在AX  2012 上一个二次开发的报表出现了一个奇怪的现象,报表设计正常,分组.分页设计正常, 但出现问题在,当报表在AX 上打开,按dataareaid 分页是正常的,如下图中title中的 ...