CSS样式的4种使用方式

最新推荐文章于 2022-03-21 22:12:01 发布
最新推荐文章于 2022-03-21 22:12:01 发布
阅读量694 收藏
点赞数
文章标签： css stylesheet web import url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zw_2011/article/details/6869913
版权
一、内部内联样式 

<html>
<head>
<title>内联CSS样式</title>
</head>
<body>

内联CSS样式：直接把样式写在某个标记内（作为style属性）
<br/>
<H1  STYLE="color: orange; font-family: impact">Stylesheets: The Tool of the Web Design Gods</H1>
</body>
</html>

 

二、内部嵌入样式

<HTML>
 <HEAD>
  <TITLE> 嵌入CSS样式 </TITLE>

 <STYLE TYPE="text/css">
  H1 { color: green; font-family: impact }
 </STYLE>

 </HEAD>

 <BODY>

嵌入CSS样式：把样式定义在<head></head>标记中
  <H1>Hello,CSS!</H1>
  <H1>Stylesheets: The Tool of the Web Design Gods</H1>

  <H2>Stylesheets: The Tool of the Web Design Gods</H2>
 </BODY>
</HTML>

 

三、 外部链接样式

<HTML>
 <HEAD>
  <TITLE> 外部链接CSS样式 </TITLE>

 <LINK REL="stylesheet" HREF="mystyles.css" TYPE="text/css">
 
 </STYLE>
 </HEAD>

 <BODY>
 <H1>Hello,CSS!</H1>
 <H1>Stylesheets: The Tool of the Web Design Gods</H1>

 <H2>Stylesheets: The Tool of the Web Design Gods</H2>
 </BODY>
</HTML>

----------------------- mystyles.css ------------------------------------------------------------------

H1 { color: green; font-family: impact }

----------------------- mystyles.css ------------------------------------------------------------------

 

 

 

四、外部导入样式

<HTML>
 <HEAD>
  <TITLE> 外部导入CSS样式 </TITLE>
 
<STYLE TYPE="text/css">
<!--
 /* 导入CSS样式实际上存在于内部样式中 */
 @import url(css/mystyles.css);
 @import url(css/mystyles2.css);

 H1 { color: orange; font-family: impact }
-->
</STYLE>
 </HEAD>

 <BODY>
   <H1>Hello,CSS!</H1>
 <H1>Stylesheets: The Tool of the Web Design Gods</H1>

 <H2>Stylesheets: The Tool of the Web Design Gods</H2>
 </BODY>
</HTML>

 

小结：

内部样式：

    1.内联样式（行内样式）

    2.嵌入样式

外部样式：

    1.链接样式

    2.导入样式

天天向尚6
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
四种CSS常用的选择器使用方法和注意事项
09-27
主要介绍了四种CSS常用的选择器使用方法和注意事项，为大家介绍了CSS选择器的优先级，感兴趣的小伙伴们可以参考一下
css的4种使用方式
斑码教育的博客
09-28 197
css的4种使用方式 行内式 <!-- 行内样式 --> <h1 style="color: red;">疫情最新消息</h1> 内嵌式 <!-- 内嵌式 --> <style> p { background-color: pink; font-size: 25px; } </style> 外链式（引入式） <!-- 外链式 --> <link rel="
html中css的使用方式（四种）
Amoy220的博客
01-21 552
1 内联引入 在元素上加属性style,格式： 缺点： 1.与html混合在一起，代码不美观 2.内联样式一次，只能对一个标签起作用，如果有多个相同属性，需要重复写很多 3.可维护性差 4.可复用性差 2.内嵌引入 在head中写style标签，style标签中写css，格式为： 选择器{ 属性名：属性值； 属性名：属性值； 。。。 } div{ font-s
css的四种调用方式
czplplp_900725的专栏
08-13 737
样式的使用有大体有四种方式： 外联式样式表；内嵌样式表；元素内定；导入样式表 1，外联式样式表 添加在HTML的头信息标识符里： 其中href是目标文档的URL， type则规定了目标URL的MIME类型，而media规定了文档将显示在什么设备上。media="screen" 一般都用all。 2，内嵌样式表 添加在HTML的头信息标识符里： ty
css样式的使用方式
abc630727719的博客
03-20 92
层叠样式表 内联样式<p style="color:red; font-size:20px;">今天天气真不错</p> 内部样式 将样式写在head标签内<style> p{ color: red; } </style> 外部样式表 通过link标签进行引用。开发中推荐使用<link rel="styl...
CSS 控制页面样式的4种方式和优先级问题
09-25
"CSS 控制页面样式的4种方式和优先级问题" CSS 控制页面样式的四种方式是指在 HTML 页面中应用 CSS 样式的四种方法，它们分别是行内方式、内嵌方式、链接方式和导入方式。这些方式的应用可以使得页面样式变得丰富...
JS设置CSS样式的方式汇总
11-30
1. 直接设置style的属性 某些情况...2. 直接设置属性（只能用于某些属性，相关样式会自动识别） element.setAttribute('height', 100); element.setAttribute('height', '100px'); 3. 设置style的属性 element.setA
css行内样式,内嵌样式,外部引用样式的三种使用方式
12-14
三中的使用方法的简单实例如下： 行内样式： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>css行内样式</title> </head> <body> ...
详解CSS文件的三种引入方式
01-19
使用style属性引入CSS样式。 示例： <h1 xss=removed>style属性的应用 直接在HTML标签中设置的样式 实际在写页面时不提倡使用，在测试的时候可以使用。 例如： <!DOCTYPE> <html> <head> <...
原生js更改css样式的两种方式
10-20
本文将详细介绍两种使用原生JavaScript更改CSS样式的常见方法。 1. **通过`node.style.cssText`属性更改样式** 这种方法允许我们直接在JavaScript代码中设置元素的CSS样式。例如，假设我们有一个类名为`root`的`...
基本CSS样式的使用介绍！
Jason的博客
06-21 205
1.CSS (1)概念：Cacading Style Sheet 层叠样式表 (2)动静分离（独立的js文件） (3)内容和表现分离（独立的css文件） (4)HTML页面中嵌入CSS样式的方式 行内样式 <tag style=””></tag> 内部样式 <head> ... <style></style> ... </head> 外部样式 创建独立的css文件 xxx.css 与ht
HTML 引用Css样式的四种方式
weixin_30240349的博客
07-02 341
不才，只知道HTML引用CSS样式有四种方式，内部引用和外部引用各两种，因为老是忘记细节，记下了随时翻阅亦可方便如我般的初学者 内部引用方式1： 直接在标签内用 style 引用，如： <div class="pmc" style="border:1px solid #440000;padding=0px;margin:40px;"> </div> ...
CSS常见样式的介绍和使用（附加案例）
PIKapikaaaa的博客
03-21 6797
CSS常见样式的介绍和使用（附加案例） 选择器的理解与应用 常见样式 附加案例
CSS四种设置方式
wzqnls
07-17 3110
上面这张思维导图已经大概的讲明白了四种设置方式的不同点，下面就细入说明一下各自的用法和注意点。 1.嵌入样式表 CSS四种设置方式 内联样式表 运行结果： 2.嵌入样式表 CSS四种设置方式 p{ font-size:2cm; color:red; } h2{ color:red;
【CSS】CSS的三种使用方式
yy_bazinga的博客
03-08 4990
CSS的三种使用方式CSS内联样式（行内样式）内部样式表外部样式表 CSS 网页分成三部分 结构（HTML） 表现（CSS） 行为（JavaScript） CSS：层叠样式表 CSS用来设置网页中元素的样式。 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层设置样式，而最终我们能看到的只是网页的最上边一层。 CSS修改样式有三种方式： 1、内联样式（行内样式，实际开发中不推荐使用） 2、内部样式表 3、外部样式表（最佳方式） 内联样式（行内样式） 在标签内部通过style属性来设置元素的样式。
CSS学习之CSS样式介绍和使用
DanEmpress的博客
04-13 781
CSS Cascading style Sheets 级联样式表，层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用或XML（标准通用标记语言的一个子集）等文件样式的计算机语言； CSS用于控制网页的样式和布局； CSS3 是最新的CSS 标准； Html是内容，CSS是控制内容的显示风格，如大小，字体，颜色，等样式，JS动作，行为； CSS 指层叠样式表(Cascadi
在html标签中写css样式,HTML网页中使用CSS样式表的四种方式介绍
weixin_32673065的博客
05-30 489
原标题：HTML网页中使用CSS样式表的四种方式介绍HTML网页中如何使用CSS样式表，四种方式介绍： 一、使用STYLE属性： 将STYLE属性直接加在个别的元件标签里。这种用法的优点是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。二、使用STYLE标签： 将样式规则写在...标签之中。例如：通常是将整个的 ...结构写在网页的 部份之中。这种用法的优点就是在於整篇文件的统一性...
CSS之 使用CSS控制页面的四种方式
热门推荐
冯浩月
02-21 1万+
前言  CSS在制作网页中，是大量使用的一种语言，多参考一些网站的源代码可以帮助我们快速掌握各种技巧并运用到实际制作中，下面小编就如何在网页中引入CSS样式表做一下简单的介绍。CSS控制页面  使用CSS制作网页时，一个基础的要求是主流的浏览器之间的显示效果要基本一致，通常的做法是一边编写HTML和CSS代码，一边在两个不同的浏览器上进行预览，及时地进行调整，这有利于深入掌握CSS。  通过大致地...
CSS之四种引用方式【详细、全面】
Carroll的博客
10-23 7689
目录 css的四种引入方式 1.行内样式 2.内嵌样式 3.外部样式 3.1.链接样式（推荐） 3.2.导入样式（不建议使用） 4. 链接式和导入式的区别 5.四种CSS引入方式的优先级 css的四种引入方式 1.行内样式 最简单的一种，直接对HTML标签使用 style=" " 例如： <p style="color:#F00; "><...
CSS学习总结：掌握CSS样式规则和使用方式
6. CSS样式的三种使用方式 CSS样式可以通过三种方式使用：内链样式表、嵌入式样式表和外链样式表。 6.1 内链样式表 内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值