CSS 入门

基本语法

格式

CSS = 选择器 + 声明块

例：

1
2
3
4
p {
  color: red;
	text-align: center;
}

p 为选择器，指向<p>标签。
属性 - 冒号 - 属性值 - 分号。

注释

同 C ，/*注释*/。

CSS的使用

  • 外部CSS

例如，html内的一句<link rel="stylesheet" type="text/css" href="mystyle.css">，指向mystyle.css：

1
2
3
4
5
6
7
8
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

  • 内部css

html文件中，head部分的<style>元素中进行定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

  • 行内css（内联样式）

将style属性赋予某个元素。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

层叠顺序

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

1.行内样式（在 HTML 元素中）  
2.外部和内部样式表（在 head 部分）  
3.浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

css内容

颜色

  • 颜色名

赋颜色的一种方式

  • 背景色
1
2
<h1 style="background-color:DodgerBlue;">China</h1>
<p style="background-color:Tomato;">China is a great country!</p>
  • 文本颜色
1
2
3
<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is a great country!</p>
<p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>
  • 边框颜色
1
2
3
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
  • 颜色值

使用RGB值、HEX值、HSL值、RGBA值或者HSLA值来指定颜色。

1
2
3
4
5
6
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

直接使用RGB：rgb(red, green, blue)

使用RGBA：有不透明度的RGB

背景

1
2
3
4
5
6
7
8
9
10
11
12
13
body {
  background-color: lightblue;/* 背景色 */
  opacity: 0.3;/* 不透明度 */
  background-image: url("paper.gif");/* 背景图像 */

}
/* 以及 */
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

简写：

1
2
3
body {
  background: #ffffff url("tree.png") no-repeat right top;
}

在使用简写属性时，属性值的顺序为：

background-color  
background-image  
background-repeat  
background-attachment  
background-position

轮廓（不同于边框）

CSS 拥有如下轮廓属性：

outline-style  
outline-color  
outline-width  
outline-offset  
outline

文本

  • 文本对齐
  • 文本方向
  • 垂直对齐
  • 文字装饰
  • 大小写自动转换
  • 缩进
  • 字符间距
  • 行高
  • 字间距
  • 文字阴影
  • 斜体
  • 粗细
  • 大小

CSS 盒子模型

CSS 选择器

布局方式

CSS3

#笔记 #未完待续
CSS 入门
http://petertan303.github.io/2023/01/20/试图学习CSS/
作者
peter？
发布于
2023年1月20日
许可协议