马黑黑 发表于 2022-1-5 14:18

CSS运用到HTML的三种方法

本帖最后由 马黑黑 于 2022-1-5 15:02 编辑 <br /><br /><style>
.kuang { margin:4px auto; padding:12px; width:720px; display:flex; display-direction:colum; }
.kl { flex-grow:2; font-size:14px; }
.kr{ font-family:'微软雅黑','宋体'; font-size:30px;line-height:65px; writing-mode:vertical-rl; color:efefef; text-shadow:
        0px 1px 0px #c0c0c0,
        0px 2px 0px #b0b0b0,
        0px 3px 0px #a0a0a0,
        0px 4px 0px #909090,
        0px 5px 10px rgba(0,0,0,0.95); }

</style>

<div class="kuang">
        <div class="kl">
                <h2>一、外联式</h2>
                <p>也叫外部样式。CSS所有内容写入后缀名为 .css 的外部文件，亦即所有的CSS样式表内容均不包含在页面文件中，用 link 语句连接到HTML文档内容中来，可以连接多个 .css 文件。link 语句位于 &lt;head&gt; 和 &lt;/head&gt; 之间。</p>
                <p>&nbsp;<br>代码举例：&lt;link href="CSS文件URL地址" rel="stylesheet" /&gt;<br>&nbsp;</p>
                <h2>二、嵌入式</h2>
                <p>也称内页样式。通过 style 语法在页内创建 CSS 样式表供页内使用。代码举例如下：<br><br></p><pre>&lt;style type="text/css"&gt;
        .container {
        width:1000px;
        height:600px;
        color:#aa6600;
}
&lt;/style&gt;
                        </pre>
                <p></p>
                <h2>三、内联式</h2>
                <p><br>也称为行内样式。HTML的行指一个标签周期，即标签起始到标签结束。行内样式顾名思义就是在标签起始符内嵌入 CSS 样式，所使用的是 style="" 语句：
<br><br>&lt;p style="color:#ff0000;"&gt;……&lt;/p&gt;</p>
                <p>上述三种在HTML中使用 CSS 的方法有优先级别：内联式 &gt; 嵌入式 &gt; 外联式。亦即，如果我们使用了外部的CSS文档，又在页内嵌入了 CSS样式，则，相同的定义使用页内样式；如果还有行内样式，则，相同的定义使用行内样式。</p>
        </div>
        <div class="kr">CSS运用到HTML的三种方法</div>
</div>

子梦 发表于 2022-1-5 14:39

代码一窍不通，有时间也学习学习，谢谢老师分享。{:4_190:}

马黑黑 发表于 2022-1-5 15:02

子梦 发表于 2022-1-5 14:39
代码一窍不通，有时间也学习学习，谢谢老师分享。

子梦下午好

红影 发表于 2022-1-5 15:34

便讲解，还边带演示的。貌似这里黑黑讲解得比较多的是嵌入式和内联式{:4_204:}

加林森 发表于 2022-1-5 17:49

讲解得真好。赞！{:4_199:}

马黑黑 发表于 2022-1-5 18:00

加林森 发表于 2022-1-5 17:49
讲解得真好。赞！

感谢支持

马黑黑 发表于 2022-1-5 18:02

红影 发表于 2022-1-5 15:34
便讲解，还边带演示的。貌似这里黑黑讲解得比较多的是嵌入式和内联式

外联式很简单，就一句话

加林森 发表于 2022-1-5 19:36

马黑黑 发表于 2022-1-5 18:00
感谢支持

应该的，老黑不必客气啊。

马黑黑 发表于 2022-1-5 20:00

加林森 发表于 2022-1-5 19:36
应该的，老黑不必客气啊。

客气一下是应该的

红影 发表于 2022-1-5 20:21

马黑黑 发表于 2022-1-5 18:02
外联式很简单，就一句话

这句话里的内容还是要去弄好的。

马黑黑 发表于 2022-1-5 21:06

红影 发表于 2022-1-5 20:21
这句话里的内容还是要去弄好的。

问题是不是自己做网站就没必要封装CSS文档吧。再说，能做CSS文档的，也就能使用，不就一句话的事情吗

红影 发表于 2022-1-5 22:25

马黑黑 发表于 2022-1-5 21:06
问题是不是自己做网站就没必要封装CSS文档吧。再说，能做CSS文档的，也就能使用，不就一句话的事情吗

所谓难者不会，会者不难{:4_173:}

马黑黑 发表于 2022-1-5 22:35

红影 发表于 2022-1-5 22:25
所谓难者不会，会者不难

那个没有会不会的，按那一句连接一个CSS文档，该文档所定义的样式都可以使用，和页内样式的引用一模一样

红影 发表于 2022-1-6 15:34

马黑黑 发表于 2022-1-5 22:35
那个没有会不会的，按那一句连接一个CSS文档，该文档所定义的样式都可以使用，和页内样式的引用一模一样

这个需要练习的，空了我也去试试。谢谢黑黑{:4_187:}

马黑黑 发表于 2022-1-6 15:53

红影 发表于 2022-1-6 15:34
这个需要练习的，空了我也去试试。谢谢黑黑

在本地练习测试时可以的。

CSS文档就和文本文件一样建立，然后保存为 .css 文件。文件内容模拟如下：

body { /* 窗体设定 */
    color: #000;
    background: #fff;
}

div { /* div通用属性 */
    padding: 10px;
}

h1 { /* h1通用属性 */
    font-weight: bold;
    font-size: 40px;
}

#总容器 {
    /* 自定义id选择器，HTML调用时用 id="总容器" */
}

.灰色背景 { /* 自定义类选择器 ，HTML调用时用 class="灰色背景" */
    background-color: gray;
}

以上这些，都是根据需要设计，我只是简单举例

马黑黑 发表于 2022-1-6 15:56

红影 发表于 2022-1-6 15:34
这个需要练习的，空了我也去试试。谢谢黑黑

15# 我们定义了 body 的前景色和背景色，则窗口一开始就是白底黑字。我们还div的内边距，那么，所有的 div 标签如果没有重新设定，则 padding 通通是 10px，其它同理

红影 发表于 2022-1-6 21:30

马黑黑 发表于 2022-1-6 15:53
在本地练习测试时可以的。

CSS文档就和文本文件一样建立，然后保存为 .css 文件。文件内容模拟如下：
...

设计.css 文件后，在代码中直接调用它就可以了，是么？

红影 发表于 2022-1-6 21:31

马黑黑 发表于 2022-1-6 15:56
15# 我们定义了 body 的前景色和背景色，则窗口一开始就是白底黑字。我们还div的内边距，那么，所有的 di ...

我得去找个现成的.css 文件对照这看看，学习一下。谢谢黑黑{:4_187:}

马黑黑 发表于 2022-1-6 21:42

红影 发表于 2022-1-6 21:31
我得去找个现成的.css 文件对照这看看，学习一下。谢谢黑黑

论坛就有。查看代码，然后点击相应的CSS文件

马黑黑 发表于 2022-1-6 21:42

红影 发表于 2022-1-6 21:30
设计.css 文件后，在代码中直接调用它就可以了，是么？

当然。就这意思
页: [1] 2
查看完整版本: CSS运用到HTML的三种方法