CSS-Hyperlink pseudo-class and text shadow

CSS-Hyperlink pseudo-class and text shadow

Pseudo-class

CSS pseudo-classes are used to add special effects for some selectors.

Explanation: Pseudo-classes can be dynamic in the sense that an element can acquire or lose a pseudo-class when the user interacts with the document. The exception is that ":first-child" can be inferred from the document tree, and ":lang" is also inferred from the document tree in some cases.

It can be seen from this that its function is somewhat similar to class, but it is based on an abstraction outside of the document, so it is called a pseudo-class.

伪类有::first-child ,:link ,:vistited,:hover,:active ,:focus,:lang,:right,:left,:first

What is a pseudo-class? It means that the built-in css class css itself gives it some features and functions, that is, you can use it directly without class=...or id=..., of course, you can also change some of its attributes such as: a:link{color:#FF0000;}

Example: Hyperlink pseudo-class selector:

/*冒号(:)前面是选择符,后面是伪类  比如a是选择符,hover是伪类*/
a:hover{
    
    
         color:green;
         font-size:20px;
        }

Text shadow

   /*文本阴影 阴影颜色,水平偏移,垂直偏移,阴影半径*/
        #price{
    
    
         text-shadow:#3cc7f5 20px 20px 0.1px;
        }

Hyperlink pseudo-class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /*标签选择器*/
        a{
     
     
            text-decoration:none;  /*删除下划线*/
            color:#000000;
        }

        /*超链接伪类测试*/
        /*鼠标悬停颜色,大小 */
        a:hover{
     
     
         color:green;
         font-size:20px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
     
     
          color:	#FF0000;
        }
        /*文本阴影 阴影颜色,水平偏移,垂直偏移,阴影半径*/
        #price{
     
     
         text-shadow:#3cc7f5 20px 20px 0.1px;
        }

    </style>

</head>
<body>

<a href="#">
    <img src="images/m.jpg" alt="">
</a>
<p>
    <a href="#">码出高效:java开发手册</a>
</p>
<p>
    <a href="#">作者:孤尽</a>
</p>
<p  >
    ¥99
</p>
<p id="price">
   简介:引爆技术圈,全球瞩目的中国计算机民族图书,中国人自己原创的Java编程规范,
    希望未来社会发展的每一行代码都规范、合理、高效!马云、行癫、鲁肃亲笔推荐!
</p>
</body>
</html>

Effect picture

Insert picture description here

Guess you like

Origin blog.csdn.net/wpc2018/article/details/109841556