菜鸟的HTML5之路DAY 04-----CSS的样式表（书写位置）

最新推荐文章于 2023-07-20 18:03:00 发布
最新推荐文章于 2023-07-20 18:03:00 发布
阅读量407 收藏
点赞数
文章标签： css样式书写位置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzl529/article/details/101024175
版权

文章目录

1 引入CSS样式表（书写位置）

css的书写位置共有三种，分别为 内部样式表，行内式（内联样式），外部样式表（外链式）

1.1内部样式表

内部样式表也可以称作内嵌式，是将css写入HTML文档head头部标签中，
并需要使用style标签定义

写在style内部
在这里插入图片描述
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type=“text/CSS” 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。

1.2行内式

内联式，是通过标签自身的style属性设定css样式
如图，写在行内为行内式。
在这里插入图片描述
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

1.3外部样式（外链式）

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

<link href="test06.css" type="text/css" rell="stylesheet"/>

需要通过link标签将css文件与html文件相互关联起来，这样设置在css文件中的样式才能被html引用。注意link标签是一个但标签，写在head标签中

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

1.4 三种样式表总结

样式表优点缺点
行内样式书写方便没有实现样式和结构相分离
内部样式表部分结构样式相互分离没有彻底分离，且一旦代码量多时，修改较麻烦
外部样式表完全实现结构样式相互分离需要引入
hzl529
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 三种书写位置——行内、内嵌和外部。
weixin_46558137的博客
03-30 2488
1、 外部式js <script src="new.js" ><!-- 中间不可以写代码 --!></script> 2、 内嵌式js <script type="text/ javascript"> alert( '如果我是DJ，你还爱我吗? ') </script> 3、 <body> //行内式的js直接写到元素...
ym——Andorid-15k+的面试题。
热门推荐
陈宇明
08-07 2万+
最近才开的博客，希望大家多多关注，andorid开发也做了3年有余了，也面试很多加企业，借此机会分享一下，我们中遇到过的问题以及解决方案吧，希望能够对正在找工作的andoird程序员有一定的帮助。学完本人博客发表《ym--andorid从零开始教程》+面试题目全理解，年薪18w以上绝对没问题。 特别献上整理过的50道面试题目 1.listView的优化方式 重用conve
引入CSS样式表（书写位置）
里昂的博客
10-20 202
1. 行内式（内联样式） <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名> 注意： style其实就是标签的属性 样式属性和值中间是: 多组属性值之间用;隔开。 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余 缺点： 没有实现样式和结构相分离 2.内部样式表（内嵌样式表） <he...
css文件应该放在哪？
程宇寒
12-19 3114
css文件应该放在哪？
数据类型-1.8JS三种书写位置-行内-内嵌-外部
qq_44280574的博客
09-10 287
1.初识JS 1.6JS初体验 JS有3种书写位置，分别为行内、内嵌、外部 1.行内JS <input type="button" value="唐伯虎" onclick="alert('秋香姐')"> 可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick 注意单引号双引号的使用：在HTML中，我们推荐使用双引号；在JS中我们推荐使用单引号 可读性差，在html中编写大量JS代码时，不方便阅读 引号易错，引号多层嵌套匹配时，非常容易弄混 特殊情况下才使
CSS三种样式表(书写位置)
匿名攻城狮
06-24 4985
(1)内部样式表 内部样式是将CSS代码集中卸载HTML文档的head头部标签中,并用style标签定义,基本语法格式如下: <head> <style type="text/css"> 选择器 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } </style> ...
HTML5 ——学习笔记整理
Thaley的博客
02-09 800
HTML学习笔记整理
Java面试-北大青鸟合肥科海学院
qq_40731742的博客
05-19 1365
内部资料，请勿外传                                                              目录一、         Java基础部分... 111、           一个".java"源文件中是否可以包括多个类（不是内部类）？有什么限制？.. 112、           说说&amp;和&amp;&amp;的区别。.. 113、      ...
从实战上手把手搞懂JS对象
码工是小希
03-09 1469
马上收藏
JavaScript
pengjianglilive的专栏
08-02 854
为什么学习 JavaScript? JavaScript 是 web 开发人员必须学习的 3 门语言中的一门： HTML定义了网页的内容 CSS描述了网页的布局 JavaScript控制了网页的行为 阅读本教程前，您需要了解的知识： 阅读本教程，您需要有以下基础： HTML 教程 CSS 教程 JavaScript简介 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 ...
零基础学习WEB前端开发(十九)：CSS的引入方式（行内样式表、内部样式表、外部样式表）
陶小桃Blog
11-07 3516
一、内部样式表 内部样式表，也叫内嵌样式表，写到html页面内部，是将所有的CSS代码抽取出来，单独放到<style>标签中。 前面笔记所记录的都是这种内部样式表。 <style>标签理论上可以放在html文档的任何地方，但一般都放在文档的<head>标签中。 用这种方式，可以方便控制当前整个页面中的元素样式设置 代码结构清晰，但是没有实现样式与结构的完全分离 二、行内样式表 行内样式表是用来修改段落中的一部分样式，就局部内容进行简单修改。 语法：
Web前端第一阶段基础考试试卷HTML+CSS
最新发布
qq_54075517的博客
07-20 1213
Web前端第一阶段基础考试试卷HTML+CSS
H5 css引入方式 内联样式表
qq_42467563的博客
10-18 1745
内联样式表 通过style标签进行设置 &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;引入方式&lt;/title&gt; &lt;style&gt; p{color:red;} i{color:yellow;} u{color:white;} em{color:greenyellow;} su
HTML5导入式,详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式
weixin_34416354的博客
06-17 799
CSS引入方式-行内式通过 style这个标签属性,将css键值对直接写入标签内css引入方式-内嵌式(嵌入式)使用style标签将css属性名和属性值引入到html页面中,通常style标签放置在head标签中。为什么css样式要放置在head标签中呢,因为代码从上到下执行,如果先加载结构,那么用户看到的就将是干巴巴的内容,而没有通过美化,而先加载样式后加载结构,就相当于孩子出生就是穿着衣服的！...
HTML中CSS代码写哪,CSS样式可以写在哪儿
weixin_39627405的博客
05-31 1704
<1>内联式内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：这里文字是红色。注意要写在元素的开始标签里，不可以写在结束标签里。并且css样式代码要写在style="" 双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：这里文字是红色。;<2> 嵌入式嵌入式css样式，就是可以把css样式代码写在标签之间。如下面代码实现...
html中的样式写在什么位置,css样式放在哪里？
weixin_39636691的博客
06-04 5775
css(Cascading Style Sheets，层叠样式表)，它是一种用来表现HTML或XML等文件样式的计算机语言，是用来表示html样式的一种编程语言，是可以做到网页和内容进行分离的一种样式语言。CSS主要用来设计网页的样式，美化网页；它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号...
HTML5---H5---CSS的三种书写形式
It's better to burn out 'cause rust never sleeps(与其苟延残喘，不如钟情燃烧)
09-09 7963
优先级： 外部样式 1.内部 head> style> /*内部样式表，一般用于覆盖公用样式*/ ＃headTip { color: 0xff5; } style> head> 2.使用link标签，在文档中声明使用外接资源 ss外部样式表指定编码的@CHARSET="utf-8"
JS和CSS的引入/写入位置应该放在哪里？
Willian的博客屋
10-13 2万+
在HTML5中： 引入CSS和JS文件时 到底应该在head标签中还是body中？ 1，引入CSS在head中,2,JS 的放置位置 a.有的js是立即执行，有的js是调用执行。 （ 立即执行在网页上打开时就可以看到效果，而调用执行的，一般会在其它控件触发事件的时候调用。）对于调用执行的，我们最好放在head里，直接声明或者引用外部文件（head）。 对于
JS的三种书写位置，分别为行内、内嵌和外部。
lhblmd的博客
04-13 698
js 的三种书写位置，分别为行内、内嵌和外部。 1.行内 <input type="button" value="点我试试" onclick="alert('Hello World')" /> 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号 可读性差， 在html中编写JS大量代码时，不方便阅读； 引号易错，引号多层嵌套匹配时，非常容易弄混； 特殊情况下使用
ARM Cortex-M3 权威指南：菜鸟基础篇
Cortex-M3 权威指南 本资源指南着重介绍 Cortex-M3 微控制器的设计、架构、编程和应用，旨在帮助读者快速掌握 Cortex-M3 的知识和技能。 **Cortex-M3 概述** Cortex-M3 是 ARM 公司推出的 32 位微控制器架构，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值