css总结（3）

最新推荐文章于 2024-04-13 15:44:30 发布

weixin_43821488

最新推荐文章于 2024-04-13 15:44:30 发布

阅读量74

点赞数

本文链接：https://blog.csdn.net/weixin_43821488/article/details/104335753

版权

css总结（3）

伪类选择器

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。

比如 div是属于box类的，这是肯定的。但是a是属于什么类的？这就要看用户点击前是什么状态，点击后是什么状态。这就叫做伪类。

伪类选择器分为两种：静态伪类动态伪类

1）静态伪类: 只能用于超链接的样式。

:link 超链接点击之前
:visited 链接被访问过之后

2）动态伪类：针对所有标签都适用的样式。

:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

a标签的四种状态

a标签分为4种状态：

:link “链接”：超链接点击之前
:visited “访问过的”：链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时

在css中，这四种状态必须按照固定的顺序写，如果不按照顺序，那么将无效。

例子：

<!DOCTYPE html>
 <html>
 
     <head>
        <meta charset="utf-8" />
         <title>例子</title>
         <style type="text/css">
             a:link{
                 /*让超链接点击之前是红色*/
                 background-color:red;
             }
             a:visted{
                  /*让超链接点击之后是黄色*/
                 background-color:yellow;
             }
             a:hover{
                   /*鼠标悬停，放到标签上的时候是粉色*/
                 background-color:pink;
             }
             a:active{
                 /*鼠标点击链接，但是不松手的时候是绿色*/
                 background-color:green;
             }
         </style>
     </head>
 
     <body>
         <a href="#">123</a>
     </body>
 
 </html>

标签分类

在html中标签按元素分类可分为行内元素，块级元素，行内块级元素三种。

这三者是可以相互转换的，通过display属性能够将三者任意转换：
display:inline; 转换成行内元素
display:block; 转换成块级元素
display:inline-block; 转换成行内块元素

例子：

<!DOCTYPE html>
 <html>
 
     <head>
        <meta charset="utf-8" />
         <title>例子</title>
         <style type="text/css">
             span {
                  display: block;
                 width: 100px;
                 height:100px;
                 background: red;
             }
             
             div {
                 display: inline;
                 width: 100px;
                 height: 100px;
                 background: green;
             }
             
             i {
                 display: inline-block;
                 width: 100px;
                 height:100px;
                 background: lightblue;
             }
         </style>
     </head>
 
     <body>
         <span>行内元素转	块级元素</span>
         <div>块级元素转行内元素 </div>
         <i>行内元素转行内块级元素</i>
     </body>
 
 </html>

在这里插入图片描述

1.行内元素

特点：内容决定元素所占位置

不可以通过css来改变宽高

不会自动进行换行

行内元素最常使用的就是span ，还有 strong em a del等

<!DOCTYPE html>
<html>
    <head>
        <mate charset="utf-8" />
        <title>例子</title>
        <style type="text/css">
            span{
                background-color:red;
                width:100px;
                height:100px;
            }
        </style>
    </head>
    <body>
        <i>行内元素</i>
        <span>不会自动换行，不能设置宽高</span>
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aAVt2HYT-1581775787269)(C:\Users\DANA\Desktop\004.PNG)]$

2.块级元素

特点：自动进行换行

可以通过css改变宽高

块状元素最常用的就是div，其他还有p ul li ol form address等等

<!DOCTYPE html>
<html>
    <head>
        <mate charset="utf-8" />
        <title>例子</title>
        <style type="text/css">
            div{
                background-color:red;
                width:100px;
                height:20px;
            }
            p{
                background-color:pink;
                width:160px;
                height:50px;
            }
        </style>
    </head>
    <body> 
            <form>块状元素</form>
        <div>
            自动换行
        </div>
        <p>
            可以改变宽高
        </p>
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qf5yAk86-1581775787271)(C:\Users\DANA\Desktop\005.PNG)]$

3.行内块元素

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。

特点：不自动换行

可以通过css改变宽高

块状元素最常用的就是img，还可通过修改display的值来的到行内块元素。

<!DOCTYPE html>
<html>
    <head>
        <mate charset="utf-8" />
        <title>例子</title>
        <style type="text/css">
            div{
                display: inline-block;
                background-color:red;
                width:100px;
                height:20px;
            }
           
        </style>
    </head>
    <body> 
	<div>
        行内块元素
        </div>
        <div>
        行内块元素
        </div>
    </body>
</html>

           width:100px;
            height:20px;
        }
       
    </style>
</head>
<body> 
<div>
    行内块元素
    </div>
    <div>
    行内块元素
    </div>
</body>

```

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3kytIrHe-1581775787274)(C:\Users\DANA\Desktop\006.PNG)]$

weixin_43821488

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css总结（3）

css回顾（3）伪类选择器伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。比如 div是属于box类的，这是肯定的。但是a是属于什么类的？这就要看用户点击前是什么状态，点击后是什么状态。这就叫做伪类。伪类选择器分为两种：静态伪类动态伪类1）静态伪类: 只能用于超链接的样式。:link 超链接点击之前:visited 链接被访问过之后2）动态伪类：...
复制链接

扫一扫