09.vscode

最新推荐文章于 2024-11-05 23:01:08 发布

故事予你

最新推荐文章于 2024-11-05 23:01:08 发布

阅读量1.3k

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/weixin_55101030/article/details/117390613

版权

本文详细介绍了CSS的三种引入方式：行内样式表、内部样式表和外部样式表。行内样式表适用于简单样式的修改，内部样式表能控制整个页面样式但未完全分离结构和样式，外部样式表则实现了结构与样式的分离，是开发中常用的方式。文章还提供了示例代码，并讲解了Chrome浏览器的调试技巧，帮助读者更好地理解和应用CSS。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

5.CSS引入方式

5.1CSS的三种样式表

按照CSS样式书写的位置(或者引入的方式) , CSS样式表可以分为三大类:
1.行内样式表(行内式)
2.内部样式表(嵌入式)
3.外部样式表(链接式)

5.2内部样式表

内部样式表(内嵌样式表)是写到html页面内部是将所有的CSS代码抽取出来.单独放到-个<style> 标签中。

<style>
div {
color: red;
font-size: 12px;
</sty1e>

●<style> 标签理论，上可以放在HTML文档的任何地方,但-般会放在文档的<head>标签中
●通过此种方式,可以方便控制当前整个页面中的元素样式设置
●代码结构清晰,但是并没有实现结构与样式完全分离
●使用内部样式表设定CSS .通常也被称为嵌入式引入.这种方式是我们练习时常用的方式

5.2行类样式表

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
●style 其实就是标签的属性
●在双引号中间，写法要符合CSS规范
●可以控制当前的标签设置样式
●由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用.只有对当前元素添加简
单样式的时候。可以考虑使用
●使用行内样式表设定CSS ,通常也被称为行内式引入

示例

<p style="color:
pink" font-size: 20px;>给我个粉红的回忆</p>

5.3外部样式表

实际开发都是外部样式表.适合于样式比较多的情况核心是:样式单独写到CSS文件中,之后把CSS文件引入
到HTML页面中使用.
引入外部样式表分为两步:
1.新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中。
2.在HTML页面中,使用标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

属性                作用
rel             定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。
href               定义所链接外部样式表文件的URL，可以是相对径，也可以是绝对路径。
●使用外部样式表设定CSS ,通常也被称为外链式或链接式引入,这种方式是开发中常用的方式

示例

html文件

  <link rel="stylesheet" href="style.css">

</head>

<body>

    <div>来呀，快活呀，反正有大把时间...</div>

</body>

style.css文件

/* 这个CSS里面只有样式么有标签 */

div  {

  color: pink;

}

5.5总结

样式表         .             优点                              缺点            使用情况                控制范围         

 行内样式表      书写方便，权重高          结构样式混            较少         控制一个标签
内部样式表          部分结构和样式相分离     没有彻底分离    较多          控制一个页面
外部样式表      完全实现结构和样式相分离     需要引入    最多，吐血推荐          控制多个页面

示例

  <style>
        body {
            /* 连写必须要有字体大小和字体 */
            font: 16px/28px 'Microsoft YaHei';
        }
        h1 {
            /* 文字不加粗 */
            font-weight: 400;
            /* 让h1的文字水平居中对齐 */
            text-align: center;
        }
        a {
          text-decoration: none;  
        }
        .gray {
            color: #888888
            font-size: 12px;
            text-align: center;
        }
        .search {
            color: #666;
            /* #666666     #666 */
            /* #ff00ff   #f0f */
            width: 170px;
        }
        .btn {
            font-weight: 700;
        }
        p {
            /* 首行缩进2个字符的距离 */
            text-indent: 2em;
        }
        .pic{
            /* 想要图片居中对齐,则是让他的父亲P标签添加水平居中的代码 */
            text-align: center;
        }
        .footer{
            color: #888;
            font-size: 12px;


        }
    </style>
</head>
<body>
    <h1>文字的魅力</h1>
    <div class="gray">   文字是人类用符号记录表 时间 来源: <a href="#" >中国天气网</a> 
    <input type="text" value="亲输入查询条件..."class="search">  <button class="btn">搜索</button>   </div>
    <hr>
    <h4>信息以传之</h4>
    <p class="pic">
      <img src="11.jpeg"  
    </p>
    <p>达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。文字的不同体现了国家和民族的书面表达的方式和思维不同。文字使人类进入有历史记录的文明社会。
文字按字音和字形，可分为表形文字、表音文</p>
    <h4>  字和意音文字。</h4>
<p>按语音和语素，可分为音素文字、音节文字和语素文字。 表形文字是人类早期原生文字的象形文字，比如：古埃及的圣书字、两河流域的楔形文字、古印度文字、美洲的玛雅文和早期的汉字。
意音文字是由表义的象形符号和表音的声旁组成的文字，汉字是由表形文字进化成的表意文字，汉字也是语素文字，也是一种二维文字。</p>
<p class="footer">本文来源:我是你爷爷的爷爷</p>


</body>

chrome调试

1. 打开调试工具

打开Chrome浏览器,按下F12键或者右击页面空白处---->检查。

2.使用调试工具

①CtrI+滚轮可以放大开发者工具代码大小。
②左边是HTML元素结构,右边是CSS样式。
③右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色。
④Ctrl + 0复原浏览器大小。
⑤如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。
⑥如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误。