HTML之CSS——初识CSS

更多关于CSS的相关知识可以访问如下网站：
https://www.w3school.com.cn/css/css_syntax.asp
https://www.runoob.com/css/css-intro.html

一.CSS简介

CSS:层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
(百度百科)

• 使用CSS的意义：
  CSS让网页变得更漂亮。

• CSS的优势：
  1.内容与表现分离
  2.网页的表现统一，容易修改
  3.减少网页的代码量，增加网页的浏览速度，节省网络带宽

• CSS的三种引用方式：
  1.行内样式
  2.内部样式
  3.外部样式

二.CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

构成

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

结构

代码

这个代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

• 如果值为若干单词，则要给值加引号：
  p {font-family: "sans serif";}

• CSS声明总是以分号(;)结束，声明总以大括号({})括起来:
  p {color:red;text-align:center;}

• 注释：
  注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
  CSS注释以 "/" 开始, 以 "/" 结束, 实例如下:
  

  注释

• 设置字体颜色和字体大小的方式：

  
  
  第一种方式：行样式
  
  
  第二种方式：选择器
  
  
  结果

• css层叠样式表：
  作用：用来美化渲染页面的

三.CSS选择器：

• style标签
  ps:选择器必须写在style标签中，style标签写在head标签中

• CSS中选择器分类：

  
  
  示例1

1.元素（标签）选择器
HTML标签作为标签选择器的名称
eg:<h1>…<h6>、<p>、<img/>
格式：
选择器{
属性名：属性值；
。。。
}

示例1.1

2.ID选择器
格式：
& #id选择器{
属性名：属性值；
。。。
}

示例

可以通过样式来改变标签属性值：

示例2

示例2.1

示例2.2

示例2.3

3.类选择器
.类选择器{
属性名：属性值；
。。。
}

示例1

示例2

结果1

将超链接置于中间

结果