zoukankan      html  css  js  c++  java
  • 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;  设置背景图片固定

     

     

     

  • 相关阅读:
    soapUI-DataSource
    Linux安装rpm包时报错Header V3 DSA/SHA1 Signature, key ID 1d1e034b: NOKEY解决办法
    Linux命令之rpm安装命令
    soapUi下载
    Red Hat Linux相关产品iso镜像下载
    RedHat Linux文本模式下乱码解决方法
    telnet到RedHat Linux失败--解决办法
    java list去重
    Java Mybatis 框架入门教程
    【阿里天池云-龙珠计划】薄书的机器学习笔记——K近邻(k-nearest neighbors)初探Task02
  • 原文地址:https://www.cnblogs.com/pangbing/p/8135310.html
Copyright © 2011-2022 走看看