css3相关笔记(一)
1.css3现状:浏览器支持程度差,需要添加私有前缀,移动端支持优于pc端,因为移动端的浏览器都是最新版本的,css3也在不断改进中,应用的相对广泛。
2.实际工作中写网页要使用渐进增强原则:低版本的浏览器可以正常访问页面,高版本的浏览器访问页面用户体验更好。
3.实际工作中要考虑用户群体,遵照产品的方案,听技术的上司(最新的技术大多意味着兼容性不是很好)的安排。
4.css3的统一环境
◆Chrome ver 46+
◆Firefox ver 42+
◆PhotoShop CS6(建议)
◆其它浏览器暂不考虑
5.css2选择器
◆div {} 标签选择器
◆.box {}类名选择器
◆#box {}id选择器
◆div p {}后代选择器
◆div.box {}交集选择器
◆div,p,span {}并集选择器
◆div>p {}子代选择器
◆* {}通配符选择器
◆div+p {}后一个兄弟选择器(紧跟div的p)
◆div~p {}后同辈选择器
6.css3属性选择器
◆div[class] {} 表示选中页面带有class属性的div
◆div[class="box"] {}表示选中页面带有class属性并且属性值等于box的div
◆div[class^="bo"] {}表示选中页面带有class属性并且属性值以bo字符串开头的div
◆div[class$="ox"] {}表示选中页面带有class属性并且属性值以ox字符串结尾的div
◆div[class*="o"] {}表示选中页面带有class属性并且属性值必须包含o字符串的div
◆金色:#daa520;
7.css2伪类(状态伪类)
◆div:hover {}鼠标移入时
◆div:link {}正常状态下(一般用于超链接)
◆div:active {}鼠标点击时
◆div:visited {}鼠标点击后 (一般用于超链接)
8.css3伪类-结构伪类选择器
◆li:first-child {}选中父元素中所有的li中的第一个li
◆li:last-child {}选中父元素中所有的li中的最后一个li
◆li:nth-child(10) {}选中父元素中所有li中的第10个li
◆li:nth-child(odd) {}选中父元素中所有li中的奇数项(非索引)的li
◆li:nth-child(even) {}选中父元素中所有li中的偶数项(非索引)的li
◆li:nth-child(n) {}选中父元素中所有li中的所有的li(n从0开始,但是当n<1的时候无效,因为没有当前项为0的元素)
◆li:nth-child(2n) {}选中父元素中所有li中当前项(非索引)为2的倍数的li
◆li:nth-child(2n+1) {}选中父元素中所有li中当前项(非索引)为2的倍数+1的li
◆li:nth-child(-n+5) {}选中父元素中所有li中前五项的li(n从0开始,但是当n<1的时候无效,因为没有当前项为0的元素),因为当n为5时结果就小于1了,所以选中的就是-0+5、-1+5、-2+5、-3+5、-4+5这些结果的当前项的li,切记不能写成5-n,因为语法上是这样规定的
◆li:nth-child(7n) {}选中父元素中所有li中当前项为7的倍数的li
◆li:nth-child(7n-1) {}选中父元素中所有li中当前项为7的倍数-1(并不6的倍数哦,如果是6的倍数则为6n而不是7n-1)的li
◆li:nth-last-child(1) {}选中父元素中所有li中的最后一个li,因为nth-last-child与nth-child正好相反,nth-last-child是从后往前选,nth-child是从前往后选。
◆li:nth-last-child(-n+5) {}选中父元素中所有li中最后五项的li,原理和上面的差不多,但是一个是从前往后,一个是从后往前,切记不能写成5-n,因为语法上是这样规定的
★使用结构伪类选择器的问题在于,它是针对父容器中子元素的实际位置(该子元素在该父容器中所有子元素中排第几,也就是第几项),如果该父容器中的子元素的实际位置上不是你指定的元素标签,那么就找不到,结构伪类选择器是根据父元素中子元素的实际位置来找指定元素的,如果该位置上不是该标签,那么就找不到,这个问题往往很容易出错,所以计算该元素的位置时要特别准确。
9.css3伪类-新增状态伪类选择器
◆div:empty {}选中内容为空的div,连空字符都没有的div,表示内容为空的状态下的div,属于空伪类。
◆h2:target {}选中当前被激活的一个锚点(点击锚点链接后跳转到指定位置的那个id选择器的元素),表示在被激活状态下的锚点h2标签,属于目标伪类。
◆div:not(.box2) {}选中div中不是类名为box2的所有元素,属于排除伪类。
10.css3伪元素(伪元素在css2中是没有的概念,之前都是用:,在css3中有了这个概念,为了和伪类区分开来,使用::,并且必须要有content属性,由哪个元素产生的伪元素,那个伪元素就属于这个元素的一部分,并且伪元素在该元素的内部)
◆span::before {content:"前"}表示在span内部最前面添加一个伪元素,内容为字符串 前。
◆span::after {content:"后"}表示在span内部最后面添加一个伪元素,内容为字符串 后。
11.css3伪元素选择器
◆li::first-letter {}表示选中li中的第一个字母或者汉字
◆div::first-line {}表示选中div中的第一行信息(会随着div的变宽变窄而选中的信息增多或减少)
◆p::selection {}表示选中 你使用鼠标选中的信息的区域(可以改变你使用鼠标按下之后选中一片区域的样式,很神奇)
12.css3颜色
◆opacity属性只要被继承了,就无法更改,当父容器的css样式中的opacity属性值被子容器继承了就无法更改了,子容器改不了,只能改父容器。
◆完全透明的颜色:transparent
◆RGBA: red green blue(三原色) alpha (透明度)
◆HSLA(Hue Saturation Lightness Alpha):H 色调(色调取值范围0-360 0和360代表着纯红色,120代表着纯绿色,240代表着纯蓝色) S 饱和度(饱和度越大颜色越鲜艳,饱和度月小颜色越低沉 取值范围0%-100%) L 亮度(亮度越大越接近白色,亮度越小越接近黑色 0%-100%) A透明度 (取值范围0-1)
◆十六进制设置法:如#ffff ,第一个f表示红色、第二个f表示绿、第三个f表示蓝色、第四个f表示透明度,但是ie浏览器的兼容性是0。
13.css3 文本阴影 text-shadow:5px 5px 5px #f00;
◆文本阴影的x轴的水平位移
◆文本阴影的y轴的水平位移
◆文本阴影的模糊半径
◆文本阴影的颜色
★一个文本可以有多个阴影,使用逗号的方式将一个文本的多个阴影隔开,也就是多个阴影效果并列书写,如text-shadow:-1px -1px 5px #f00,1px 1px 5px #0f0;
14.css3盒子的box-sizing属性
◆content-box:内容盒子 (传统盒子模型,盒子大小=定义的宽高+padding+border)
◆padding-box:内填充盒子 (其实没有这个属性,这个只是定义上的概念)
◆border-box:边框盒子 (非传统盒子模型,盒子大小=数值最大的那个值)
◆当box-sizing属性的值设置为content-box(默认值)时,就是盒子的外加模式,这个时候盒子大小=定义的宽高+padding+border
◆当box-sizing属性的值设置为border-box时,就是盒子的外减模式,这个时候盒子大小就等于真正定义的宽高的数值,这个时候定义的宽高会减小,边框和填充补上减小部分的自定义的宽高。
◆可以通过box-sizing属性的border-box和content-box制作瞬间放大或者缩小效果的动画。
15.css3之浏览器兼容性解决办法-私有化前缀
◆-webkit- :解决谷歌与苹果浏览器内核渲染的兼容性问题
◆-moz-:解决火狐浏览器内核渲染的兼容性问题
◆-ms-:解决微软浏览器内核渲染的兼容性问题
◆-o-:解决欧朋浏览器内核渲染的兼容性问题
◆什么都不加:默认的书写方式
★如果加私有化前缀也无法解决兼容性的问题,那么就是浏览器的版本实在太低了,几乎可以放弃了。
2.实际工作中写网页要使用渐进增强原则:低版本的浏览器可以正常访问页面,高版本的浏览器访问页面用户体验更好。
3.实际工作中要考虑用户群体,遵照产品的方案,听技术的上司(最新的技术大多意味着兼容性不是很好)的安排。
4.css3的统一环境
◆Chrome ver 46+
◆Firefox ver 42+
◆PhotoShop CS6(建议)
◆其它浏览器暂不考虑
5.css2选择器
◆div {} 标签选择器
◆.box {}类名选择器
◆#box {}id选择器
◆div p {}后代选择器
◆div.box {}交集选择器
◆div,p,span {}并集选择器
◆div>p {}子代选择器
◆* {}通配符选择器
◆div+p {}后一个兄弟选择器(紧跟div的p)
◆div~p {}后同辈选择器
6.css3属性选择器
◆div[class] {} 表示选中页面带有class属性的div
◆div[class="box"] {}表示选中页面带有class属性并且属性值等于box的div
◆div[class^="bo"] {}表示选中页面带有class属性并且属性值以bo字符串开头的div
◆div[class$="ox"] {}表示选中页面带有class属性并且属性值以ox字符串结尾的div
◆div[class*="o"] {}表示选中页面带有class属性并且属性值必须包含o字符串的div
◆金色:#daa520;
7.css2伪类(状态伪类)
◆div:hover {}鼠标移入时
◆div:link {}正常状态下(一般用于超链接)
◆div:active {}鼠标点击时
◆div:visited {}鼠标点击后 (一般用于超链接)
8.css3伪类-结构伪类选择器
◆li:first-child {}选中父元素中所有的li中的第一个li
◆li:last-child {}选中父元素中所有的li中的最后一个li
◆li:nth-child(10) {}选中父元素中所有li中的第10个li
◆li:nth-child(odd) {}选中父元素中所有li中的奇数项(非索引)的li
◆li:nth-child(even) {}选中父元素中所有li中的偶数项(非索引)的li
◆li:nth-child(n) {}选中父元素中所有li中的所有的li(n从0开始,但是当n<1的时候无效,因为没有当前项为0的元素)
◆li:nth-child(2n) {}选中父元素中所有li中当前项(非索引)为2的倍数的li
◆li:nth-child(2n+1) {}选中父元素中所有li中当前项(非索引)为2的倍数+1的li
◆li:nth-child(-n+5) {}选中父元素中所有li中前五项的li(n从0开始,但是当n<1的时候无效,因为没有当前项为0的元素),因为当n为5时结果就小于1了,所以选中的就是-0+5、-1+5、-2+5、-3+5、-4+5这些结果的当前项的li,切记不能写成5-n,因为语法上是这样规定的
◆li:nth-child(7n) {}选中父元素中所有li中当前项为7的倍数的li
◆li:nth-child(7n-1) {}选中父元素中所有li中当前项为7的倍数-1(并不6的倍数哦,如果是6的倍数则为6n而不是7n-1)的li
◆li:nth-last-child(1) {}选中父元素中所有li中的最后一个li,因为nth-last-child与nth-child正好相反,nth-last-child是从后往前选,nth-child是从前往后选。
◆li:nth-last-child(-n+5) {}选中父元素中所有li中最后五项的li,原理和上面的差不多,但是一个是从前往后,一个是从后往前,切记不能写成5-n,因为语法上是这样规定的
★使用结构伪类选择器的问题在于,它是针对父容器中子元素的实际位置(该子元素在该父容器中所有子元素中排第几,也就是第几项),如果该父容器中的子元素的实际位置上不是你指定的元素标签,那么就找不到,结构伪类选择器是根据父元素中子元素的实际位置来找指定元素的,如果该位置上不是该标签,那么就找不到,这个问题往往很容易出错,所以计算该元素的位置时要特别准确。
9.css3伪类-新增状态伪类选择器
◆div:empty {}选中内容为空的div,连空字符都没有的div,表示内容为空的状态下的div,属于空伪类。
◆h2:target {}选中当前被激活的一个锚点(点击锚点链接后跳转到指定位置的那个id选择器的元素),表示在被激活状态下的锚点h2标签,属于目标伪类。
◆div:not(.box2) {}选中div中不是类名为box2的所有元素,属于排除伪类。
10.css3伪元素(伪元素在css2中是没有的概念,之前都是用:,在css3中有了这个概念,为了和伪类区分开来,使用::,并且必须要有content属性,由哪个元素产生的伪元素,那个伪元素就属于这个元素的一部分,并且伪元素在该元素的内部)
◆span::before {content:"前"}表示在span内部最前面添加一个伪元素,内容为字符串 前。
◆span::after {content:"后"}表示在span内部最后面添加一个伪元素,内容为字符串 后。
11.css3伪元素选择器
◆li::first-letter {}表示选中li中的第一个字母或者汉字
◆div::first-line {}表示选中div中的第一行信息(会随着div的变宽变窄而选中的信息增多或减少)
◆p::selection {}表示选中 你使用鼠标选中的信息的区域(可以改变你使用鼠标按下之后选中一片区域的样式,很神奇)
12.css3颜色
◆opacity属性只要被继承了,就无法更改,当父容器的css样式中的opacity属性值被子容器继承了就无法更改了,子容器改不了,只能改父容器。
◆完全透明的颜色:transparent
◆RGBA: red green blue(三原色) alpha (透明度)
◆HSLA(Hue Saturation Lightness Alpha):H 色调(色调取值范围0-360 0和360代表着纯红色,120代表着纯绿色,240代表着纯蓝色) S 饱和度(饱和度越大颜色越鲜艳,饱和度月小颜色越低沉 取值范围0%-100%) L 亮度(亮度越大越接近白色,亮度越小越接近黑色 0%-100%) A透明度 (取值范围0-1)
◆十六进制设置法:如#ffff ,第一个f表示红色、第二个f表示绿、第三个f表示蓝色、第四个f表示透明度,但是ie浏览器的兼容性是0。
13.css3 文本阴影 text-shadow:5px 5px 5px #f00;
◆文本阴影的x轴的水平位移
◆文本阴影的y轴的水平位移
◆文本阴影的模糊半径
◆文本阴影的颜色
★一个文本可以有多个阴影,使用逗号的方式将一个文本的多个阴影隔开,也就是多个阴影效果并列书写,如text-shadow:-1px -1px 5px #f00,1px 1px 5px #0f0;
14.css3盒子的box-sizing属性
◆content-box:内容盒子 (传统盒子模型,盒子大小=定义的宽高+padding+border)
◆padding-box:内填充盒子 (其实没有这个属性,这个只是定义上的概念)
◆border-box:边框盒子 (非传统盒子模型,盒子大小=数值最大的那个值)
◆当box-sizing属性的值设置为content-box(默认值)时,就是盒子的外加模式,这个时候盒子大小=定义的宽高+padding+border
◆当box-sizing属性的值设置为border-box时,就是盒子的外减模式,这个时候盒子大小就等于真正定义的宽高的数值,这个时候定义的宽高会减小,边框和填充补上减小部分的自定义的宽高。
◆可以通过box-sizing属性的border-box和content-box制作瞬间放大或者缩小效果的动画。
15.css3之浏览器兼容性解决办法-私有化前缀
◆-webkit- :解决谷歌与苹果浏览器内核渲染的兼容性问题
◆-moz-:解决火狐浏览器内核渲染的兼容性问题
◆-ms-:解决微软浏览器内核渲染的兼容性问题
◆-o-:解决欧朋浏览器内核渲染的兼容性问题
◆什么都不加:默认的书写方式
★如果加私有化前缀也无法解决兼容性的问题,那么就是浏览器的版本实在太低了,几乎可以放弃了。