前端样式：外部样式、内部样式与行内样式的介绍

需积分: 0 22 浏览量更新于2024-06-30 收藏 677KB DOCX 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"12-01课堂笔记1——关于CSS样式的三种应用方式" 这篇笔记主要介绍了CSS（层叠样式表）在前端Web开发中的应用，以及如何通过三种不同的方式来给网页元素添加样式：外部样式、内部样式和行内样式。 1. 外部样式外部样式是指将CSS代码存储在单独的.css文件中，然后通过HTML文档的`<link>`标签将其引入。这种方式的优点是便于管理和重用样式，使代码结构更清晰。例如，在一个名为`default.css`的CSS文件中定义了`.box`和`#cur`的选择器样式，然后在HTML文档中通过以下方式引入： ```html <link rel="stylesheet" type="text/css" href="css/default.css"> ``` 这使得HTML文档中的`.box`类的div元素和ID为`cur`的p元素按照定义的样式显示。 2. 内部样式内部样式通常放在HTML文档的`<head>`部分的`<style>`标签内。这种方式适用于整个页面需要统一风格的情况，样式只对当前页面生效。不过，相比于外部样式，它增加了HTML文档的体积，不利于维护。例如： ```html <style> .box { width: 280px; height: 280px; background: red; } #cur { font-size: 20px; color: green; text-align: center; } </style> ``` 3. 行内样式行内样式是直接在HTML标签的`style`属性中定义样式，这种方式最直接但最不推荐，因为它降低了代码的可读性和可维护性。如： ```html <p style="width: 600px; height: 300px; font-size: 30px; color: red;">最近比较热门话题是xx公司暴力裁员</p> ``` 行内样式具有最高的优先级，意味着它会覆盖同一元素的其他任何样式定义。总结，前端Web开发中的样式主要有这三种形式，外部样式提供了最佳的代码组织和重用性，内部样式适用于页面特定的样式需求，而行内样式虽然方便但应尽量避免使用，除非在必须的情况下。正确地使用这三种样式方式，可以有效地控制和美化网页的外观。

资源推荐

湯姆漢克

粉丝: 28
资源: 303

前端样式：外部样式、内部样式与行内样式的介绍

课堂笔记1

嵩天python课堂笔记

狂神mybatis课堂笔记

动力节点杜老师aja课堂笔记

软件测试自动化课堂笔记

rancher小滴课堂笔记

【狂神课堂代码】spring课堂笔记

高淇python400集课堂笔记pdf

oracle 19c ocp全程课堂笔记

adb: error: failed to copy 'E:\PR\UIAUTO\Day06\02_课堂笔记\01.txt' to '/sdcard/': remote couldn't create file: Is a directory E:\PR\UIAUTO\Day06\02_è¯¾å ç¬è®°\01.txt: 0 files pushed. 0.0 MB/s (16 bytes in 0.001s)

javaee企业级应用开发教程第二版课堂笔记

oracle第八章集合运算课堂笔记和练习

os实验2-3 课堂练习2.2 中断/异常的处理过程实验答案

写一篇语文考研组备课笔记检查小结

图灵课堂诸葛老师redis实战笔记

请帮我制作一张明日学习计划的表格

康奈尔笔记模版

Faster R-CNN 学生课堂

小滴课堂 kafka

408数据结构笔记pdf整理

最新资源

adb: error: failed to copy 'E:\PR\UIAUTO\Day06\02_课堂笔记\01.txt' to '/sdcard/': remote couldn't create file: Is a directory E:\PR\UIAUTO\Day06\02_è¯¾å ç¬è®°\01.txt: 0 files pushed. 0.0 MB/s (16 bytes in 0.001s)