CSS-图层div独占行-span不会独占一行

div 图层，默认独自占用一行

span 图层，不会独自占用一行

css三种样式：

1、css内联定义在<body></body>之内使用style风格属性定义长宽高

width：宽度样式

height：高度样式

backgroud-color：背景色样式

border 边框

solid实线

div图层如果需要隐藏加上 display:none；

div图层如果需要显示就需要：display:block；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML中引入css的第一种样式：内联定义方式</title>
    </head>
    <body>
         <!--
           width：宽度样式
           height：高度样式
           backgroud-color：背景色样式
           display：布局样式
           div图层 如果需要隐藏加上 display:none；
           div图层 如果需要显示就需要：display:block；
           -->
        <div style="width : 1000px; height:100px ; background-color: #FF0033; display:none;"></div>这个图层将会隐藏
        <br><br>
           
        <div style="width : 1000px; height:100px ; background-color : #FF0033; border : 2px  solid black;"></div>
    </body>
</html>

2、<title>css第二种样式：样式块 </title>定义在这个标签下面，head标签上面；样式块在title和head之间

id选择器语法格式： #id{ 样式名:样式值; }

标签选择器格式：标签名{ 样式名:样式值; } 标签是div的都会采用这种方式，作用的范围比id选择器广

类选择器格式： .类名{ 样式名:样式值; } class相同会被认为是一个类；

</style>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css第二种样式：样式块 </title>
        
        <style type="text/css">
            /*css注释 样式块在title和head之间*/
            /*
            id选择器语法格式
            #id{
                样式名:样式值;
                样式名:样式值;
                ...
            }
            */
            #usernameErrorMsg{
                color: red;
                font-size: 12%;
            }
            
            /*
            标签选择器：标签是div的都会采用这种方式
            作用的范围比id选择器广
              标签名{
                  样式名:样式值;
                  样式名:样式值;
              }
            */
            div{
                background-color: black;
                border: 1px solid red;
                width: 100px;
                height: 100px;
            }
            
            /*
            类选择器
              语法：
              .类名{
                  样式名:样式值;
                  样式名:样式值;
              }
            */
            .myclass{
                border: 1px solid red;
                width: 500px;
                height: 30px;
            }
            
        </style>
        
    </head>
    <body>
         <!--设置样式字体大小12px，颜色为红色！  id使用id选择器 -->
         <span id = "usernameErrorMsg">对不起，用户名不能为空！</span>
         
         <!--标签选择器-->
         <div></div>
         <div></div>
         
         <!--类名选择器:给他起一个：类名； class相同的可以认为是同一类标签-->
         <br><br><br>
         <input type = "text" class="myclass"/>
         <br>     
         <select class="myclass">
         <option>专科</option>
         <option>本科</option>
         </select>

    </body>
</html>

3、css样式文件：引入外部独立的css样式文件

/*标签选择器*/
a{
    /*    去除小手下划线 */
    text-decoration: none;
}

/*id选择器
cursor:  鼠标样式（光标[ˈkɜːsə(r)] 克色）
 pointer 是小手；
 hand也是小手；但是hand有浏览器兼容问题
*/
#baiduSpan{
    text-decoration: underline;
    cursor: pointer;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>003css样式文件：引入外部独立的css样式文件</title>
        
        <!--引入css-->
        <link rel="stylesheet" href="css外部文件/3.css"/>
        
    </head>
    <body>
        
        <a href="http://www.baidu.com">百度</a>
        
        <span id="baiduSpan">
            点击我链接到百度
        </span>
    </body>
</html

posted @ 2022-06-12 13:25 280887072 阅读(1054) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS-样式列表-绝对定位

· 数组-单例设计模式

· 消除div独占一行

· CSS简介

· html和css

lwt280887072

CSS-图层div独占行-span不会独占一行

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论