3.css样式书写位置，标签分类

最新推荐文章于 2024-06-13 23:29:27 发布

121689Stone

最新推荐文章于 2024-06-13 23:29:27 发布

阅读量1.7k

点赞数

分类专栏： css 文章标签： css 标签

本文链接：https://blog.csdn.net/qq_37993288/article/details/77407693

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

css书写位置

1.内嵌式

css样式写在html文件head内。

<head>
    <style type="text/css">
        样式表内容
   </style>
</head>

※特点：样式只作用于当前文件，没有真正实现结构表现分离。

2.外链式写法

css样式为单独的文件，然后html文件链接到此css文件。

<head>
    <link rel="stylesheet" href="1.css">
<head>

※特点：作用于链接到它的文件，范围广，真正实现结构表现分离。

3.行内样式表

直接写在标签内的样式。

<body>
    <h1 style="font-size:30px; color:red;">博客</h1>
</body>

※特点：作用范围仅限于当前标签，范围小，结构表现混在一起。（不推荐使用）

标签分类（按标签在页面的显示方式分类）

块元素
典型代表：div , h1-h6 , p , ul ，li
特点：
1.独占一行（不用使用换行标签就可以独自在一行显示）；
2.可以设置宽高（并非文字大小的宽高，而是元素的宽高，可设置背景颜色看效果）；
3.嵌套（包含）关系下，子块元素宽度（没有定义的情况下），和父块元素的宽度默认一致。

<head>
    <style type="text/css">
        .box{
            width:300px;
            height:100px;
            background-color:#888;
        }
        .box p{
            height:50px;
            background-color；red;
        }
    </style>
</head>
<body>
    <div class="box">
        <p></p>
    </div>
</body>

行内元素

典型代表：span ,a ,strong，em, del, ins

特点:
（1）若几个行内元素写在一起，则在同一行显示；
（2）不能直接定义元素宽高，元素宽高是由内容撑开的。
（3）嵌套（包含）关系下，子块元素宽度（没有定义的情况下），和父块元素的宽高没有关系，因为它的宽高是由内容撑开的。

<head>
    <style type="text/css">
        .box{
            width:500px;
            height:500px;
            background-color:#888;
        }
        .box span{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="box"><span>书写位置</span></div>
</body>

行内块元素（内联元素）
典型代表:input img
特点：
（1）既有行内元素的在一行显示的特点；
（2）又有块元素的可设置宽高的特点。

<head>
    <style type="text/css">
        img{
            width:300px;
        }
        input{
            width:300px;
            height:200px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <img src="top.jpg"><input type="text">
</body>

块元素与行内元素之间的转换

块元素转行内元素：display:inline;

<head>
    <style type="text/css">
        div,p{
            display:inline;
            width:500px;
            height:500px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div>指南</div>
    <p>权威</p>
</body>

行内元素转块元素：display：block；

<head>
    <style type="text/css">
        span{
            display:block;
            width:500px;
            height:500px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <span>指南</span>
    <span>权威</span>
</body>

块和行内元素转行内块：display：inline-block;

<head>
    <style type="text/css">
        div,a,span,strong{
            display:inline-block;
            width:500px;
            height:500px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div>指南</div>
    <a href="#">权威</a>
    <span>出版</span>
    <strong>发表</strong>
</body>

121689Stone

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3.css样式书写位置，标签分类

css书写位置1.内嵌式css样式写在html文件head内。<head> <style type="text/css"> 样式表内容 </style></head>※特点：样式只作用于当前文件，没有真正实现结构表现分离。2.外链式写法css样式为单独的文件，然后html文件链接到此css文件。<head> <link rel="stylesheet" hre
复制链接

扫一扫

专栏目录