网页简历制作 03 CSS基础

武昌鱼
网站建设
2024-02-22
275热度
0评论

CSS（Cascading Style Sheets，层叠样式表）是为 web 内容添加样式的代码

CSS 是一门样式表语言，人们可以用它来选择性地为 HTML 元素添加样式。在CSS文件中写入

p {
  color: red;
}

在index.html的head中加入

<link href="styles/style.css" rel="stylesheet" />

将段落文字标红

01 CSS 规则集合

整个结构称为规则集（规则集通常简称规则），注意各个部分的名称：

选择器（Selector）选择需要添加样式的元素，案例中为p元素
声明（Declaration）如 color: red; 用来指定添加样式元素的属性
属性（Properties）改变 HTML 元素样式的途径（本例中 color 就是p元素的属性）
属性的值（Property value）冒号后面即属性的值

注意其他重要的语法：

除了选择器部分，每个规则集都应该包含在成对的大括号里（{}）。
在每个声明里要用冒号（:）将属性与属性值分隔开。
在每个规则集里要用分号（;）将各个声明分隔开。

声明多个属性：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

02 选择多个元素

使用逗号将需要选择的元素分开

p,
li,
h1 {
  color: red;
}

03 不同类型的选择器

选择器名称	选择的内容	示例
元素选择器（也称作标签或类型选择器）	所有指定类型的 HTML 元素	`p` 选择 `<p>`
ID 选择器	具有特定 ID 的元素。单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID	`#my-id` 选择 `<p id="my-id">` 或 `<a id="my-id">`
类选择器	具有特定类的元素。单一页面中，一个类可以有多个实例	`.my-class` 选择 `<p class="my-class">` 和 `<a class="my-class">`
属性选择器	拥有特定属性的元素	`img[src]` 选择 `<img src="myimage.png">` 但不是 `<img>`
伪类选择器	特定状态下的特定元素（比如鼠标指针悬停于链接之上）	`a:hover` 选择仅在鼠标指针悬停在链接上时的 `<a>` 元素

04 字体和文本

添加Google Font到HTML的头文件中去

在CSS文件中添加

html {
  font-size: 10px; /* px 表示“像素（pixel）”: 基础字号为 10 像素 */
  font-family: "times new roman", "Open Sans", sans-serif; /* 这应该是你从 Google Fonts 得到的其余输出。应该是按照顺序进行选择，我这里直接使用新罗马字体进行部署 */
}

h1 {
  font-size: 60px;
  text-align: center;
}

p,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;/* 这个意思是字母之间的间隔有多大*/
}

CSS：一切皆盒子

padding（内边距）：是指内容周围的空间。
border（边框）：是紧接着内边距的线。
margin（外边距）：是围绕元素边界外侧的空间。
width：元素的宽度
background-color：元素内容和内边距底下的颜色
color：元素内容（通常是文本）的颜色
text-shadow：为元素内的文本设置阴影
display：设置元素的显示模式（继续阅读文章以了解更多细节）

05 更改页面颜色

html {
  background-color: #00539f;
}

修改整个页面的背景颜色

06 文档样式

body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

width: 600px; 强制页面永远保持 600 像素宽。
margin: 0 auto; 当你在 margin 或 padding 这样的属性上设置两个值时，

第一个值影响元素的上下方向（在这个例子中设置为 0）；

第二个值影响左右方向。(auto` 将可用的水平空间平均分配给左和右）
background-color: #FF9500; 指定body元素的背景颜色。
padding: 0 20px 20px 20px; 上、右、下、左四周产生一点空间
border: 5px solid black; 这是为边框的宽度、样式和颜色设置的值。

07 页面主标题及样式

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black; /*主标题的阴影*/
}

08 图像居中

img {
  display: block;
  margin: 0 auto;
}

body元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是行级元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为