自己学习的一些css

    技术2024-11-04  26

    1.html选择器

               p{color:red}

               a{color:red}

      html选择器仅仅作用于页面中相关的标签

    2.类选择器

              .类名{color:red}

      不同标签需要变成同一种样式时,用类选择器.

    3.ID选择器

      #ID名{font-size:100px}

    ID选择器作用于有ID名的所在行

     

    修饰背景图片

     background-color:背景颜色

     background-image:背景图片,url(路径)

     background-repeat:no-repeat(背景不重复)/repeat-x(延水平方向重复)/repeat-y(延y轴方向重复)

     background-position:绝对背景图片的位置

     background-attachment:控制背景图片是否固定fixed(固定)/scoll(默认值,随内容滚动)

     

    简写方式

      body

     {

            background:url(img/1.gif)  no-repeat  center

     

     }

     

     /*  */用来注释样式

    当三种选择器同时作用于同一行时,ID选择器的优先级最高,然后是类选择器,优先级最低的是html选择器.

     

     

    连接修饰总结

    text-decoration:去掉连接的下划线none(无下划线)underline(有下划线)overline(上划线)

     

    伪类选择器

    a:hover{font-size:50px}鼠标悬浮于链接

    a:active{}:鼠标正在被按下时链接的样式

    a:link{}:未被访问的链接样式

    a:visited{}:已被访问过的链接样式

     

    对于不同的链接,鼠标悬浮产生不同的颜色,可用伪类选择器的变异版

    .a1:hover{}

    .a2:hover{}

    .a3:hover{}

     

     

     其中a1,a2,a3为类选择器

    .a1{text-decoration:none}

     

    表格修饰

    table

    {

         background-image:url();

         width:550px

    }

     

    组合选择器:

    #user,#pwd

    {

       background-image:url();

       width:300px

    }

    #pwd{background-image:url()}

    包含选择器

      <ul>

          <li>公司</li>

           <li>地址</li>

          <li>技术</li>

      </ul>

     

     ul li

     {

         list-style-image:url()

      }

     

     ol li

     {

         list-style-image:url()

      }

     

     盒模型属性

    table,td,text,password/radio/checkbox/button/submit/reset

    其中tr不是盒模型

    属性

            border-style:边框样式solid:实线,dashed:虚线,dotted:点线

            border-color:边框颜色

    padding-left:写的内容距左边框的距离

    margin:被修饰元素和周围元素之间的距离

     

    当定义背景图片时,

    background-image:

    width

    height

    三个属性要一起走,对于火狐浏览器,还有三个属性一定要写

    border:0px;padding:0px;margin:0px

     

     

    框架页

     

    <frameset rows="15%,*"

           <frame>

     

     

             <frameset cols="10%,*">

                   <frame>

                   <frame>

       

            </frameset>

     

    </frameset> 

       

    <a href="打开的页面路径"  target="窗口的名字">

    <frame name="窗口的名字">

    target的四个值

    _self:代表在自身页面打开一个窗口(默认)

    _blank:代表在新浏览器窗口打开

    _top:代表在整个浏览器窗口打开

    _parent:在上一级窗口打开

     

    <frame noresize="noresize">

    noresize:表示用户不能调整框架的大小

    <frameset frameborder="yes/no/1/0">

    frameborder:表示是否要出现框架的边框

     

    最新回复(0)