CSS3基础01
一、选择器:
分为关系选择器 ,属性选择器 ,伪类选择器
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/ 阿里
兼容:支持所有的浏览器
步骤:(这里列举了阿里的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的更多相关文章
- CSS3基础入门01
CSS3 基础入门 01 前言 相对于css2来说,css3更新了很多的内容,其中包括选择器.颜色.阴影.背景.文本.边框.新的布局方案.2d.3d.动画等等. 而如果想要学习css3的诸多部分,不妨 ...
- CSS3基础入门03
CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径 ...
- h5、css3基础
一.html(超文本标记语言) 作用:实现页面布局 页面由许多标记符号组成 由浏览器解释执行 二.html主题创建方式 !(英文状态)+tab html:4s+tab html:5+tab 三.标签 ...
- javascript基础01
javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...
- Androd核心基础01
Androd核心基础01包含的主要内容如下 Android版本简介 Android体系结构 JVM和DVM的区别 常见adb命令操作 Android工程目录结构 点击事件的四种形式 电话拨号器Demo ...
- java基础学习05(面向对象基础01)
面向对象基础01 1.理解面向对象的概念 2.掌握类与对象的概念3.掌握类的封装性4.掌握类构造方法的使用 实现的目标 1.类与对象的关系.定义.使用 2.对象的创建格式,可以创建多个对象3.对象的内 ...
- css3基础教程:CSS3弹性盒模型
今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...
- Linux基础01 学会使用命令帮助
Linux基础01 学会使用命令帮助 概述 在linux终端,面对命令不知道怎么用,或不记得命令的拼写及参数时,我们需要求助于系统的帮助文档:linux系统内置的帮助文档很详细,通常能解决我们的问题, ...
- css3基础教程十六变形与动画animation
前面我们讲过的变形与动画一般都是通过鼠标的单击.获得焦点,被点击或对元素进行一定改变后以后触发效果的,那么有没有像Flash一样自动播放的动画效果呢?答案当然是肯定的,这就是我们今天要讲到的anima ...
随机推荐
- LPTHW 笨方法学python 19章
本章节,我只是把所有的输出加上了自己的注释. #!/usr/bin/env python # -*- coding:utf-8 -*- def cheese_and_crakers(cheese_co ...
- Codeforces 733F Drivers Dissatisfaction
题意:有n个点,m条边,每条边有不满意度w[i],以及减小一个不满意度代价c[i],问给你s元用来减少代价,找到一个总不满意度最小的生成树,保证有解.(减少后的不满意度可以为负数)思路:显然所有的钱都 ...
- 原型模式(Prototype Pattern)
用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象. 它通过复制一个已经存在的实例来返回新的实例,而不是新建实例.被复制的实例就是我们所称的原型,这个原型是可定制的. 原型模式多用于创建复杂 ...
- div的显示和隐藏
本文从学习角度出发,仅当做笔记.高手可以忽略本文. 借助div的display属性可以实现div的显示或隐藏,而且在隐藏后不占用原来显示的空间. js控制显示和隐藏的代码: <script ty ...
- JS--事件模块
一.JS event 的浏览器兼容 说到JS事件,不能不先讲一下事件流 1 事件流的定义:事件流是指从页面中接收事件的顺序 如下图所示,假设有四个圆层叠在一起,如果我们单击图中最里面的那个圆,那么我们 ...
- Shiro 整合SpringMVC 并且实现权限管理
Apache Shiro是Java的一个安全框架.目前,使用Apache Shiro的人越来越多,因为它相当简单,对比Spring Security,可能没有Spring Security做的功能强大 ...
- 【AT91SAM3S】英倍特串口示例工程05-UART中,串口是怎样初始化的
在这个示例工程的main.c文件中,进入main之后,没有发现串口功能的任何配置.直接使用了printf这个东西进行输出.将软件下载到开发板上之后,在电脑端使用串口软件,可以看板子有数据发来.说明这个 ...
- UVA 753 UNIX 插头(EK网络流+Floyd传递闭包)
UNIX 插头 紫书P374 [题目链接]UNIX 插头 [题目类型]EK网络流+Floyd传递闭包 &题解: 看了书之后有那么一点懂了,但当看了刘汝佳代码后就完全明白了,感觉他代码写的好牛逼 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存
本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...
- 关于AX 2012 SSRS 导出PDF时出现group by 分页错误的情况
近期,在AX 2012 上一个二次开发的报表出现了一个奇怪的现象,报表设计正常,分组.分页设计正常, 但出现问题在,当报表在AX 上打开,按dataareaid 分页是正常的,如下图中title中的 ...