1.2 CSS 基础

最新推荐文章于 2024-05-01 12:01:29 发布
VIP文章 最新推荐文章于 2024-05-01 12:01:29 发布
阅读量445 收藏 4
点赞数 2
分类专栏： 前端知识整理 文章标签： css html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cool2050/article/details/109029812
版权

CSS 基础介绍
Introduction to Basic CSS
CSS 的全称是 Cascading Style Sheet（层叠样式表），它主要用来控制网页的样式。

注意，CSS 的选择器区分大小写，因此要谨慎使用大写。

CSS 早已被所有主流浏览器采用，它允许你轻松控制以下样式：

颜色 color
背景 background
字体 font
位置 position
显示 display
边框 border
内边距 padding
外边距 margin
行高 line-height
装饰 text-decoration
过渡 transtion
变化 transform
动画 animation
使用 CSS 样式主要有三种方式：

  • 内联样式–你可以直接在 HTML 元素里使用style属性。
  • 内部样式–你可以在style标签里面声明样式规则。
  • 外部样式–你可以创建一个.css文件，然后在文件中编写样式规则，最后在文 档中引用该文件。

尽管前两个方式也有人使用，但大部分开发人员更喜欢外部样式表，因为它可以将样式与元素分开，这提高了代码的可读性和重用性。

CSS 背后的思想是，通过选择器来定位 DOM（文档对象模型）的元素，然后将各种样式规则应用在元素上，从而改变元素在页面上的显示方式。

在本章中，你会看到我们是如何一步步将 CSS 样式应用到猫咪相册中，从而让相册变得丰富多彩起来。

1.2 CSS 基础

更改文本的颜色

现在让我们来修改一下文本的颜色。

我们通过修改h2元素的style属性的color值来改变文本颜色。

以下是改变h2元素为蓝色的方法：

<h2 style="color: blue;">CatPhotoApp</h2>

请注意行内style最好以;来结束。

请把h2元素的文本颜色设置为红色。

<h2 style="color:red;">CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor">室内</label>
    <label><input type="radio" name="indoor-outdoor">室外</label><br>
    <label><input type="checkbox" name="personality">忠诚</label>
    <label><input type="checkbox" name="personality">懒惰</label>
    <label><input type="checkbox" name="personality">积极</label><br>
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>
  </form>
</main>

使用元素选择器来设置元素的样式

在 CSS 中，页面样式的属性有几百个，但常用的不过几十个。

通过行内样式<h2 style="color: red;">CatPhotoApp</h2>，就可以修改h2元素的颜色为红色。

当我们只需要改变元素的某个样式时，行内样式最简单直观。当我们需要同时改变元素的很多样式时，层叠样式表往往是一个更好的选择。

在代码的顶部，创建一个style声明区域，如下方所示：

    <style>
    
    </style>

在style样式声明区域内，可以创建一个元素选择器，应用于所有的h2元素。例如，如果你想所有h2元素变成红色，可以添加下方的样式规则：

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

注意，在每个元素的样式声明区域里，左右花括号（{ 和 }）一定要写全。你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。

删除h2元素的行内样式，然后创建style样式声明区域，最后添加 CSS 样式规则使h2元素变为蓝色。

<h2>CatPhotoApp</h2>
<style>
    h2 {
    color: blue;}
</style>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>

  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor">室内</label>
    <label><input type="radio" name="indoor-outdoor">室外</label><br>
    <label><input type="checkbox" name="personality">忠诚</label>
    <label><input type="checkbox" name="personality">懒惰</label>
    <label><input type="checkbox" name="personality">积极</label><br>
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>
  </form>
</main>

使用 class 选择器设置单个元素的样式

CSS 的class具有可重用性，可应用于各种 HTML 元素。

一个 CSSclass声明示例，如下所示：

    <style>
      .blue-text {
    
        color: blue;
      }
    </style>

可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的class选择器。

你可以将 CSSclass选择器应用到一个HTML元素里，如下所示：

<h2 class="blue-text">CatPhotoApp</h2>

注意：在style样式区域声明里，class需以 . 开头。而在 HTML 元素里，class属性的前面不能添加.。

在style样式声明里，把h2元素选择器改为 .red-textclass 选择器，同时将颜色blue变为red。

在h2元素里，添加一个class属性，且值为’red-text’。

<style>
  .red-text {
    
    color: red;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor">室内</label>
    <label><input type="radio" name="indoor-outdoor">室外</label><br>
    <label><input type="checkbox" name="personality">忠诚</label>
    <label><input type="checkbox" name="personality">懒惰</label>
    <label><input type="checkbox" name="personality">积极</label><br>
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>
  </form>
</main>

使用 class 选择器设置多个元素的样式

通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。

你可以将red-textclass 选择器应用在第一个p元素上。

<style>
  .red-text {
    
    color: red;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">点击这里可以获取更多<a href="http://freecatphotoapp.com" target="_blank">猫图</a>。</p>
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor">室内</label>
    <label><input type="radio" name="indoor-outdoor">室外</label><br>
    <label><input type="checkbox" name="personality">忠诚</label>
    <label><input type="checkbox" name="personality">懒惰</label>
    <label><input type="checkbox" name="personality">积极</label><br>
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>
  </form>
</main>

更改元素的字体大小

字体大小由font-size属性控制，如下所示：

    h1 {
      font-size: 30px;
    }


在包含red-textclass 选择器的<style>声明区域的里，
创建一个p元素样式规则，并设置font-size为16px。

<style>
  .red-text {
    
    color: red;
  }
  p {
    
    font-size: 16px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor">室内</label>
    <label><input type="radio" name="indoor-outdoor">室外</label><br>
    <label><input type="checkbox" name="personality">忠诚</label>
    <label><input type="checkbox" name="personality">懒惰</label>
    <label><input type="checkbox" name="personality">积极</label><br>
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>
  </form>
</main>

设置元素的字体家族

通过font-family属性，可以设置元素里面的字体样式。

如果你想设置h2元素的字体为sans-serif，你可以用以下的 CSS 规则：

    h2 {
      font-family: sans-serif;
    }

确保p元素使用monospace字体。

<style>
  .red-text {
    
    color: red;
  }

  p {
    
    font-size: 16px;
  }
  p {
    
    font-family: monospace;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor">室内</label>
    <label><input type="radio" name="indoor-outdoor">室外</label><br>
    <label><input type="checkbox" name="personality">忠诚</label>
    <label><input type="checkbox" name="personality">懒惰</label>
    <label><input type="checkbox" name="personality">积极</label><br>
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>
  </form>
</main>

引入谷歌字体

除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。网络上有各种各样的字体，不过在这个例子中，我们将会尝试使用Google字体库。

Google 字体是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。

因此，下一步，我们将引入和使用Google字体。

引入Google字体，你需要复制Google字体的 URL，并粘贴到你的 HTML 里面。在这个挑战中，我们需要引入Lobster字体。因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到style标签之前。

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

现在你可以设置font-family属性为Lobster，来使用Lobster字体。例子如下：
font-family: FAMILY_NAME, GENERIC_NAME;.

GENERIC_NAME是可选的，其他字体不可用时便作为后备字体，在下一个挑战中可以得到体现。

字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用"Open Sans"字体需要添加引号，而Lobster字体则不需要。

创建一个 CSS 规则，font-family属性里设置为Lobster字体，并把这个字体应用到所有的h2元素。

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    
    color: red;
  }

  p {
    
    font-size: 16px;
    font-family: monospace;
  }
    h2 {
    
    font-family: Lobster;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor">室内</label>
    <label><input type="radio" name="indoor-outdoor">室外</label><br>
    <label><input type="checkbox" name="personality">忠诚</label>
    <label><input type="checkbox" name="personality">懒惰</label>
    <label><input type="checkbox" name="personality">积极</label><br>
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>
  </form>
</main>

字体如何优雅降级

所有浏览器都有几种默认字体。这些通用字体包括monospace，serif和sans-serif。

当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体。

例如，如果你想将一个元素的字体设置成Helvetica，当Helvetica不可用时，降级使用sans-serif字体，那么可以这样写：

    p {
      font-family: Helvetica, sans-serif;
    }

通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。

首先，添加monospace字体到h2元素里，它现在拥有着Lobster和monospace两种字体。

在上一个挑战里，你已经通过link标签引入谷歌Lobster字体。现在让我们注释掉谷歌Lobster字体的引入（使用我们之前学过的HTML注释），使字体失效。你会发现你的h2元素降级到了monospace字体。

<!--
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
-->
<style>
  .red-text {
    
    color: red;
  }

  h2 {
    
    font-family: Lobster, monospace;
  }

  p {
    
    font-size: 16px;
    font-family: monospace;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor">室内</label>
    <label><input type="radio" name="indoor-outdoor">室外</label
最低0.47元/天 解锁文章
Cool2050
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
freecodingcamp-CSS 基础
sun_8923的博客
07-17 332
*更改文本的颜色 举例 <h2 style="color: red;">CatPhotoApp</h2> 请注意行内style最好以;来结束。 *使用元素选择器来设置元素的样式 通过行内样式<h2 style="color: red;">CatPhotoApp</h2>，就可以修改h2元素的颜色为红色。 当我们只需要改变元素的某个样式时，行内样式最简单直观。当我们需要同时改变元素的很多样式时，层叠样式表往往是一个更好的选择。 在style样式声明
切版CSS框架 1.2.zip
05-24
切版CSS框架是切版网目前内部使用的框架，甚至于不算是一个框架，它只是提供了一个可靠的基础去创建你一个前端项目，提供了一段来自经验的css重写，并且约束了一些命名上的规范。它没法和成熟的CSS框架媲美，只是...
Style样式的定义
weixin_30323631的博客
03-14 191
老是一个个指定控件的文字、颜色、背景等等属性非常麻烦，这时候运用Style可以让程序看起来非常简洁，在比较大的工程项目中也是经常用到。 首先在values中建立一个style.xml文件，如图： 然后再style中定义样式，代码如下： <?xml version="1.0" encoding="utf-8"?> <resources> &l...
小白从零开始学习CSS
qq_43619461的博客
05-04 304
lz也是从知乎上看到这个这个网站，很不错，边学边敲。 网址：https://www.freecodecamp.one/ 这个算是自己做个小笔记（cv大法）吧，看一点敲一点，cv一点。 更改文本的颜色 现在让我们来修改一下文本的颜色。 我们通过修改h2元素的style属性的color值来改变文本颜色。 以下是改变h2元素为蓝色的方法： <h2 style="color: blue;">C...
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
HTML+CSS基础知识 - 1.2 CSS选择器+常用属性+高级应用
qq_40580037的博客
01-31 2273
创建一个HTML文件、一个CSS文件，用户将CSS文件链接到HTML文件时，在HTML5页面的标记中（or head与body标记之间）添加以下代码： <link rel="stylesheet" type="text/css" href="css文件地址"> 一、CSS3中的选择器 1.属性选择器： [att=val]{} 属性=属性值 示...
CSS基础 知识点总结
星星之火的语言c学习
08-18 1944
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
CSS基础
棉花糖老丫
04-23 1243
从事网页制作或者相关工作,就要学习HTML,CSS。其中HTML是网页制作的主要语言网页的基础,CSS层叠样式表,是对网页页面进行排版的标准。CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
css 层叠样式表（1.1 css基础选择， 1.2 css基本样式）
weixin_43283797的博客
11-03 560
css 层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 1.1：css基础选择： (派生选择器、id选择器、类选择器、属性选择器) 1.2：css基本样式： (背景、文本、链接、列表、表格、轮廓) 1.3：css盒子模型： (概述、内边距、边框、外边距、外边距合并、盒子模型应用) 1....
html+css基础知识
weixin_52682120的博客
05-10 1998
0、前提 80%知识，只有20%的场景可以用到； 20%的知识，有80%的场景可以用到。 1 、HTML & CSS 到底是什么，有什么用？ 它们是两门语言。 HTML + CSS + Javascript = 网页 HTML：Hyper Text Markup Language 超文本标记语言；定义网页中有什么。 CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子。 1.1 执行HTML CSS HTML、CSS -> 浏览器内核 -> 页面
CSS基础框架
weixin_62967067的博客
05-18 293
一、引入方式 外部：使用link标签进行引入 内部：直接定义样式 注意：权重相同情况下，后来者居上 内联：权重高为1000 二、常见样式 1、背景 背景色:background-color 背景图:background-image 使用url获取背景位置 2、文本 字体颜色 字体大小：font-size 字体样式：font-family 对齐方式: 行高：line-height ①当line-height = height时，文本垂直居中 ②行高默认是字体大小的1.2倍数，字体是相对于行高来居中的，当不给高
langlangDental::man_health_worker: HTML5_CSS3基础学习项目 - 朗朗口腔
08-04
HTML5/CSS3基础教程 教程官网： 视频地址： 项目访问： 学习内容：原生页面布局...1.2 CSSReset 不同的浏览器对不同的标签有自己内置的样式设置，这是全局性的样式，不同浏览器之间可能设置还不一样，并且内置的样式可
CSS三个标题及对应内容的tab切换
codedadi的博客
04-30 588
标题1标题2标题3
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
最新发布
秋刀鱼不做梦的编程日常
05-01 1101
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
第二弹：走进CSS世界，学习记录
weixin_64638001的博客
04-29 866
当选择器包含多种选择器时，需要将多种选择器优先级相加然后进行比较。选择器的优先级不会超过它最大数量级，如果选择器优先级一样，则使用靠后的样式。子选择器：选择器1 > 选择器2 表示选择器1的子元素为选择器2(只有父子关系才可以)。相邻选择器：选择器1 + 选择器2 表示选择紧贴在选择器1之后的选择器2元素。兄弟选择器：选择器1 ~ 选择器2 表示选择器1后面的所有兄弟元素选择器2。包含选择器：选择器1 选择器2 表示选择器2被选择器1包含即可。组合选择器：选择器1,选择器2 多个选择器之间用逗号分隔。
前端科举八股文-CSS篇
星海拾遗
04-25 1271
BFC 块级格式化上下文，它是指页面的一块独立的渲染区域，和其他区域相互独立出来互不干扰。它可以解决外边距折叠和高度塌陷的问题。根据它的定义，可以设置position不为static，overflow不为visible，或者设置浮动都可以设置BFC。
CSS + HTML
cookies_s_的博客
04-29 832
<title>CSS简介</title><style>h1 {p {a {li {span {</style>层叠样式表样式表
CSS实现各种优惠券效果
JavaScritp
04-29 394
CSS实现各种优惠券效果。
css 使用less参数
08-15
LESS 是一种 CSS 预处理器，它在现有的 CSS 语法基础上添加了一些功能，让样式表更加灵活和易于管理。 其中，LESS 的参数功能主要有以下几个方面。 1. 变量：LESS 允许定义变量来存储各种样式值，然后在样式表中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值