前端开发 CSS3 经常用到的知识点

前端开发人员必须熟悉的10个css3属性| css3 经常用到的知识点|web前端开发

一、特殊选择器

1、* 用于匹配任何的标记

2、> 用于指定父子节点关系:子节点

3、E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F:挨着的

4、E ~ F 匹配所有E元素之后的同级元素F:同级的

5、名称[表达式]

   5.1 E[attr] 匹配所有具有attr属性的E元素([attr]获取所有的定义了attr]的标签);

   5.2 [attr=val] 获取所有定义了attr属性并且属性值等于val的标签:如果不指定val,则与5.1相同。

   5.3 [attr^=val]获取所有定义了attr属性并且属性值以val开头的标签;

   5.4 [attr$=val]获取所有定义了attr属性并且属性值以val结尾的标签;

   5.5 [attr*=val]获取所有定义了attr属性并且属性值包含val字符的标签;

   5.6 [attr~=val]获取所有定义了attr属性并且属性值包含val单词的标签;

   5.7 [attr|=val]获取所有定义了attr属性并且属性值等于val或者以val-开头的标签。)

6、伪类/伪元素

   6.1 css伪类:用于向某些选择器添加特殊的效果,使用已知标签来指定相对关联标签的class行为。

                如:<p><i>first</i><i>second</i></p>

                      p>i:first-child {color: red}  //伪类 :first-child 添加样式到第一个子元素

                      伪类通常用一个冒号表示。

       css伪元素:用于将特殊的效果添加到某些选择器,使用已知标签来让相对关联内容具有元素的行为。

                如:<p>i am stephen lee.</p>

                      p:first-letter {color: red}    //伪元素 :first-letter 添加样式到第一个字母

                      伪元素通常是用两个冒号表示的。

       ** 伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到。

       常用伪类、伪元素

       6.1.1 a:hover,a:link,a:active,a:visited,:focus               /*动态伪类*/

       6.1.2 :disabled,:enabled,:checked,:read-only,:read-write     /*UI状态伪类*/

            6.1.2.1 :read-only             只读状态

            6.1.2.2 :read-write            非只读状态

       6.1.3 css3伪类

            6.1.3.1 :nth-child(n)其父元素的第n个元素.

                    如:p:nth-child(2){color:red;}             p元素是其父元素的第2个元素的话字体颜色就是红色。

            6.1.3.2 nth-last-child(n)                              其父元素的倒数第n个元素。

            6.1.3.3 :nth-of-type(n)

                    如:p:nth-of-type(2){color:red;}         p元素是其父元素的第2个p元素的话字体颜色就是红色。

            6.1.3.4 :first-child                                      其父元素的第一个元素

            6.1.3.5 :last-child                                       其父元素的最后一个元素

            6.1.3.6 nth-last-of-type(n)

                    如:p:nth-last-of-type(2){color:red;}   p元素是其父元素的倒数2个p元素的话字体颜色就是红色

            6.1.3.7 :first-of-type                                   其父元素的第一个p元素

            6.1.3.8 :last-of-type                                   其父元素的最后一个p元素

       6.1.4 :not()           /*否定伪类选择器*/

            如:p:not(.a){color:red;})

   6.2 常用的伪元素

       6.2.1 ::before,::after

       6.2.2 ::first-letter

       6.2.3 ::first-line

       6.2.4 ::selection

二、css权重

1、权重列表

css3经常用到的补充内容

三、CSS3新增属性

1、定义文本样式

   1.1 文字阴影text-shadow

       如:text-shadow:5px 5px 5px #333,     /*水平位移、垂直位移、模糊半径、颜色

           -15px -15px 5px #333;               可以设置多个阴影

   1.2 文字缩进text-indent

       如:text-indent:30px;                  文本缩进30px

   1.3 文本换行

       如: word-wrap:break-word;            /*断单词

            word-break:break-all;                /*断字符

            white-space:nowrap;                 /*强制在一行内显示所有文本

   1.4 文本溢出

       如:text-overflow:clip;                    /*不显示省略标记,而是简单的裁切掉*/

           text-overflow:ellipsis;             /*当对象内文本溢出时显示省略标记*/

           overflow:hidden;                       /*溢出部分隐藏

   1.5 圆角 border-radius

       如:border-radius:5%;                      四个角出现相同的圆角

   border-radius:20px 5px 10px  40px;      四个角出现不同的圆角

           border-radius:50%;                      此时会变成圆

   1.6 阴影 box-shadow

       如:box-shadow:10px 10px 10px #F00,                水平位移、垂直位移、阴影半径、颜色

                      -2px -5px 10px #00F;                   可以设置多个阴影

           box-shadow:inset 10px 10px 10px #FF0000;     内阴影

   1.7 背景图片铺满 background-size:cover

         把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

   1.8 旋转 transform             

       如:transform:rotate(-30deg) scale(2);          rotate:旋转的度角,scale:放大倍数

   1.9 平滑过渡 transition

       如:transition:transform 2s ease-in;              transform:旋转,2s:平滑过渡的时间,

                                                             ease:匀速

                                                             ease-in:加速

                                                             ease-out:减速

   1.10 更复杂的动画 animation

        如:animation:x-spin 20s infinite linear;      /*动画名称,经历时间,播放次数(为infinite则一直播放),播放方式*/

   1.11 渐变

        线性渐变:从一段线性变化到另一端

        如:background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.4#fff),color-stop(0.6,#fff)

                线性渐变,开始位置,结束位置,开始的颜色,结束的颜色,色标(色标位置,色标颜色)  ---可以色织多个色标,色标就是颜色过渡点

        径向渐变:从指定的点为圆心向圆的外沿发散方式变化

        如:background:-webkit-gradient(radial,center center,0,center center,460 from(blue),to(red),color-stop(0.6,#fff)

                径向渐变,内圆圆心位置,内圆半径,外圆圆心位置,外圆半径,开始的颜色,结束的颜色,色标(色标位置,色标颜色)

   1.12 响应式布局

        @media screen and (min-width:900px)                         屏幕最小为900PX时

        @media screen and (min-width:600px) and (max-width:900px)   屏幕大小为600~900PX之间时

        @media screen and (max-width:600px)                         屏幕最大为600PX时

前端设计htmlcss开发|前端开发css文件模板下载|css前端开发基础
» 本文来自:前端开发者 » 《前端开发 CSS3 经常用到的知识点》
» 本文链接地址:https://www.rokub.com/3443.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!