CSS常用样式有哪些

发布时间：2021-11-23 10:27:51 阅读：223 作者：小新栏目：开发技术

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇文章主要为大家展示了“CSS常用样式有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS常用样式有哪些”这篇文章吧。

1、CSS

层叠样式表，用于对页面进行美化。

在HTML中的方式有三种：元素内联、页面嵌入、外部引入。

(1)、元素内联：对其特定标签的样式进行设置；

(2)、页面嵌入：在其<style>...</style>中写入样式，对其整个页面内的标签均可设置；

(3)、外部引入：就是写到了一个文件中(.css)，对需要这种样式时引入文件即可。

2、常见样式

(1)、标签选择器

含义：其后出现的所有这种标签都是这种样式

div{
    color: red;
}

(2)、class选择器

.logo{
    background-color: red;
    font-size: 18px;
    border: 1px;
}

后面调用：<div class = 'logo'></div>

(3)、id选择器

注意：每个标签的id号是唯一的。

#logo{
    background-color: red;
    font-size: 18px;
    border: 1px;
}

后面调用：<div id = 'logo'></div>

(4)、关联选择器(以空格分开)

div p{
    
}

后面调用：<div><p></p></div> :就是div标签下面的p标签是这个样式

(5)、组合选择器(以,分开)

p, div{
    color: red;
}

：后面出现p/div标签的都是这个样式

(6)、属性选择器

input[type = 'text']{

}

使用：凡是出现input标签中带有type='text'的都使用这个样式

(7)、需要注意的：

<style>
    .logo{
        background-color:#EEAD0E;font-size:18px;border:1px;
    }
    .logo a,.logo p{
        font-size:56px;
    }
    以上的含义：在logo下的a/p标签使用这个样式
    .logo a,p{
        font-size:56px;
    }
    这个的含义是：在logo下的a标签或所有的p标签使用这个样式
</style>

关于以上样式的完整代码：

<!DOCTYPE html>

<html>
    <head>
        <title>页面一</title>
        <link rel = 'stylesheet' href = 'conmon.css' />
        
        <style>
            .logo{
                background-color: red;
                font-size: 18px;
                border: 1px;
            }
            .logo a{
            
            }
            #logo{
                background-color: red;
                font-size: 18px;
                border: 1px;
            }
            div{
                color: red;
            }
            a{
                color: red;
            }
            a, div{
                color: red;
            }
            
            a div{
                
            }
            input[type = 'text']{

            }

        </style>
    </head>
        
    <body>
        <div class = 'logo'>
            <a></a>
        </div>
    
        <div style = 'background-color: red;'>123</div>
        <div class = 'logo'>123</div>
        <div id = 'logo'>123</div>
        
        <a>
            <input />
            <div></div>
        </a>
    </body>
</html>

///////////////////////////////////////////////////////////////////////////
<!DOCTYPE html>

<html>
    <head>
        <title>页面一</title>
        <style>
            .logo{
                background-color:#EEAD0E;font-size:18px;border:1px;
            }
            .logo a,.logo p{
                font-size:56px;
            }
            <!--
            .logo a,p{
                font-size:56px;
            }
            -->
        </style>
    </head>
    
    <body>
        <p>p标签</p>
        <div class='logo'>
            <div>div标签</div>
            <a>a标签</a>
            <p>p标签</p>
        </div>  
    </body>
</html>

3、背景图片

(1)、原生的引入图片

<p_w_picpath src = '1.png'>   #双引号中写的是当前路径下的图片

(2)、背景图片的引入：background;

注意：使用background时，要注意将背景图片放到盒子中，就是必须指明宽、高。

<div ></div>

运行结果

CSS常用样式有哪些

4、边框

border：线的宽度实/虚(solid/dotted) 颜色；后面可以设置边框的宽度和高度;

margin：与外边框的距离；里面的边框相距外边框的距离;

padding：与内边框的距离；里面的文字距离自己里面边框的距离;

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>页面一</title>
        <style>
        
        </style>
    </head>
    
    <body>
        <div style = 'border:1px solid red;height:49px;border-top-style:dotted;
        border-right-style; border-bottom-style; border-left-style'>  
        
        </div>
        
        <div style = 'border:1px solid red;height:200px;'>
            <div style = 'height:30px;background-color:#999;margin-top:20px;
            margin-left:20px;margin-right:20px;padding-top:120px;padding-left:250px;
            padding-bottom:20px'>西安市</div>
        
        </div>

    </body>

</html>

运行结果

CSS常用样式有哪些

5、display

常见的就三种形式：

(1)、display:none; #隐藏显示

(2)、display:block; #以块级标签的形式显示

(3)、display:inline; #以内联标签的形式打印

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>页面一</title>
        <style>
            .logo{
                display:none;
                display:block;
                display:inline;
            }
        </style>
    </head>
        
    <body>
        <span style = 'display:none;'>不会出现的</span>
        <span style = 'display:block;'>内联标签</span>
        <div style = 'display:inline;'>块级标签</div>
        <div style = 'display:inline;'>块级标签</div>
    </body>

</html>

运行结果

CSS常用样式有哪些

6、cursor

使用目的：在鼠标到达这个位置时，鼠标会出现不同的风格形式；

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>页面一</title>

    </head>
        
    <body>
        <span style = 'cursor:pointer;'>小手</span>
        <span style = 'cursor:wait;'>1</span>
        <span style = 'cursor:move;'>2</span>
        <span style = 'cursor:crosshair;'>3</span>
        <span style = 'cursor:mine;'>4</span>   #可以自定义形式(小图标)
    </body>

</html>

这个截图看不出效果，就是不同的形式展现，鼠标在不同的文字上出现时;

7、float

一般使用left和right;

使用目的：划分区域，可以使之飘起来，是以堆叠的形式展现；

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>页面一</title>
        <style>
            .clearfix:after{   #在父标签的下面，子标签有float，使用这个class可以让其子标签使用父标签的样式(方法1)
                content:'.';
                display:block;
                height:0;
                clear:both;
                visibility:hidden;
            }
        </style>
    </head>
    
    <body>
    <!--  float出现时，标签就会出现堆叠
        <div style = 'background-color:red;float:left;width:50%;height:120px'>
        div1
        </div>
        <div style = 'background-color:#999;float:right:width:50%;height:120px'>
        div2
        </div>
    -->    
        <div style = 'background-color:red;' class = 'clearfix'>
        <!--只要子类里边哪个有float,哪个就飘起来了,此时你的父标签对其就不起作用了 -->
            <div style = 'float:left'>div1</div>
            <div style = 'float:left'>div2</div>
            <div style = 'clear:both'></div> #解决子标签有float,还能使用父标签样式的方法2
        </div>
    </body>

</html>

运行结果

CSS常用样式有哪些

8、position

常用的就三种：

(1)、position:fixed 固定的位置，不在改变

(2)、position:relative

(3)、position:absolute relative和absolute一般联合使用；

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>页面一</title>
    </head>
    
    <body>
        <!--
        relative absolute fixed固定 有position出现时,块级标签不再占100%,得自己指定宽度
        relative absolute 这2个一般一起用,一个距一个有多远
        <div style = 'position:fixed;height:45px;width:100%;background-color:#333;top:0px'></div>   
        <div style = 'height:1000px'></div>     
        <div style = 'margin-top:16px;'>
            <div style = 'float:left;width:20%;background-color:#666;'>left</div>
            <div style = 'float:left;width:80%;'>
                <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
                <p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p>
                <p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p>
            </div>
                       
        <div style = 'margin-top:16px;'>
            <div style = 'width:200px;background-color:#666;position:fixed;top:60px;bottom:0px'>left</div>
            <div style = 'margin-left:200px'>
                <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
                <p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p>
                <p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p>
            </div>
            
        </div>
                 
        <div style = 'width:200px;position:fixed;top:0;left:0;bottom:0;background-color:red;'></div>
             
        <div style = 'width:200px;position:absolute;top:0;left:0;bottom:0;background-color:red;'></div>
        -->
        
        <div style = 'position:relative;width:500px;height:200px;background-color:#ddd'>
            <div style = 'width:20px;height:20px;position:absolute;top:0;left:0;bottom:0;background-color:red;'></div>        
            <!--此时,absolute只占relative所规划的范围里面  -->
        </div>
        
    </body>

</html>

分别看几种运行结果

CSS常用样式有哪些

9、opacity(透明度)

使用目的：一般设置图片/背景颜色的亮度；

.p_w_picpath{
    opacity:0.4;    
}

10、模拟一个对话框

写一个小例子，就是出现对话框，让我们自己选择的那种；

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>页面一</title>
        <style>
            .shade{
                position:fixed;
                top:0;
                right:0;
                bottom:0;
                left:0;
                background-color:#333;
                opacity:0.6;
        <!--    z-index:20;   就是看层叠的样式,哪个在上边,通过这个可以自己设置  -->
            }
            .delete{
                position:fixed;  <!-- fixed永远是当前页面占50%-->
                top:50%;
                left:50%;
                width:400px;
                height:300px;
                background-color:white;
                margin-left:-200px;
                margin-top:150px;    
        <!--    z-index:10;-->
            }
            .hide{
                display:none;
            }
        </style>
    </head>
    
    <body>
        <table>
            <tr>
                <th>IP</th>
                <th>编辑</th>
            </tr>
            <tr>
                <td>11.11.11.11</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>11.11.11.12</td>
                <td>删除</td>
            </tr>
        </table>
        
        <!-- 遮罩层开始-->
        <div class = 'shade'></div>
        <!-- 遮罩层结束-->
        
        <!-- 删除层开始-->
        <div class = 'delete'>
            <div>提示</div>
            <div>确定要删除吗?</div>
            <div>
                <input type = 'button' value = '取消' />
                <input type = 'button' value = '确定' />
            </div>
        </div>
        <!-- 删除层结束-->
            
    </body>

</html>

运行结果
CSS常用样式有哪些

以上是“CSS常用样式有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

CSS常用样式有哪些

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签