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 ...
随机推荐
- ireport开发报表,Java和JSP端如何集成
Java端: @RequestMapping("/report") public String report() { return "/credit/report/rep ...
- js 网站顶部通用导航
js代码: (function (scriptId, styleVersion) { var hotgameData = { 'title': '热门游戏', 'list': [ {'text': ' ...
- B - Encoded Love-letter 字符串的处理
B - Encoded Love-letter Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & % ...
- Socket编程基础——Socket选项
有些情况下,我们需要对Socket行为和属性进一步控制,例如修改缓冲区大小,查看Socket状态,这就需要设置/获取Socket选项. 1.获取Socket选项int getsockopt(SOCKE ...
- map的应用
1.map最基本的构造函数: map<string , int >mapstring; map<int ,string >mapint; map&l ...
- async 函数学习笔记
async函数就是Generator函数的语法糖. var fs = require('fs'); var readFile = function (fileName) { return new Pr ...
- LeetCode【169. Majority Element】
Given an array of size n, find the majority element. The majority element is the element that appear ...
- command -ubuntu
WC -c, --bytes print the byte counts -m, --chars print the character counts -l, --lines print the ne ...
- android中的AIDL进程间通信
关于IPC应该不用多介绍了,Android系统中的进程之间不能共享内存,那么如果两个不同的应用程序之间需要通讯怎么办呢?比如公司的一个项目要更新,产品的需求是依附于当前项目开发一个插件,但是呢这个插件 ...
- duplicate symbols for architecture armv7解决办法
XCODE编译的时候报错:duplicate symbols for architecture armv7 1.首先排查是否有名字重复的文件: 2.检查是否在#import头文件的时候,不小心 ...