CSS的三大样式

2023-08-28 07:36:43

CSS样式

行内式

  • 又叫：内联样式、行内样式、嵌入式样式

<div style="font-size: 40px; color: #FF0000;">我是divdiv>
<div style="font-size: 40px; color: blue;">我是div2号div>
<p style="font-size: 40px; color: orange;">我是段落p>
  • 当样式仅需要在一个元素上应用一次时，要使用内联样式
  • 缺点
    • 将表现和内容混杂在一起，结构样式没有分离，不利于后期维护
    • 样式不能重复使用 ( 推荐不使用 )

内部式

DOCTYPE html>
<html><head><meta charset="utf-8"><title>内部样式表title><style type="text/css">/* 3、在style标签中，就可以直接书写css代码，进行修饰 */p {color: red;font-size: 30px;/* 在书写css的时候，如果没有特殊规定，数值必须带单位(html不必)，px:像素 */}div{color: blue;font-size: 80px;}style>head><body><div>CSS基础学习div><p>我是段落p>body>
html>
  • 当单个文档需要特殊的样式时，使用内部样式表
    • 适合案例、短小的页面开发
  • 使用