为了账号安全,请及时绑定邮箱和手机立即绑定
  • 在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

  • 表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素

  • 匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素

  • 当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。

    查看代码快照
  • 当“:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。如下表所示:

  • $1 标签<textarea>

    1. disabled="disabled"禁用
    2. autofocus 自动定位
    3. placeholder 同input里面的用法
    4. required 必填项  readonly只读
    5. rows行数 cols宽

    $2 例如 :

    <textarea name="comment" readonly="readonly"></textarea>

    textarea[name="comment"]:read-only{}

    ( !! 加粗的两处必填!!)

    [ ! ! ! 大多数伪选择器其实设置的是选择之后样式 例如:只读,check点击选择之后]

  • “::selection”伪元素 就非常的实用。不过在Firefox浏览器还需要添加前缀。

    注意:

    1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

    2、Firefox 支持替代的 ::-moz-selection。

    css:

    ::selection{

      background: orange;

      color: white;

    }

    (!!!  ::selection是你在选中文字之后才有的变化  )


    1.   display: inline-block ;  可以让竖着的东西,横过来

    2.   opacity: 0; 选项前面标识符的显示与否; 0就是不显示;1就是显示.

    3. !! 选择器注意要加冒号!!!

    4. 例如 :

    Html

    <div class="wrapper">

        <div class="box">

          <input type="radio"  id="girl" name="1"  /><span></span>

        </div>

        <label for="girl">女</label>

    Js:

    input[type="radio"] + span {

      opacity: 0;


    }

    input[type="radio"]:checked+ span {

      opacity: 1;

    }


  • CSS3选择器 :disabled选择器

      <input type="submit" value="禁止点下一步" disabled />

    input[type="submit"]:disabled

    input 后面的disabled***一定不能忘!!!!


  • :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。

    “:root”选择器等同于<html>元素,简单点说:

    :root{background:orange}

    html {background:orange;}


  • 属性选择器

    <!--此处有图片-->

    查看代码快照
  • CSS3 first-of-type选择器

    .wrapper >p:first-of-type{

            background:black;

        }

    <div class="wrapper" >

      <p>我是第一个段落</p>

      <p>我是第二个段落</p>

      <div>我是第一个Div元素</div>

      <div>我是第二个Div元素</div>


    1. 用逗号隔开每组 background 的缩写值;

    2. 如果有 size 值,需要紧跟 position 并且用 "/" 隔开;

    3. 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。

    4. background-color 只能设置一个。


  • ul>li 时候 可以让每一个li都有变化

    :last-child//:first-child 是针对第一或者是最后.

    标签做样式时不需要前面加 (点 . )直接标签加上{}就可以.

  • background-size: auto | <长度值> | <百分比> | cover | contain

    <长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放;

    cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;

    contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。


  • text-shadow: X-Offset Y-Offset blur color;

    Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;


  • @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。

  • 可以实现点击变化:
    ( ! ! 必不可少的两个条件 :)
    <h2><Brand</a></h2>
    <div class="menuSection" 
        content for Brand
    </div>

    例如 :

     #brand:target{

            background:yellow;

        }

      <div class="menuSection" id="brand">

            <h2><a href="#brand">Brand</a></h2>

            <p>content for Brand</p>

        </div>

    ( !! 点击变化时,一个变化,其他恢复原样 !! )

  • 跟选择器,重点是 : (冒号 :root)

     :Root{

            background:blue;

            color:white;

        }

    <div>:Root选择器修改HTML元素的背景颜色</div>

  • 语法注意:  ^ ...开头的任何字符串 //$  ...以它结尾的任何字符串   // *  ...包含此字符串的.

    a[]{background:red;}
    a[href$="doc"]{background:green;}
    a[title*="box"]{background:blue;}

    <a href="##" class="columnNews">

    <a href="##" class="columnVideo">

    <a href="##" class="columnAboutUs">

    <a href="1.doc"></a>

    <a href="2.doc"></a>

    <a href="##" title="this is a box">

    <a href="##" title="box1">

    <a href="##" title="there is two boxs">

  • 鼠标放上去字会摇的菜单

    查看代码快照
  • .nav li::before,.nav li::after{

     content:"";

     position:absolute;    }

    关于content! : connent你可以理解为让before/after生效,没有connent:""你设置的样式不会添加进去,connent:""的引号内可以输入你想添加的文本.

    关于right :

    .nav li::after{

     right: 0;        }

    position:absolute是相对于该元素的父元素来定位的,所以right=0实际上是把这个空格位置紧贴在它的父元素也就是<li>的脸上,所以最后前后贴脸的两个空格才能重合起来。

    /*删除第一项和最后一项导航分隔线*/

    .nav li:first-child::before{

        background:none;

    }

    (!! 注意 :这一块的写法 !!

    伪元素 :     .nav li :after   //.nav li :first-child::before )

    总代码 :

    .nav li{

      position:relative;

      display:inline-block;

      padding:0 16px;

      font-size: 13px;

      text-shadow:1px 2px 4px rgba(0,0,0,.5);

      list-style: none outside none;

    }

    /*使用伪元素制作导航列表项分隔线*/

    .nav li::before,.nav li::after{

     content:"";

     position:absolute;

     top:14px;

     height: 25px;

     width: 1px;

    }

    .nav li::after{

     right: 0;

     background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

     background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

     background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));                            

     background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

     background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));

    }

    .nav li::before{

     left: 0;

     background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

     background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

     background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

     background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

     background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);

    }

            /*删除第一项和最后一项导航分隔线*/

    .nav li:first-child::before{

        background:none;

    }

    .nav li:last-child::after{

        background :none;

    }


  • 一个 可以让   鼠标放上去字体左右摇晃的效果 :

    .nav a{

      display: inline-block;

      -webkit-transition: all 0.2s ease-in;

      -moz-transition: all 0.2s ease-in;

      -o-transition: all 0.2s ease-in;

      -ms-transition: all 0.2s ease-in;

      transition: all 0.2s ease-in;

    }

    .nav a:hover{

      -webkit-transform:rotate(10deg);

      -moz-transform:rotate(10deg);

      -o-transform:rotate(10deg);

      -ms-transform:rotate(10deg);

      transform:rotate(10deg);

    }

    ***使用伪元素和渐变 :

    /*使用伪元素制作导航列表项分隔线*/

      .nav li::before,.nav li::after{


     content:"";


     position:absolute;


     top:14px;


     height: 25px;


     width: 1px;


    }


    .nav li::after{


     right: 0;


     background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));


     background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));


     background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));


     background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));


     background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));


    }


    .nav li::before{


     left: 0;


     background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);


     background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);


     background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);


     background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);


     background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);


    }



  • 原理:
    那些看上去很酷酷的CSS3 3D效果其实就颠来倒去那几个属性(本文提到的这几个),折腾来折腾去,这里这个效果显然也是如此。

    首先HTML结构,如下:

    舞台
        容器
            图片
            图片
            图片
            ...

    对于舞台,很简单,加个视距,比方说800像素:

     perspective: 800px;

    对于容器,很简单,加个3D视图声明,如下:

    transform-style: preserve-3d;


  • animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:none、forwards、backwords和both。其四个属性值对应效果如下:

    属性值

    效果

    none

    默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处

    forwards

    表示动画在结束后继续应用最后的关键帧的位置

    backwards

    会在向元素应用动画样式时迅速应用动画的初始帧

    both

    元素动画同时具有forwards和backwards效果


  • animation-play-state属性主要用来控制元素动画的播放状态。

    参数:

    其主要有两个值:running和paused。

    其中running是其默认值,主要作用就是类似于音乐播放器一样,可以通过paused将正在播放的动画停下来,也可以通过running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放。另外如果暂停了动画的播放,元素的样式将回到最原始设置状态。


首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下,建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么?
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果
意见反馈 邀请有奖 帮助中心 APP下载
官方微信