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;  设置背景图片固定

     

     

     

  • 相关阅读:
    VDOM configuration
    Fortinet Security Fabric
    Gartner 2018 年WAF魔力象限报告:云WAF持续增长,Bot管理与API安全拥有未来
    installns
    vyos 基础配置
    vyatta的fork开源版本vyos
    vyos User Guide
    图论----同构图(详解)
    Educational Codeforces Round 21(A.暴力,B.前缀和,C.贪心)
    2017年中国大学生程序设计竞赛-中南地区赛暨第八届湘潭市大学生计算机程序设计大赛游记心得
  • 原文地址:https://www.cnblogs.com/pangbing/p/8135310.html
Copyright © 2011-2022 走看看