css3基础知识点有哪些
这篇文章主要讲解了“css3基础知识点有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3基础知识点有哪些”吧!
成都创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站建设、网站设计、金湖网络推广、微信小程序定制开发、金湖网络营销、金湖企业策划、金湖品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联为所有大学生创业者提供金湖建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com
div > p 选择父元素为div的所有子元素
div + p 选择紧接在div后的所有子元素
[target] 选择带有target属性的元素 a[target] {...}
[target=_blank] 选择target为_blank的所有子元素
[title~=flower] 选择title属性包含单词flower的元素
[lang|=en]选择lang属性以en开头的所有元素
[p:first-letter] 选择p元素开头的所有首字母
[p:first-line] 选择每个p元素的首行
[p:first-child] 选择属于其父元素的首个子元素的每个
元素 就是相对比某个父元素下的所有p元素的第一个p 必须声明
[p:before] 在每个p元素之前插入内容 p:before{content:"台词:";} ::css3写法 : css2写法
[p:after] 在每个p元素后插入内容
[p:lang(it)] 选择带有以 "it" 开头的 lang 属性值的每个
元素
[p~ul] 选择前面有
元素的每个
- 元素
a[src^="https"] 选择所有a 属性中src以https开头的 ^表示开头
a[src$=".pdf"] 选择所有a中属性src以pdf结尾的 $表示结尾
a[src*="abc"] 选择所有a中属性src包含abc的元素
div p:first-of-type div下首个p元素 p可以不是第一个
div p:last-of-type div下最后一个p元素
div p:only-of-type div中只有一个p元素 可以包含其他元素
div p:only-child div中只有一个p元素 不能包含其他元素 ie不支持
div p:nth-child(2) div下第二个p元素
div p:nth-last-child(2) div下倒数第二个p元素 Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词 使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。
div p:nth-of-type(2) div下第二个p 2可以用奇偶数 可以用公式
div p:nth-last-of-type(2) div下倒数第二个p
div p:last-child div下最后一个p 相当于div p:nth-last-child(1)
p:empty 选择没有子元素的每个
元素(包括文本节点)
#news:target 选择当前活动的 #news 元素。
input:enabled input:disabled input:checked(只有 Opera 支持 :checked 选择器。)
input[type="text"]:enabled 为所有 type="text" 的已启用的 input 元素设置背景色:
:not(p) 选择所有非
元素:
::selection 选择被用户选取的元素部分。鼠标选取变色
::selection ::-moz-selection
animation 属性是一个简写属性,用于设置六个动画属性:
animation-name 为 @keyframes 动画规定一个名称:mymove
animation-duration 定义动画完成一个周期所需要的时间,以秒或毫秒计
animation-timing-function 规定动画的速度曲线 liner ease ease-in ease-out ease-in-out
animation-delay 定义动画何时开始
animation-iteration-count 规定动画被播放的次数 n|infinite;n|无限次
animation-direction 定义是否应该轮流反向播放动画 normal|alternate;正|反
animation-play-state 规定动画正在运行还是暂停 paused|running;
animation-fill-mode 规定动画在播放之前或之后,其动画效果是否可见。
none | forwards 保持最后属性 | backwards 开始属性 | both前后都应用
@-moz- 火狐 @-webkit-谷歌和苹果 @-o- 欧朋
例子:
@keyframes mymove
from {top:0px;}
to {top:200px;}
@-moz-keyframes mymove /* Firefox */
from {top:0px;}
to {top:200px;}
@-webkit-keyframes mymove /* Safari 和 Chrome */
from {top:0px;}
to {top:200px;}
@-o-keyframes mymove /* Opera */
from {top:0px;}
to {top:200px;}
div
{width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
translate()素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标)
translate(x,y)定义2d转换 xy为数字 x正为右 负为左 y正为下 负为上
translate3d(x,y,z)定义3D转换
scale()方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
scale(x,y)定义2D转换 x y 为倍数
scale(2,4)把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍
rotate()方法 素顺时针旋转给定的角度。允许负值,元素将逆时针旋转
rotate(30deg)表示旋转30度
matrix()方法
skew(x-angle,y-angle)定义 2D 倾斜转换,沿着 X 和 Y 轴。
transition-property 属性规定应用过渡效果的 CSS 属性的名称 比如:width
transition-property: none|all|property;
transition-duration属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。
transition-timing-function属性规定过渡效果的速度曲线。
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n); ease:规定慢速开始,然后变快
transition-delay 属性规定过渡效果何时开始。
例子:
div
{width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
div:hover
width:300px;
box-sizing: content-box | border-box | inherit
box-sizing:content-box,按W3C的盒子模型计算,内容+内边距+边框=元素大小
这是搭积木,三块积木搭出一个房子,任何一块积木大小变化了,房子结构就不稳定了,表现为把元素撑大
box-sizing:border-box,按传统IE盒子模型计算,元素大小=内容+内边距+边框
这是盖房子,事先定好尺寸,盖好一个房子,里边放三块积木,随便你们三个怎么变化,只要不超过房子的大小,随你们折腾
flex-direction:row | row-reverse | column | column-reverse; 横排|反向横排|竖排|反向竖排
flex-wrap: nowrap | wrap | wrap-reverse; 不换行|换行|换行,第一行在下方
flex-flow: flex-flow:
justify-content:主轴上的对齐方式。
flex-start | flex-end | center | space-between | space-around;
左对齐 | 右对齐 | 中间 | 两端对齐 | 间隔对等
align-items : 属性定义项目在交叉轴上如何对齐。
flex-start | flex-end | center | baseline | stretch
交叉轴的起点对齐| 结尾对齐 |中点对齐|第一行文字的基线对齐|未设置高度或设为auto占满整个容器的高度
align-content : 多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
flex-start | flex-end | center | space-between | space-around | stretch;
项目的6个属性:
order : 定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex-grow : 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大 1等分
flex-shrink :定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-basis : 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
flex : 属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto
align-self : self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
@media screen and (max-width:480px){}
@media (min-device-width:600px){
img[data-src-600px]{
content: attr(data-src-600px,url);
@media (min-device-width:800px){
img[data-src-800px] {
content:attr(data-src-800px,url);
background: radial-gradient(center, shape size, start-color, ..., last-color);
渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
感谢各位的阅读,以上就是“css3基础知识点有哪些”的内容了,经过本文的学习后,相信大家对css3基础知识点有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
网站名称:css3基础知识点有哪些
文章链接:http://scyanting.com/article/jdgeej.html