外部样式和内部样式

最新推荐文章于 2024-11-14 14:24:50 发布
最新推荐文章于 2024-11-14 14:24:50 发布
阅读量482 收藏 8
点赞数 3
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80009066/article/details/138498850
版权
本文详细介绍了HTML的基本结构，包括链接、表格、列表、图片标签的使用方法，以及CSS的选择器（标签选择、类选择和ID选择）和内联、内部、外部样式的应用。内容涵盖了HTML标签的实例和CSS样式对网页布局的影响。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>

 

<html>

 

 <head>

 

  <meta charset="utf-8">

 

  <title>第一个页面</title>

 

  <style>/* 内部样式 */

 

   h3{

 

    color: red;/* 字体颜色 */

 

    font-size; 36px;/* 文字大小 */

 

    text-align: center;/* 文本居中显示 */

 

   }

 

   

 

   h1{

 

    color: green;

 

   }

 

   .bigFont{/* 类名 */

 

    font-size:88px;}

 

    #col{

 

     color: hotpink;

 

    }

 

  </style>

 

  <link href="../css/gaibianzitiyangshi.css" rel="stylesheet"/>

 

 </head>

 

 <body>

 

  <!-- 选择器：

 

  1.标签选择

 

  2.类选选择

 

  3.id选择 -->

 

  <a href="./aaa.html#aaa">点击跳转到指定位置</a> <!-- ./就是代表本路径 -->

 

  <!-- 指定位置是同一个路径下 比如我们现在需要跳转的位置及："aaa"就是在“js“这一个路径下-->

 

  <table border="1">

 

   <tr>

 

    <td>

 

     buto

 

    </td>

 

    <td rowspan="2">hebing</td>

 

   </tr>

 

   <tr>

 

    <td>cccc</td>

 

   </tr>

 

  </table>

 

  

 

  

 

  

 

  <table border="1">

 

  <tr>

 

   <td>普通单元格</td>

 

    <td rowspan="2">合并的单元格</td>

 

    

 

  </tr>

 

 <tr>

 

   <!-- 这一行不需要再添加第一个单元格，因为它已经被合并到上一行了 -->

 

   <td>普通单元格</td>

 

 </tr>

 

  <tr>

 

    <td>普通单元格</td>

 

 <td>普通单元格</td>   

 

  </tr>

 

  

 

</table>

 

<br />

 

  <table border="1">

 

    <tr>

 

      <td colspan="2">合并的单元格</td>

 

      <!-- 这一行不需要再添加第二个单元格，因为它已经被合并到第一个单元格了 -->

 

    </tr>

 

    <tr>

 

      <td>普通单元格</td>

 

      <td>普通单元格</td>

 

    </tr>

 

    <tr>

 

      <td>普通单元格</td>

 

      <td>普通单元格</td>

 

    </tr>

 

  </table>

 

  

 

  <br />

 

  <!-- 图片标签：img，

 

           src：图片源（相对路径）

 

   alt：图片加载错误提示

 

   width：宽

 

   heigh：高

 

   tips提示：width和hight属性一般只设置一个，

 

   另一个值自动进行等比例缩放。 -->

 

   

 

  < img src="img/kk.jpg"/> 

 

  <hr />

 

  <!-- 列表标签:

 

  1.无序列表

 

  2.有序列表

 

  3.自定义列表

 

  li列标签

 

   -->

 

   <ul>

 

   

 

   <li>第一列</li>

 

   <li>第二列</li>

 

   <li>第三列</li>

 

   <li>拉拉</li>

 

   </ul>

 

   <ol>

 

   <li>十年</li>

 

   <li>兄妹</li>

 

   <li>蜃楼</li>  

 

   

 

   </ol>

 

   <dl>

 

   <dt>选购指南</dt>

 

   <dd>家电</dd>

 

   <dd>汽车</dd>

 

   

 

   </dl>

 

   

 

   <!-- <table></table> 表格标签-->

 

  <table border="1" cellspacing="2" cellpadding="3"><!-- border： 边框 -->

 

  <!-- cellspacing:单元格之间的空间距离 -->

 

  <!-- cellpadding：单元格内的填充距离 -->

 

   <thead> <!-- 表格的头 -->

 

   <tr><!-- 表格中的行 -->

 

   <th>姓名</th><!-- 表头 -->

 

   <th>班级</th>

 

   <th>性别</th>

 

   </tr>

 

   </thead>

 

   <tbody> <!-- 表格中的数据部分 -->

 

   <tr> <!-- 第一行数据 -->

 

   <td>张三</td> <!-- table data：数据单元格 -->

 

   <td>计算机三班</td>

 

   <td>未知</td>

 

   </tr>

 

   

 

   

 

   

 

   </tbody>

 

   

 

   </table>

 

   <br /><br><br><br><br><br><br><br><br><br>

 

   

 

   

 

   

 

   <!-- css：层叠样式表

 

   三种引入方式：

 

   1.内联样式：在开始标签加入style属性，在属性中书写样式。

 

   2.内部样式：在html文件的head标签中加入style标签，在style标签中书写样式。

 

   3.外部样式：

 

   stpe1:创建一个css文件,书写样式

 

   stpe2:在html文件的head标签中用link标签关联样式文件

 

   思考：

 

   选择器：

 

   1.标签选择

 

   2.类选选择

 

   3.id选择

 

    -->

 

    

 

   <h1 style="color:red; font size; 38px;">古诗中文网</h1><!-- px表示像素 -->

 

   

 

   <h3 class="bigFont">首页</h3>

 

   <h3 id="col">蒹葭</h3><!-- id="名字具有唯一性" -->

 

   <p>蒹葭苍苍，白露为霜</p>

 

   <p>所谓伊人，在水一方</p>

 

  

 

  

 

 </body>

 

</html>

kkisnow
关注
在HTML页面中调用外部样式的方法
CyberXZ的博客
09-29 494
幸运的是，HTML提供了一种方式，可以将样式规则放在外部文件中，并通过引用来调用这些样式文件。在这个示例中，我们在部分中添加了一个元素。通过将样式规则放在外部样式文件中，并使用元素在HTML页面中引用它，我们可以轻松地调用外部样式。通过将样式规则放在外部文件中，我们可以轻松地在多个页面之间共享样式，并提供一种集中管理样式的方式。在这个示例中，我们定义了body元素的背景颜色和字体，以及h1元素的颜色和文本对齐方式。在我们的示例中，页面的背景颜色将变为浅灰色，标题的颜色将变为深灰色，并且居中对齐。
怎么玩转CSS内部样式表与外部样式表？
孙叫兽的博客
07-17 1487
CSS 创建 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。 如何插入样式表 插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) 外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部： <head&.
在html中引入外部样式表
04-06
在html5中使用link元素引入外部样式表，及其案例
html写了外部样式表,外部样式表怎么写
weixin_36121354的博客
06-03 6194
1.css内部样式表怎么写1、创建使用css样式表有三种，分别是外部样式表，内部样式表和内联样式。下面通过一个小demo演示它们的用法。首先新建一个html文件，放入3个button按钮，给前两个按钮分百别设置class属性为btn1和btn2，如下图。2.然后准备一个名为demo的CSS文件。在css文件中写入buttonA的样式，并保存css文件：3,HTML文件，使用链接在你的样式标签标签的...
html内部样式和外部样式_HTML样式
cumt30111的博客
08-03 2601
html样式 HTML样式属性 (HTML style Attribute) The HTML style attribute is used to add some style or add some changes to the text in HTML. Style is adding some additional settings to make it look different fr...
学习周记3
qq_48999927的博客
03-21 279
外部样式表 每个页面使用 标签链接到样式表。 标签在（文档的）头部。 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。 外部样式表可以在任何文本编辑器中进行编辑。 文件不能包含任何的 html 标签。 样式表应该以 .css 扩展名进行保存。 .html文件中： <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text
CSS 三种样式
天空之外
08-21 3060
本节我们要学习一下 CSS 样式的几种形式，在实际应用中向 HTML 中引入 CSS 样式的方法有三种，分别是行内样式、内部样式、外部样式。我们会依次学习这三种方式的优缺点以及应用场景，本节我们先来讲一下行内样式。 什么是行内样式 行内样式，其实从它的名字就可以看出来它的特点，就是直接在 HTML 标签中使用 style 属性设置 CSS 样式。例如像下面这样的： <p style="font-size: 18px;">行内样式</p> HTML 中的 style 属性提供了一种改
CSS的外部样式
FairyKunKun的博客
03-31 2388
样式从书写的范围看，分为： （1）内联样式 利用每个标签都有一个style属性 基本不用，标签就是为了承载某个内容 CSS样式就是决定外在的显示 两者高度耦合在一起，维护不方便。 （2）内部样式 进步：css和html的标签相分离，分离的不彻底 如果a页面中存在某类的样式 和b页面中存在某类的样式一样，造成了样式的重复，不如提取到外部，可以共享。 使用场景：1.测试 2.本页面特有的修饰 （3）外部样式 统一存储到外部css文件中 ...
CSS-行内-内部-外部样式表
03-20
本篇文章将详细探讨CSS中的三种样式表：行内样式、内部样式和外部样式。 ### 1. 行内样式（Inline Styles） 行内样式是通过在HTML元素的`style`属性中直接定义CSS样式。这种样式具有最高的优先级，因为它直接应用...
CSS学习1（内联样式，内部样式，外部样式,选择器）
a1436237789的博客
08-09 1197
CSS学习1（内联样式，内部样式，外部样式,选择器）
vue.js引入外部CSS样式和外部JS文件的方法
10-17
在使用Vue.js框架开发项目时，常常需要将外部的CSS样式和JavaScript文件引入到项目中。这篇文章详细介绍了如何在Vue.js项目中引入外部CSS和JS文件的方法。 首先，让我们了解如何引入外部CSS样式文件。在Vue项目中，...
React中使用外部样式的3种方式(小结)
12-02
在React开发中，为了保持代码的模块化和可维护性，使用外部样式是常见的做法。本文将总结在React中使用外部样式的三种主要方法，特别是着重介绍css-in-js的代表库styled-components。 **一、css-in-js的认识** css...
引用外部样式
weixin_34235457的博客
12-27 289
2019独角兽企业重金招聘Python工程师标准>>> ...
外部样式表
qq_51942661的博客
06-02 172
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>外部样式表</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>给老子认真学！</p> <p>给.
html中的内部样式怎么写,css样式应该怎么写？
weixin_33331639的博客
06-04 856
安利一下我场的NEC, 如果项目比较大，可以考虑使用CSS ModulesCSS文件的分类和引用顺序通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。我们按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”，并以此顺序引用(按需求决定是否添加版本号)。公共型样式：包括了以下几个部分：“标签的重置和设置默认值”、“统一调用背景图和...
HTML——内部CSS样式表
Sweet_LH的博客
01-06 386
WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制。英文全名: cascading style sheets(百度百科)===4)当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。5)在书写样式过程中，空格、换行等操作不影响属性显示。用来表现XHTML或者XML等样式文件的计算机语言。1998年5月21日由w3C正式推出的css2.0。目前推荐遵循的是W3C发布的CSS3.0。1)每个CSS样式由两部分组成，即。声明又分为属性和属性值。
5.2、外部样式
m0_49128301的博客
10-03 160
5.2.1、<link/>标签方式 <link/>又称为链入式，是将所有的样本放在一个或者多个以.css为扩展名的外部样式表文件中，通过<link/>标签将样式链接到HTML文案当中。 格式： <link/> rel="stylesheet",固定值，表示样式表 type=“text/css”,固定值，表示css类型 href，表示css文件位置 <!DOCTYPE html> <html> <h...
CSS外部样式示例
ztt0918的博客
04-14 3112
html> html lang="en"> head> meta charset="UTF-8"> link rel="stylesheet" href="../css/01.css"/> title>title> head> body> ：外部样式 推荐写法 样式可以复用，做到了样式和文件分离-->：01.css--> p> 电脑span id="price"
禁止 Kindeditor富文本粘贴图片和html格式
最新发布
jugt的博客
11-14 394
/ 改变站内本地URL，可设置”“、”relative”、”absolute”、”domain”。Kindeditor 文本编辑器是可以通过ctrl+v粘贴图片的，粘贴完的图片会转成base54格式，发送到后端需要后端将base64图片转成图片存到服务器上，在将图片路径回填回去，比较费事，可以将 Kindeditor的 pasteType参数设置成1，这样，就禁止粘贴html格式内容了，也就粘贴不了图片了。// 配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。
html的外部样式和内部样式
02-08
当我们使用HTML来构建网页时，可以通过内部样式和外部样式来定义和应用样式。 1. 内部样式（Internal Style）： 内部样式是直接写在HTML文档的`<style>`标签中的样式规则。它适用于当前HTML文档中的所有元素。可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值