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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| <!DOCTYPE html>
<html>
<head>
<title>网站标题</title>
<base>
<link rel="stylesheet" type="text/css" href="mystyle.css"><!--外部样式-->
<link rel="shortcut icon" href="页面ico图标文件路径">
<meta charset="utf-8">
<script></script>
<style type="text/css"> h1 {background-color:yellow;} p1 {color:blue;}</style><!--内部样式-->
</head>
<body>
<!--元素样式
定义字体类型：font-family: sans-serif;
定义字体大小：font-size: 30px;
定义字体颜色：color: red;（或#000000，或rgb(0, 0, 0)或hsl(180, 100%, 100%)）
定义段落行高：line-height
定义元素居中：margin: auto;
定义背景颜色：background-color: green;
定义颜色渐变：background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
定义图片大小：width: 500px;height: 20px;
定义内宽：padding: 20px; padding-top（right,bottom,left）; 顺时针上右下左填充padding: 10px 20px 10px 20px;
定义边距：margin: 20px; 同理padding
-->
<!--方法1：定义在h2元素内的样式-->
<h2 style="color: red;">CatPhotoApp</h2>
<!--方法2：定义全部h3元素的样式-->
<style>h3{font-size: 30px;color: red;}</style>
<h3>CatPhotoApp</h3>
<!--方法3：定义样式类,class接收-->
<style>.imagestyle{width: 500px;}</style>
<img class="imagestyle" src="截图/css 使用媒体查询改变变量.png" alt="无法加载">
<!--方法4：定义一个id(唯一性)。来设置单个元素的样式，JavaScript修改特定元素-->
<style>#cat-photo-app {background-color: green;}</style>
<h2 id="cat-photo-app">cat-photo-app<h2>
<!--方法5：定义一个tyle属性选择器，对特定属性值的元素设置样式-->
<style>[type='checkbox'] {margin: 20px 0px 20px 0px;}</style>
<label><input type="checkbox" name="personality" checked> Loving</label>
<!--定义多样式时，用空格分开class-->
<h2 class="class1 class2">
<!--元素周围添加边框，边框颜色，宽度，类型，圆角（可以是像素值，也可以是百分比）-->
<style>.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
border-radius:10px;
border-radius:50%;
}
</style>
<!--除了px，还有绝对长度in，mm； 相对em，rem-->
<!--同类型冲突样式，!important;会优于内联会优于id会优先于class，同类型会以最后一个为准-->
<!--创建自定义 CSS 变量,需为其命名，两个连字符+一个值-->
<style>.penguin {--penguin-skin:gray;}</style>
<!--使用自定义 CSS 变量，当浏览器无法显示时，使用备用值内容显示-->
<style>属性名： var(--penguin-skin,备用值);</style>
<!--继承 CSS 变量-->
<style>:root {--penguin-belly: pink;}</style>
</body>
</html>
<!--样式选择器（可多个），p是指定元素的样式-->
<style>.red-text {color: red;p {font-size: 16px;}}</style>
<!--当一种字体不可用时，您可以告诉浏览器“降级”为另一种字体。-->
<style>h2{font-family: Helvetica, sans-serif;}</style>
|
