• 常见的CSS样式

    本文所编写的CSS是嵌入在HTML中的样式块，在html文件中编写CSS代码需要在

    中编写。

    选择器的优先级：

            id选择器 > 类选择器 > 标签选择器

    id选择器：

            #id名，id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

    类选择器：.

            类名，类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

    标签选择器：

            标签名{样式1；样式2；........}，会将当前网页内的所有该标签增加相同的样式。

    外补丁：

    margin：检索或设置对象四边的外延边距

    margin-top：检索或设置对象顶边的外延边距

    margin-right：检索或设置对象右边的外延边距

    margin-bottom：检索或设置对象下边的外延边距

    margin-left：检索或设置对象左边的外延边距    

    内补丁：

    padding：检索或设置对象四边的内部边距

    padding-top：检索或设置对象顶边的内部边距

    padding-right：检索或设置对象右边的内部边距

    padding-bottom：检索或设置对象下边的内部边距

    padding-left：检索或设置对象左边的内部边距

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>CSS的常见样式title>
    6. <style>
    7. /*将百度两个字下面的下划线去掉
    8. none表示没有下划线
    9. underline有下划线
    10. */
    11.        .baidu{
    12.     text-decoration:none;
    13.     }
    14. /* :hover这个专门用来设置鼠标悬停效果的
    15.  当鼠标悬停的时候，执行样式，当鼠标离开的时候样式取消 */
    16.     #xiao:hover{
    17.     color:red;
    18.     cursor:pointer;
    19.     }
    20.  
    21.     .mydiv{
    22.     width:100px;
    23.     height:100px;
    24.     background-color:#555;
    25.     border:1px red solid;
    26.     /*外补丁，在元素外面打补丁，效果和移动元素位置差不多*/
    27.     margin-top:100px;
    28.     margin-left:100px;
    29.     /*内补丁，在元素内部打补丁，效果跟增加长度宽度一样 */
    30.     padding-right:100px;
    31.     }
    32.  
    33.     /*float样式是用来设置当前元素在父元素当中的浮动效果*/
    34.     #outdiv{
    35.      width:300px;
    36.     height:300px;
    37.     background-color:red;
    38.     float:right;
    39.     }
    40.  
    41.     #innerdiv{
    42.      width:100px;
    43.     height:100px;
    44.     background-color:blue;
    45.     /*设置当前节点元素的浮动效果，只是浮动于当前元素的父元素内部*/
    46.     float:left;
    47.     }
    48.  
    49.     #mydiv2{
    50.      width:100px;
    51.     height:100px;
    52.     background-color:red;
    53.     /*绝对定位 例：设置在浏览器最右上角*/
    54.     position:absolute;
    55.     top:0px;
    56.     right:0px;
    57.     }
    58.  
    59. style>
    60.  
    61. head>
    62. <body>
    64. <div class="mydiv">div>
    65.  
    66.  
    67. <div id="div1">div>
    68.  
    70. <a class="baidu" href="http://www.baidu.com">百度a>
    71. <br><br>
    72.  
    75. <div id="outdiv">
    76.     
    77.     <div id="innerdiv">
    78.  
    79.     div>
    80. div>
    81. <br><br>
    83. <span id="xiao">红色小手span>
    84. <div id="mydiv2">div>
    85.  
    86. body>
    87. html>
  • 相关阅读:
    MySQL 事务一致性的视线
    建立跨层全栈的区块链安全保障系统-应用层，系统层，设施层
    mac 升级node到指定版本
    给力心理平台项目开发介绍
    OPPO的关键一步
    QGIS数据分析入门——Qgis打开各种存储里的文件（二）
    程序员之友：注释的重要性与最佳实践（InsCode AI 创作助手）
    python自带静态web服务器搭建代码实现（一）
    查找算法【哈希表】- 散列函数
    【Linux篇＜Day15＞】——三分钟教会你如何搭建web网站
  • 原文地址：https://blog.csdn.net/qq_62731133/article/details/127596335