配置：

编辑器：VSCode

扩展：Live Server

HTML中应用CSS的不同方法及其优缺点：

1.内联/行内式：

1
<p style="font-size:20pt; font-weight: bold; color:blue;">行内式</p>

  • 优点：灵活

  • 缺点：样式不能复用，不易于维护

2.内部/内嵌式：

1
2
3
4
5
6
7
8
9
10
11
<head>
...
<style type="text/css">
        p{
            color:red;
            font-size: 20pt;
            font-weight: normal;
        }
</style>
...
</head>
  • 优点：直接定义整个页面的样式
  • 缺点：变得臃肿；不易于多个页面的维护

3.外部式：

1
2
3
4
5
<head>
...
<link href="style.css" rel="stylesheet" type="text/css" />
...
</head>
  • 优点：样式可以复用在多个页面，易于维护和更新，页面加载速度更快，因为样式表只需要下载一次。
  • 缺点：需要额外的文件，如果CSS文件未正确链接，整个页面的样式可能会丢失。

4.导入式：

1
2
3
4
5
6
7
8
<head>
...
<style>
	@import url("1.css")
	@import url("2.css")
</style>
...
</head>
  • 优点：可以在一个CSS文件中组织和合并多个CSS文件。
  • 缺点：@import规则会增加额外的HTTP请求，可能会减慢页面加载速度，且@import规则必须放在CSS文件的顶部。

伪类、伪元素

first-child：第一个元素

first-letter：文本的第一个字符

“#” id选择器

“*” 通用选择器

“.“ 类选择器

div 元素选择器

交集选择器；并集选择器；后代选择器；子元素选择器；相邻兄弟选择器

ID式>class式|伪类式>元素式|伪元素式>通配符式|子元素式|相邻兄弟式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<head>
<article>
<nav> 导航条
<embed src=" "></embed>
<video src=" "></video>


<hr> 水平分割线
<div> align 居中显示
<sup> 上标



<p>段落
<br>换行
<strong>加粗
<em>倾斜
<span>装饰性标签
&nbsp; 强制空格

<header>头部
<h1>
<nav>导航栏
<article>独立的文档块
<section>对页面内容进行分块
<aside>侧边栏
<footer>脚注
<img src="" title="" alt="">插入图片 + 图片描述信息 + 图片替换信息
<a href=""></a>超链接

<object></object>嵌入Flash动画
<embed></embed>嵌入多媒体内容
<video></video>嵌入音频、视频
<audio>嵌入音频
<li>列表项
<oi>有序列表

<ul>无序列表
<dl>+<dt>定义列表
<div></div>构建区块 -- 最常用的块级容器
<hr>水平分割线
<sup>小数字上标
block -- 块级元素 div p h1~h6 ul ol dt dd section header footer nav
inline -- 行内元素 span a em strong
inline-block -- 行内块级元素：img input

文本颜色：RGB；16进制；英文单词

text align: 文本水平对齐方式：左、右、中

text decoration: 上/下划线、删除线

列表CSS

CSS盒子模型

CSS box-model

盒子模型是一个概念，指所有的HTML元素都可以看做盒子。

在CSS中，”box model”(盒子模型)这一术语是用来设计和布局时使用。

CSS盒子模型本质上看上去像一个盒子，封装周围的HTML元素，它包括：边框(border)、边距(margin/padding)、填充，和实际内容(content)

解除网页禁止复制、禁止粘贴

F12 / SHIFT + CTRL + I，打开”开发者工具”，选择控制台，输入代码并回车。

1
2
3
4
5
6
// 开启文字选择
document.onselectstart = function(){ return true; };
// 开启复制
document.oncopy = function(){ return true; };
// 开启粘贴
document.onpaste = function(){ return true; };