1.内部样式表

内部样式表是将CSS代码写在HTML文档的head标签中,并且用style标签定义

<head>
  <style type="text/css">
      选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
  </style>
<head>

(1)style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方.
 (2)type="text/CSS"在HTML中可以省略.

2.行内式(内联样式)

通过标签的style属性来设置元素的样式

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

(1)语法中style是标签的属性,任何标签都拥有style属性,用来设置行内式.

(2)属性和值书写规范与CSS样式规范相同,行内式只对其所在的标签及嵌套在其中的子标签起作用.

3.外部样式表(外链式)

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中

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

注意:link是单标签

link标签需要放在head头部标签中,并且必须指定link标签的三个属性

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

样式表总结

样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便,权重高 没有实现样式和结构相分离 较少 控制一个标签(少)
内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面(中)
外部样式表 完全实现结构和样式相分离 需要引入 最多,强烈推荐 控制整个站点(多)

CSS样式表规则

使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则,具体格式如下:

1.选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。

CSS三种样式表及其使用(内部样式表,行内样式表,外部样式表)相关推荐

  1. CSS基础(样式声明、引用(行内样式、内部样式、外部样式、导入样式)、样式优先级)

    目录 什么是CSS 为什么使用css css样式规则 css引用(行内.内部.外部link链入.导入式@import) css三种使用方法的区别 ***网页三大元素*** ***什么是CSS***   ...

  2. html5中行内样式写法,react怎么写行内样式?

    react怎么写行内样式?下面本篇文章给大家介绍一下react 行内样式几种写法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. react 行内样式几种写法 法一 这是评论列表组件 ...

  3. 在vue中怎么写行内样式高_vue v-bind绑定行内样式

    使用 v-bind 指令去绑定行内样式,即使用 v-bind:style 或者 :style 的方式去动态绑定行内样式. style中直接定义样式 下面实例中我们将直接在 v-bind:style 属 ...

  4. web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出

    CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...

  5. CSS三种样式表:行内样式表、内部样式表、外部样式表

    目录 一.CSS三种样式表 1.内部样式表 2.行内式(内联样式) 3.外部样式表(外链式) 二.三种样式表的对比 三.CSS样式表规则 一.CSS三种样式表 1.内部样式表 2.行内样式表(内联式) ...

  6. CSS三种样式表 内部样式表、行内部样式表、外部引用

    目录 CSS三种样式表 1.内部样式表 2.行内部样式表 3.外部引用: CSS三种样式表 1.内部样式表 2.行内样式表(内联式) 3.外部样式表(外链式) 1.内部样式表 内嵌式:将CSS代码集中 ...

  7. CSS三种样式表(内部样式表、行内样式表、 外部样式表)

    引入CSS样式表(书写位置) CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表(内嵌式) 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义 ...

  8. CSS的三种引入方式:外部样式、内部样式和行内样式

    CSS的三种引入方式:外部样式.内部样式和行内样式 外部样式 链接式:link标签 导入式:@import 链接式与导入式的区别 内部样式 行内样式 样式优先级 外部样式 即CSS代码保存在外部,HT ...

  9. CSS的引入方式:行内样式表(行内式)、内部样式表(嵌入式)、外部样式表(链接式)

    文章目录 CSS引入方式 内部样式表 行内样式表 外部样式表 CSS引入方式总结 CSS引入方式 内部样式表 内部样式表(内嵌样式表)是写到 html 页面内部.是将所有的CSS代码抽取出来,单独放到 ...

  10. css引入样式-行内样式、内嵌样式和外链样式

    css初识及引入样式 概念:css通常称为css样式表或层叠样式表 作用: - 主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局和外观 ...

最新文章

  1. 某33岁国企程序员求助:目前税后60+,工作975,拿到蚂蚁p7offer,3.8k,6200期权,有必要去镀金吗?...
  2. GoldenGate技术架构(二)
  3. LeetCode Roman to Integer(罗马数字转换)
  4. jedis使用 api_通过Jedis API使用排序集
  5. sql 可以多个分组吗_你知道吗?罗非鱼的品种多达100多个,不单是食用鱼也可以是观赏鱼...
  6. linux lvm界面,Linux使用入门教程之LVM
  7. Spring Boot 集成 MyBatis (注解版 与 xml 配置版)
  8. 我认知的javascript之作用域和闭包
  9. android 遮罩窗口,Andriod PopupWindow 实现遮罩效果
  10. 一起来自制水果甜品吧
  11. 个人怎么开发APP?APP开发全流程解析!
  12. RESTful架构和实现级别
  13. php deel views,全量修改文件App名称和改动views位置设置
  14. Xplorasia(畅怀旅游)选择云呐资产管理为企业降本增效
  15. 一个程序员的自白:我为什么写博客
  16. 程序员必读经典书籍推荐
  17. Colly 学习笔记(二)——爬虫框架,抓取下载数据(上证A股数据下载)
  18. 画图技巧 : Matlab调用Origin作图
  19. C语言的time函数和localtime函数
  20. JMeter类比loadrunner断言、参数化、集合点、关联、事务——学习笔记

热门文章

  1. C# 获取公网ip地址
  2. bzoj1001/BJOI2006 灰太狼抓到的兔子
  3. vue项目安装使用 Ant Design 和 sass
  4. 12个关于移动 H5 开发的采坑问题汇总
  5. 教你如何做出有创意的作品
  6. catia如何单击停止捕获_catia怎么取消自动捕捉网格点 catia自动捕捉取消教程
  7. Android9.0(androidP)系统API和行为变化
  8. JavaScript应用:前端MD5加密
  9. 微信QQ已经被封了的域名怎么处理 微信QQ已经被封了的域名如何正常打开
  10. 比较精短的显示时间的代码