CSS的四种引入方式

简介: 原文:CSS的四种引入方式1.标签内的CSS。2.网页内的CSS。3.link引用的CSS。4.import引用的CSS。 下面是源代码: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
原文: CSS的四种引入方式

1.标签内的CSS。2.网页内的CSS。3.link引用的CSS。4.import引用的CSS。


下面是源代码:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 引入CSS的四种方式 </ title >
< style  type ="text/css" >
/* h2{ color:white;background-color:blue;} */
/* 要想使网页内的CSS生效,必须注释下一行代码 */
@import "import.css";
</ style >
< link  href ="alone.css"  rel ="stylesheet"  type ="text/css"   />
</ head >

< body >
< h1  style ="color:white; background-color:yellow" > 标签内的CSS </ h1 >
< h2 > 网页内的CSS </ h2 >
< h3 > link引用的CSS文件 </ h3 >
< h4 > import引用的CSS文件 </ h4 >
< p > link引用和import引用区别是:link是html加载前就引用,而import是html加载后才引用。举例,采用impor引用,会先显示无样式的页面,然后再把样式放进去。如果用JavaScript动态引用CSS,得使用link引用方式才可实现。 </ p >

</ body >
</ html >


import.css

@charset "utf-8";
/*  CSS Document  */
h4
{  color : #000000 ;  background-color : #009900 ;
}


alone.css

@charset "utf-8";
h3
{  color : white ;  background-color : red ; }
/*  CSS Document  */
目录
相关文章
|
前端开发 JavaScript 异构计算
CSS隐藏元素的几种方式
CSS隐藏元素的几种方式
440 0
|
前端开发 容器
我已经说了5种css居中实现的方式了,面试官竟然说还不够?
这是一篇关于居中对齐方式的总结 开篇之前,先问一下大家都知道几种居中的实现方式? 面试时答出来两三个就不错了,就怕面试官还让你继续说。今天就来总结一下这些居中的方式 使用flex布局设置居中。 使用flex 时也能通过给子项设置margin: auto实现居中。 使用绝对定位的方式实现水平垂直居中。 使用grid设置居中。 使用grid时还能通过给子项设置margin: auto实现居中。 使用tabel-cell实现垂直居中。 还有一种不常用的方法实现垂直居中。 最后还有一种奇葩的方法。容器设置position: relative。孩子设置 top、left、bottom、right都设
449 0
我已经说了5种css居中实现的方式了,面试官竟然说还不够?
|
前端开发 容器
CSS布局的三种方式
CSS布局的三种方式:1.绝对定位 2.相对定位 3.浮动
210 0
CSS布局的三种方式
|
前端开发
【前端】【样式】CSS居中的三种方式
【前端】【样式】CSS居中的三种方式
176 1
|
前端开发 UED
CSS盒子模型隐藏的几种方式
CSS盒子模型隐藏的几种方式
CSS盒子模型隐藏的几种方式
|
前端开发 JavaScript 开发者
CSS 样式加载方式| 学习笔记
快速学习 CSS 样式加载方式。
CSS 样式加载方式| 学习笔记
|
前端开发
CSS 学习4.四种css导入方式
CSS 学习4.四种css导入方式
CSS 学习4.四种css导入方式
|
前端开发
CSS的选择器,css样式引入方式,css字体和文本属性(外观属性)
CSS的选择器,css样式引入方式,css字体和文本属性(外观属性)
257 0
CSS的选择器,css样式引入方式,css字体和文本属性(外观属性)
|
前端开发
Html 之使用CSS样式的方式
Html 之使用CSS样式的方式
191 0
Html 之使用CSS样式的方式
|
前端开发
CSS使用基本方式
内联CSS要在特定的HTML标记内使用。<style>属性用于设置特定HTML标记的样式。 建议不要使用内联CSS,因为每个HTML标记都需要单独设置样式,如果您只使用内联CSS,管理网站可能会变得十分困难。但是,它在某些情况下很有用。
280 0
CSS使用基本方式

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    428
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    340
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    323
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    210
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    437
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    617
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    856
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    226
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    698
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    397
  • 下一篇
    开通oss服务