CSS可以写到那个位置？ 是不是一定写到html文件里面呢？

行内式（内联样式）

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>

 <style type="text/CSS">

     选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

 </style>

 </head>

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

type="text/CSS" 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。

外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

 <head>

   <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />

 </head>

注意： link 是个单标签哦!!!

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

 href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
 type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
 rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

导入式

总结

引入方式优先级

引入CSS样式表（书写位置）的更多相关文章

  1. CSS样式表书写位置

    一.内嵌式写法:样式只作用于当前文件,没有真正实现结构表现分离. <head> <style type=”text/css”> 样式表写法 </style> < ...

  2. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  3. 5.css背景以及书写位置

    1.样式表书写位置 ◆内嵌式写法 <head> <style type=”text/css”> 样式表写法 </style> </head> 2.◆外链 ...

  4. 关于Vue-cli 组件引入CSS样式文件

    在 Vue-cli 组件 .vue 文件中引入 css 样式表出错   由于使用Vue-cli后, 引入css 样式表 不需要 多余../../ 之类路径  现在写法也发生了改变 <style ...

  5. CSS样式表的书写位置

    行内式(内联样式) 是通过标签的style属性来设置元素的样式,其基本语法格式如下: <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"&g ...

  6. 久未更 ~ 五之 —— 引入外部CSS样式表 小节

    > > > > > 久未更 系列一:在html中引入外部css样式表 //引入外部css样式表 //<lilnk>要放在<head>标签的第一行, ...

  7. css样式表的引入方式

    一般来说,css 有两种样式表的引入方式,在这里我记录一下,比较这两种引入方式的区别: <link rel="stylesheet" type="text/css& ...

  8. CSS样式表的写作规范

    推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...

  9. CSS样式----CSS样式表的继承性和层叠性（图文详解）

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

随机推荐

  1. dubbo-源码阅读之Filter实现原理

    最近完成一个需求,使用阿里Arms需要在log里面加上traceId,但是发现dubbo异常 被ExceptionFilter捕获 并打印  打印不出traceI,然后百度搜索如何重写Filter 参 ...

  2. 在linux设置/etc/vimrc 将vim 中后缀.sh的文件 的前几行进行默认输入

    输入vim test.sh 新建后缀sh的文件,效果如下: 具体/etc/vimrc配置为: if expand("%:e") == 'sh'  call setline(1,&q ...

  3. git——commit成功后，GitHub方格不变绿

    一通百度该设置的都设置了,还是不好使 发现有提示一栏 pull request的东西  在网上查貌似是因为两个分支内容不同 提示是否合并,还查到了不变绿可能的原因. Contributions未被Gi ...

  4. 最常用的C++序列化方案：protobuf

    参考链接:最常用的两种C++序列化方案的使用心得(protobuf和boost serialization) [c++] Google Protobuf库1. 什么是序列化?程序员在编写应用程序的时候 ...

  5. 在使用element-ui搭建的表格中,实现点击"定位"按钮后,屏幕滚动到对应行的位置

    背景: 一个后台管理系统,当管理员登录之后,会存在一个自己的id值, 在一个表格中,当点击"定位"按钮后,屏幕滚动到拥有管理员id的这一行,并且给设置一个高亮的背景 相关知识点: ...

  6. /etc/fstab修改及mkfs（e2label）相关应用与疑问

    http://blog.chinaunix.net/uid-23392298-id-62318.html 我们将以问题开始说明: 案例: 由于n年前的误操作,导致系统启动的时候,提示如下错误:Coul ...

  7. tp U函数 logs

    注意 U 函数 项目今天已经搞定了本以为可以上线了没问题了,但是 当我把tp调试模式关闭后:      define('APP_DEBUG',false); 页面完全加载不出来,于是开启:  'SHO ...

  8. split("\\s+") 和 split(" +") 有什么区别?

    原文地址:https://blog.csdn.net/it_taojingzhan/article/details/51968993 "hello world, this is Al&quo ...

  9. 剑指offer——72圆圈中最后剩下的数字

    题目描述 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机指 ...

  10. JasperReports入门，JasperReports是什么？

    Jasper报表 报表开发过程中面临的常见故障归纳在以下几点: 核心变化:为了反映业务发生变化或改进它通常以改变报告的核心逻辑. 结果输出:有各种各样的格式,报表可导出到如:HTML,文本,PDF,M ...