Cascading Style Sheets 通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

CSS可以帮助调整排版布局的展现 美化标签和内容 提高版面的信息密度 加强信息的冲击力和直观性。

书写位置分为:

一、行内式(内联样式)

内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的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文件的路径"  rel="stylesheet" />
</head>

注意: link 是个单标签!!

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

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

CSS 层叠样式表书写位置相关推荐

  1. 外链式样式表_引入CSS样式表(书写位置)

    CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片 ...

  2. html中怎样写css路径,CSS 书写位置

    CSS的样式书写位置 css的样式书写位置常用的有三种: 行内样式(内联样式) style标签 外部样式(link标签) 行内样式 css书写位置 生当作人杰,死亦为鬼雄 至今思项羽,不肯过江东 将样 ...

  3. css层叠样式表、基本选择器

    文章目录 系列文章目录 前言 一.css层叠样式表 1.css组成 2.css引入方式 3.文字样式 4.文本属性 二.选择器 1.基本选择器 2.最高样式引入 3.伪链接选择器 4.伪结构选择器 5 ...

  4. CSS这些书写规范你知道吗?

    前言 对于项目,那就是我们的亲儿子啊,作为一个前端菜鸟,面向用户就是将自己的儿子介绍给别人认识,肯定要让他白白净净,漂漂亮亮的啦,给别人一眼就喜欢上的感觉咯,哈哈哈~ 常在河边走,哪有不湿鞋,在我们编 ...

  5. CSS层叠样式表——元素背景和文本样式

    css层叠样式表第二天css02 这里写目录标题 css层叠样式表第二天css02 ==元素背景样式==(重点) ==height== ==width== ==overflow== ==文本样式==( ...

  6. 第一章CSS层叠样式表

    CSS层叠样式表 1.初识CSS 概念: CSS(Cascading Style Sheets),通常称为CSS样式表或层叠样式表(级联样式表) 作用: 主要用于设置HTML页面中的文本内容(字体,大 ...

  7. 前端笔记(7)css属性书写顺序,布局流程,chrome调试工具

    css样式表/层叠样式表(5) css属性书写顺序 布局流程 chrome调试工具 css属性书写顺序 布局定位属性 display / position / float / clear / visi ...

  8. css BEM书写规范

    [规范]css BEM书写规范 BEM是基于组件的web开发方法.其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码. BEM由Block.El ...

  9. html css js书写规范

    无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...

最新文章

  1. JMS详细的工作原理
  2. c++实现ftp服务器_第三步,尝试用树莓派搭建你的云计算平台和服务器
  3. 临时节点不能有child 子节点
  4. 数据库元数据数据字典查询_2_列出所有的数据库
  5. 更新日志_Roam 更新日志:0.7.3 啦
  6. Android RecyclerView 使用完全解析 体验艺术般的控件
  7. error和warning指令
  8. 回顾2020年那些“领域第一本”,每一本都强烈推荐!
  9. 新场景 + 新应用,Flink 在机器学习领域的生产落地
  10. 崛起于Springboot2.X之集成单机Redis(14)
  11. Web 前端页面劫持和反劫持
  12. 程序员转正答辩ppt
  13. 移动端开发旅游预约_套餐列表页面动态展示_套餐详情页面动态展示
  14. 【HAVENT原创】Firebase 相关操作及代码示例
  15. 《朗读者》中那些让人受益终生的句子
  16. Android桌面插件系列
  17. Codevs1074:食物链——题解
  18. Vuejs 的入门(笔记)
  19. vue+环信客服前端对接
  20. SegY地震体数据可视化分析工具

热门文章

  1. 选课系统 - 数据库查询(四)
  2. Cadence OrCAD Capture CIS使用Excel协助DRC检查网络名称低级错误的技巧图文教程
  3. C语言实现UDP服务器,客户端
  4. 眼见物业起“高楼”:真泡沫与假繁荣
  5. 数字化转型走基层:东呈国际集团重新定义中国酒店行业发展
  6. Problem G: 求中位数
  7. 12864oled模块
  8. 从前端页面到获取数据库的数据,需要哪些步骤?一个项目的起步。初学者可以来瞧瞧哇~
  9. 東京喰種_经典台词中日双语2
  10. 初一上册数学用计算机进行运算,人教版初一数学上册计算题及练习题