一个案例带你打开CSS的大门

最新推荐文章于 2024-09-28 19:02:23 发布

Jacob权力以赴

最新推荐文章于 2024-09-28 19:02:23 发布

阅读量835

点赞数 19

分类专栏：前端web 文章标签： css 前端 html 经验分享 html5

本文链接：https://blog.csdn.net/m0_57465286/article/details/135577723

版权

前端web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基础知识，包括其含义、使用方式（内部、外部、行内），以及各种选择器（标签、类、ID和通配符）的用法。还讨论了字体控制属性、文本对齐、颜色和调试工具。对于Web开发者来说，了解CSS是构建美观、标准化网页的关键。

摘要由CSDN通过智能技术生成

一.CSS

1.含义

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。【属性名和属性值成对出现 → 键值对】

<title>CSS 初体验</title>
 <style>
 /* 选择器 { } */
 p {
 /* CSS 属性 */
 color: red;
 }
 </style>
 <p>体验 CSS</p>

2.引入方式

内部样式表：学习使用 CSS

代码写在 style 标签里面

外部样式表：开发使用 CSS

代码写在单独的 CSS 文件中（.css）

在 HTML 使用 link 标签引入

<link rel="stylesheet" href="./my.css">

行内样式：配合 JavaScript 使用

CSS 写在标签的 style 属性值里

<div style="color: red; font-size:20px;">这是 div 标签</div>

二.选择器

作用：查找标签，设置样式。

01-标签选择器

标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。

例如：p, h1, div, a, img......

 <style>
 p {
 color: red;
 }
 </style>

注意：标签选择器无法差异化同名标签的显示效果。

02-类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：

定义类选择器 → .类名

使用类选择器 → 标签添加 class="类名"

 <style>
 /* 定义类选择器 */
 .red {
 color: red;
 }
 </style>
 <!-- 使用类选择器 -->
 <div class="red">这是 div 标签</div>
 <div class="red size">div 标签</div>

注意： 类名自定义，不要用纯数字或中文，尽量用英文命名一个类选择器可以供多个标签使用一个标签可以使用多个类名，类名之间用空格隔开

开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd。

03-id选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：

定义 id 选择器 → #id名

使用 id 选择器 → 标签添加 id= "id名"

<style>
 /* 定义 id 选择器 */
 #red {
 color: red;
 }
 </style>
 <!-- 使用 id 选择器 -->
 <div id="red">这是 div 标签</div>

规则：同一个 id 选择器在一个页面只能使用一次。

04-通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

* {
 color: red;
 }

通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。

盒子尺寸和背景色

05-文字控制属性

字体样式（是否倾斜）

作用：清除文字默认的倾斜效果

属性名：font-style

属性值正常（不倾斜）：normal 倾斜：italic

行高

作用：设置多行文本的间距

属性名：line-height

属性值数字 + px 数字（当前标签font-size属性值的倍数）

line-height: 30px;
 /* 当前标签字体大小为16px */
 line-height: 2;

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

单行文字垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

注意：该技巧适用于单行文字垂直居中效果

div {
 height: 100px;
 background-color: skyblue;
 /* 注意：只能是单行文字垂直居中 */
 line-height: 100px;
 }

字体族

属性名：font-family

属性值：字体名 font-family: 楷体;

font复合属性

使用场景：设置网页文字公共样式，字号和字体值必须书写，否则 font 属性不生效。

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font: 是否倾斜是否加粗字号/行高字体（必须按顺序书写）

div {
 font: italic 700 30px/2 楷体;
 }

文本缩进

属性名：text-indent

属性值：数字 + px 数字 + em（推荐：1em = 当前标签的字号大小）

文本对齐方式

作用：控制内容水平对齐方式

属性名：text-align

text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

文本修饰线

属性名： text-decoration

color 文字颜色

只要属性值为颜色，都可以使用下述四种颜色表示方式，例如：背景色。

06-调试工具

按F12

三.案例

1.CSS简介

参考标准

结果及源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 简介</title>
  <style>
    h1 {
      color: #333;
    }

    p {
      text-indent: 2em;
      font-size: 14px;
      color: #444;
      line-height: 30px;
    }

    a {
      color: #0069c2;
    }

    li {
      font-size: 14px;
      color: #444;
      line-height: 30px;
    }
  </style>
</head>
<body>
  <h1>CSS（层叠样式表）</h1>
  <p>层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 <a href="#">样式表</a> 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</p>
  <p><strong>CSS 是开放网络的核心语言之一</strong>，由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。</p>
  <ul>
    <li>CSS 介绍 如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。</li>
    <li>CSS 教程 我们的 CSS 学习区 包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。</li>
    <li>CSS 参考 针对资深 Web 开发者的 <a href="#">详细参考手册</a> ，描述了 CSS 的各个属性与概念。</li>
  </ul>
</body>
</html>

HTML标签

<h1>CSS（层叠样式表）</h1>
 <p>层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 <a href="#">样式表</a> 语言，用来描述 HTML 或 
XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体
上的元素应该如何被渲染的问题。</p>
 <p><strong>CSS 是开放网络的核心语言之一</strong>，由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 
样式可以通过定义保存在外部.css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻
烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。</p>
 <ul>
  <li>CSS 介绍 如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。</li>
  <li>CSS 教程 我们的 CSS 学习区 包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃
有余。</li>
  <li>CSS 参考 针对资深 Web 开发者的 <a href="#">详细参考手册</a> ，描述了 CSS 的各个属性与概念。</li>
 </ul>

CSS样式

<style>
  h1 {
    color: #333;
  }
 
  p {
    text-indent: 2em;
    font-size: 14px;
    color: #444;
    line-height: 30px;
  }
 
  a {
    color: #0069c2;
  }
 
  li {
    font-size: 14px;
    color: #444;
    line-height: 30px;
  }
 </style>