• CSS基础-5 伪类


    一、伪类

        我们以a标签为例

     

    伪类标签分为4类

        1. 设置超链接默认的样式

            a:link {属性:值;.....}

               或者

           a { 属性: 值;}           推荐使用这种方式

     

        2. 设置超链接访问过后的样式

            a:visited {属性:值; ......} 

               注意:该伪类(visited )只能设置有关颜色的属性。

           有浏览器缓存问题

         

        3. 鼠标移动到超链接上的样式

           a:hover {属性:值;.....} 

                  

        4. 超链接激活状态下的样式

           a:active {属性: 值;...}            

          

    二、背景(background)

    (1)background-color   设置背景颜色

    (2)background-image: url(2.png);   设置背景图片

      注意:给标签元素设置背景图片的时候,需要有宽度和高度

      例子:

      .a {

          margin:100px auto;

           300px;

           height:300px;

           background-image:url(img/b.jpg)

        }

    效果如下:

        

    (3)background-repeat: no-repeat;    背景不平铺

           默认值为 repeat 平铺

                   no-repeat;    背景不平铺

            

             代码如下:

                    .a {

                            margin:100px auto;

                            300px;

                            height:300px;

                            border:3px solid red;

                            background-image:url(img/b.jpg);

                            background-repeat: no-repeat;

                            }

                   

                  repeat-x       背景横向平铺

            

                  代码如下:

                    .a{

                            margin:100px auto;

                            300px;

                            height:300px;

                            border:3px solid red;

                            background-image:url(img/b.jpg);

                              background-repeat: repeat-x;

                            }

                

            repeat-y        背景纵向平铺

    (4)background-position: 设置背景图片的位置

       直接设置具体的方位名词 (left,right,top,center,bottom)

      

                  注意: 当给背景设置位置的时候,如果背景位置的取值为具体的方位名词的时候,取值位置可以调换。

            

    如果只写一个具体方位名称,默认的第二值为居中(center)

                 例子:

              .a {

                            margin:100px auto;

                            500px;

                            height:500px;

                            border:3px solid red;

                            background-image:url(img/b.jpg);

                            background-repeat: no-repeat;

                            background-p osition:left;

                            }

     

     设置具体值的时候,第一个值为水平方向,第二个值为垂直方向

     

    background-attachment: fixed;  设置背景图片固定

     

     

     

  • 相关阅读:
    列表左边左右固定,右边可以左右滚动,且左右两边列表滚动时上下联动
    SQL分组多列统计(GROUP BY后按条件分列统计)
    C# 调用webservice 几种办法(转载)
    解析XML文档
    GDI+中发生一般性错误的解决办法
    所闻所获2:使用块回调来实现代理的功能
    OC基础11:基本的C语言特性2
    OC基础10:基本的C语言特性1
    OC基础9:预处理程序
    OC基础8:分类和协议
  • 原文地址:https://www.cnblogs.com/pangbing/p/8135310.html
Copyright © 2020-2023  润新知