css学习

轩渊

已于 2022-03-01 21:57:26 修改

阅读量112

点赞数

分类专栏： something 文章标签：前端 css

于 2022-03-01 21:50:57 首次发布

本文链接：https://blog.csdn.net/weixin_44932880/article/details/123215099

版权

something 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

CSS 指层叠样式表 (Cascading Style Sheets)

用来修饰html中的标签等，是美化html的工具

有四种css样式的引入方法

行内样式（内联样式）
内部样式表（嵌入样式）
外部样式（LInk 链入）
导入式

内联式（行内样式）

html所有标签都有style属性,style属性中设置样式

<标签 style="属性:值;
			属性:值; ">
			 css内联式 </标签>

css 装饰属性查询手册

内部样式表（嵌入样式）

将 CSS 内容放在 style 标签中，同时 style 标签放在 head 标签中。

style标签中代表样式块语言
语法如下

有三种选择器（标签选择器，id选择器，class选择器）
优先级：id选择器>class选择器>标签选择器

选择器{
样式名:样式值;
样式名:样式值;
}

使用示例

<head>
    <style type="text/css">
     /*第一种 作用于所有标签*/
        标签{样式名:样式值;  样式名:样式值;}
      /*第二种 作用于id*/
       #id{样式名:样式值;  样式名:样式值;}
       /*第三种 作用于类*/
       .class{样式名:样式值;  样式名:样式值;}
    </style>
</head>

<body>
    <标签 id="id" class="class">
			 所有标签都有id与class属性 </标签>
</body>

外部样式（Link 链入）

CSS 样式放在的内容放在后缀为 css 的文件中，
使用 link 标签将 CSS 文件链入html 文件中。

link 标签放在 head 标签中，link 标签有三个属性，

href =“CSS 文件的路径”
rel=“stylesheet” 表示被链接的文档是一个样式表
type=“text/css”


<head>
    <link href="css.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <p>CSS 使用方法</p>
</body>

导入式

依旧是使用外部 CSS 文件，但是不使用 link 标签，而是使用 import

<head>
    <style type="text/css">
        @import "css.css"         /*两者选择其中一种*/
        @import url(css.css);    /*两者选择其中一种*/

    </style>
</head>

比较

在这里插入图片描述

优先级（但是最后定义的优先级最高，及最近原则）

行内样式 > 内部样式 > 外部样式
　参考

轩渊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习

CSS 指层叠样式表 (Cascading Style Sheets)用来修饰html中的标签等，是美化html的工具有四种css样式的引入方法行内样式（内联样式）内部样式表（嵌入样式）外部样式（LInk 链入）导入式内联式（行内样式）html所有标签都有style属性,style属性中设置样式<标签 style="属性:值; 属性:值; "> css内联式 </标签>css 属性查询手册内部样式表（嵌入样式）将 CSS 内容放
复制链接

扫一扫