CSS（层叠样式表）——1_css_加载三种方式

最新推荐文章于 2023-05-09 10:00:00 发布

inexaustible

最新推荐文章于 2023-05-09 10:00:00 发布

阅读量390

点赞数

分类专栏： Java ee自学

本文链接：https://blog.csdn.net/inexaustible/article/details/103313663

版权

Java ee自学专栏收录该内容

40 篇文章 0 订阅

订阅专栏

Web前端有一句话:html是结构层,CSS:表现层,JS:是行为层

CSS加载分为四种方式:

           1:默认的效果
           2:外部的CSS文件(部样式表)
多个不同的html文件共用一个css文件
           3:样式文件,html<style>标签中声明的(内部样式表)
多个不同的元素(节点-标签名)共用一个样式
           4:内联样式,在任何一个元素上面写的style属性;(内联样式)
   只有指定了特定css样式的元素起作用;

当这四种方式有冲突的时候,谁先谁后呢？

优先级:4>3>2>1

案例：

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>css_01_hw</title>
       <!--
           CSS加载分为四种方式:
           1:默认的效果
           2:外部的CSS文件(部样式表)：
               多个不同的html文件共用一个css文件
           3:样式文件：html<style>标签中声明的(内部样式表)
               多个不同的元素(节点-标签名)共用一个样式
           4:内联样式：在任何一个元素上面写的style属性;(内联样式)
               只有指定了特定css样式的元素起作用;
           当这四种方式有冲突的时候,谁先谁后呢?

优先级:4>3>2>1
-->

<link rel="stylesheet" type="text/css" href="css_01_hw.css">
       
       <style type="text/css">
           /*
               p:标签名
               {填写的是键:值;};
               填写的内容和style里面的内容一样

css:样式都是大括号括起来的内容;
css的三种写法,CSS样式,说的就是大括号里面的内容

css样式可以写多个,每一个样式之间用;隔开
           */
           p
           {
               /* 颜色 */
               color:blue;
               /* 字体大小 */
               font-size: 28px;
           }
       </style>
   </head>
   <body>
       
       <p style="color:red;">
           这是一段内容
       </p>
       <p>
           这是另外一段内容
       </p>
       <p>
           这是另外一段内容
       </p>
       <p>
           这是另外一段内容
       </p>
       <p>
           这是另外一段内容
       </p>
   </body>
</html>

外部的CSS文件: css_01_hw.css

/* 编码 */

@charset "UTF-8";

/* 这个代码和在html中style标签中的代码一样 */

{

/* 键:值 */

color:yellow;

}

inexaustible

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS（层叠样式表）——1_css_加载三种方式

Web前端有一句话:html是结构层,CSS:表现层,JS:是行为层CSS加载分为四种方式: 1:默认的效果 2:外部的CSS文件(部样式表) 多个不同的html文件共用一个css文件 3:样式文件,html<style>标签中声明的(内部样式表) ...
复制链接

扫一扫