登录后台

页面导航

本文编写于 257 天前,最后修改于 257 天前,其中某些信息可能已经过时。

11.28-12.5周期.md

注:笔记在本地写好后会上传个人博客中,在周期内会随时更新新记录的笔记。

本周观看:p60-p70+p83-p86视频,点击获取网址

笔记标准化模板:微服务简明教程:点击获取网址

Part.1 P60-70(MarkDown页内跳转暂时不可用)

Part.2 P83-86(MarkDown页内跳转暂时不可用)


Part1 P60-70

CSS层叠样式表导读

目标

  • 什么是CSS
  • 能够使用CSS基础选择器
  • 能够设置字体样式
  • 能够设置文本样式

学习路径(目录)

  1. CSS简介
  2. CSS基础选择器

CSS简介

CSS的由来:

HTML只关注内容的语义,而忽略了美观。CSS作为HTML样式的补充。

CSS也称层叠样式表、CSS样式表、级联样式表。CSS也是一种标记语言。

CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面布局和外观显示样式。

CSS让我们的网页更加丰富多彩,布局灵活自如。

总结:

  1. HTML主要做结构,显示元素内容
  2. CSS美化HTML,布局网页
  3. CSS最大价值:由HTML专注做结构,样式交给CSS,即结构(HTML)与样式(CSS)分离。

CSS语法规范

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。

多条 CSS 声明用分号分隔,声明块用花括号括起来。

可以用紧凑写法和展开格式,其本质没有区别。

强烈推荐样式选择器、属性名、属性关键字全部用小写字母,特出情况除外!

例如:

    紧凑写法
h3{ color:red }
    展开格式
h3 {
    color:red
}

一个普通的css结构如下:

例如:

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

例子解释

  • p 是 CSS 中的_选择器_(它指向要设置样式的 HTML 元素:)。
  • color 是属性,red 是属性值
  • text-align 是属性,center 是属性值

CSS选择器的作用

 CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。

我们可以将 CSS 选择器分为五类:

  • 简单选择器(根据名称、id、类来选取元素)
  • 组合器选择器(根据它们之间的特定关系来选取元素)
  • 伪类选择器(根据特定状态选取元素)
  • 伪元素选择器(选取元素的一部分并设置其样式)
  • 属性选择器(根据属性或属性值来选取元素)

CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!

要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。

实例

#para1 {
  text-align: center;
  color: red;
}

CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。

实例

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

CSS 通用选择器

通用选择器(*)选择页面上的所有的 HTML 元素。

实例

* {
  text-align: center;
  color: blue;
}

所有简单的 CSS 选择器

选择器例子例子描述
.class.intro选取所有 class="intro" 的元素。
#id#firstname选取 id="firstname" 的那个元素。
**选取所有元素。
elementp选取所有 元素。
element,element,..div, p选取所有 元素和所有 元素。

Part.2 P83-86

  • 行内样式表(行内式)
  • 内部样式表(嵌入式)
  • 外部样式表(链接式)
  • CSS引入方式总结

行内式

当特殊的样式需要应用到个别元素时,就可以使用行内样式表。 使用行内样式表的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

例如:

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 部分通过 标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 样式标签

标签描述
<style>定义文本样式
<link>定义资源引用地址

<style>标签:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
 
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
 
</html>

<link>标签

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>