css3基础知识点有哪些

这篇文章主要讲解了“css3基础知识点有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css3基础知识点有哪些”吧！

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 必须声明 <!DOCTYPE>

[p:before] 在每个p元素之前插入内容 p:before{content:"台词：";} ::css3写法 : css2写法

[p:after] 在每个p元素后插入内容

[p:lang(it)] 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素

[p~ul] 选择前面有<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 选择没有子元素的每个 <p> 元素（包括文本节点）

#news:target 选择当前活动的 #news 元素。

input:enabled input:disabled input:checked(只有 Opera 支持 :checked 选择器。)

input[type="text"]:enabled 为所有 type="text" 的已启用的 input 元素设置背景色：

:not(p) 选择所有非 <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: <flex-direction> || <flex-wrap>;

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){}

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />

@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基础知识点有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！