CSS概述 I 青训营笔记

ddlinux
77 阅读2分钟

这是我参与[第四届青训营]笔记创作活动的第二天。

一.引用CSS

1.1使用外部样式表。

CSS代码在一个独立的文件中，HTML通过link元素引入到页面。

1.1.1 main.css 该文件中书写CSS代码，文件后缀为css

h1{color:red;text-align:center;}

p{text-indent:2em;color:chocolate;font-size:18px;}

1.1.2 index.html 该文件中书写html代码，文件后缀为html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个页面</title>
    <!在该位置引用外部样式表>
</head>
<body>
<h1>Lorem</h1>
<p>
    Lorem ipsum dolor sit amet,
    .....
</p> 
</body>
</html>

1.1.3 代码解析

<link rel="stylesheet" href="main.css">
  • link: 空元素，表示引用外部资源。
  • rel="stylesheet" : 资源的类型是样式表。
  • main.css : 资源的位置是当前目录下的main.css文件。
  • css/main.css : 资源的位置是当前目录下的css文件夹中的main.css文件。

image.png

1.1.4 使用外部样式表总结。

css代码在一个独立的文件中，HTML通过link元素引入到页面。

  • 实现了内容结构和表现形式代码分离，方便复用和维护。
  • 使HTML代码更加纯净，有利于程序员和搜索引擎的阅读。
  • 是开发页面的常见做法。

2.1 使用内部样式表

定义：将CSS代码写到HTML文档的style元素内容中。

<style type="text/css">
    h1{color:red;text-align;center;}
    p{text-indent:2em;color:chocolate;font-size:18px;}

  •  没有了样式表文件，在某些适合可以提高效率。

  •  多个页面难以共享样式，不利于代码复用。

  •  HTML和CSS代码混杂，不利于程序员和搜索引擎阅读。

  •  在某些对效率要求苛刻或测试的场景下使用。

3.1 使用行内样式表

定义：CSS代码写在某个元素开始标记的style属性中，行内样式表不写选择器。

<h1 style="color:red;tex-align:center;">Lorem</h1>
<pstyle="text-indent: 2em;color:chocolate;font-size:18px">
        Lorm ipsum dolor sit amet
        .....
        </p>

  • 没有了样式表文件，在某些时候可以提升效率

  • 多个元素难以共享样式，不利于代码复用

  • HTML和CSS代码混杂，不利于程序员和搜索引擎阅读

  • javascipt操作的是行内样式

  • 在测试的场景下使用
avatar
文章
阅读
粉丝