首页 > 其他分享 >【CSS学习第一篇】

【CSS学习第一篇】

时间：2024-07-19 09:58:08浏览次数：15  
标签：pink 第一篇 秘密 学习 字体 font 选择器 CSS

CSS学习第一篇

1. CSS简介

1.1 什么是CSS？

CSS是层叠样式表（Cascading style sheets）的简称，有时我们也称之为CSS样式表或级联样式表
（CSS也是一种标记语言）

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

简言之，CSS是用来美化网页、布局页面的

1.2 CSS语法规范

CSS规则由两个主要的部分构成：
选择器以及一条或多条声明
在这里插入图片描述
选择器是用于指定CSS样式的HTML标签

2. CSS选择器

2.1 CSS选择器的作用

选择器（选择符）是根据不同需求把不同的标签选出来

2.2 CSS选择器的分类

CSS选择器分为基础选择器和复合选择器两个大类。
此篇我们先讲基础选择器。

基础选择器是由单个选择器组成的

基础选择器包括标签选择器、类选择器、id选择器、通配符选择器

2.3 标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

作用：标签选择器可以将某一类标签全部选择出来

优点：能快速为页面中同类型的标签统一设置样式

缺点：不能设计差异化样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: pink;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

2.4 类选择器

如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器。

在HTML中以class属性表示，在CSS中以一个"."号表示

命名规范：见“web前端开发规范手册.doc”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pink {
            color: pink;
        }
    </style>
</head>
<body>
    <h2 class="pink">pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

类选择器在修改样式中用的最多

2.5 id选择器

id选择器一般用于页面唯一性的元素上，
经常和JavaScript搭配使用
（只能使用一次）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p id="pink">静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

2.6 通配符选择器

在CSS中，通配符选择器使用“*”定义，
它表示选取页面中所有元素（标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: pink;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

3. CSS字体属性

CSS font（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）

3.1 font-family设置字体系列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体系列</title>
    <style>
        h2 {
            font-family: 'Microsoft YaHei';
        }

        p {
            font-family: 'Times New Roman', Times;
        }
    </style>
</head>

<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

3.2 font-size字号大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字号大小</title>
    <style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊，需要单独指定文字大小 */
        h2 {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

3.3 font-weight字体粗细

属性值描述
normal默认值（不加粗的）
bold定义粗体（加粗的）
100-900400等同于normal，而700等同于bold（注意数字后不跟单位）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体粗细</title>
    <style>
        .bold {
            /* font-weight: bold; */
            font-weight: 700;
        }
        h2 {
            font-weight: 400;
            /* font-weight: normal; */
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p class="bold">拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

3.4 font-style字体样式

属性值作用
normal默认值，浏览器会显示标准的字体样式
italic浏览器会显示斜体的字体样式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体样式</title>
    <style>
        p {
            font-style: italic;
        }
        em {
            /* 让倾斜的字体不倾斜*/
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>同学,上课时候的你</p>
    <em>下课时候的你</em>
</body>
</html>

在这里插入图片描述

3.5 font复合属性写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体font复合属性</title>
    <style>
        p {
            /* 复合属性:简写的方式 节约代码 */
            /* font: font-style font-weight font-size/line-height font-family */
            font: italic 700 16px 'Microsoft YaHei';
            /* 必须留下font-size font-family */
            /* font: 20px '黑体'; */
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

4. CSS文本属性

CSS text（文本）属性用于定义文本的外观，比如文本的颜色，对齐文本、装饰文本、文本缩进、行间距等

4.1 文本颜色color

表示属性值
预定义的颜色值red、green、blue、pink
十六进制##FF0000
RGB代码rgb(255,0,0)或者rgb(100％,0％,0％)

开发中最常用的是十六进制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之文本颜色</title>
    <style>
        p {
            /*color: deeppink;*/
            color: #a94ba9;
            /* color: rgb(37, 126, 110);*/
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

4.2 文本对齐text-aligh

一般指的是水平对齐，包括left、center、right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之文本对齐</title>
    <style>
        h2 {
            /* 让h1盒子里面的文字水平居中对齐 */
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

4.3 文本装饰text-decoration

我们可以给文本添加下划线、删除线、上划线等。

属性值描述
none默认，没有装饰线（最常用）
underline下划线。（常用）
overline上划线。（几乎不用）
line-through删除线。（几乎不用）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之文本装饰</title>
    <style>
        p {
            /* 下划线  */
            text-decoration: underline;
            /* 删除线 */
            /* text-decoration: line-through; */
            /* 上划线 */
            /* text-decoration: overline; */
        }
        a {
            /* 取消a默认的下划线 */
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <a href="#">正文</a>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

4.4 文本缩进text-indent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之文本缩进</title>
    <style>
        p {
            font-size: 24px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

注意：em是一个相对单位，是当前元素（font-size）1个文字的大小。如果当前元素没有设置大小，则会按照父元素的1个文字大小定义em。

4.5 行间距line-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体系列</title>
    <style>
        p {
            line-height: 50px;
        }
    </style>  
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

5. CSS的引入方式

根据CSS样式书写的位置（或者引入的方式），
CSS样式表可以分为三大类：
（1）行内式样式表（行内式）
（2）内部样式表（嵌入式）
（3）外部样式表（链接式）

（1）行内式样式表（行内式）：
是在元素标签内部的style属性中设定CSS属性
（适合于修改简单样式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p style="color: pink;">拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

在这里插入图片描述

（2）内部样式表（嵌入式）：
是写到HTML页面内部，将所有的CSS代码抽取出来，
单独放到一个<style>标签中
前面我们所举的例子均是如此

这样做代码结构清晰，但并没有实现结构和样式完全分离

（3）外部样式表（链接式）
样式单独写到CSS文件中，
之后把CSS文件引入到HTML页面中使用。

引入外部样式表分为两步：
新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中
在HTML页面中，使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清澈。</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个。</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

CSS代码：

p {
    color: pink;
}

在这里插入图片描述

后记

还未完成知识点：

（1）chrome调试工具未写入
（2）这篇学太久了，没按照正常的方法走

标签：pink,第一篇,秘密,学习,字体,font,选择器,CSS
From： https://blog.csdn.net/2301_77399671/article/details/140386264

相关文章

  • 暑假两个月学习AI产品经理详细路线，看这一篇就够了
    以下是一个暑假期间学习AI产品经理的详细路线，分为八个周来进行：第1周：了解AI产品管理基础阅读材料：《人工智能：一种现代的方法》了解AI基础。《人人都是产品经理》了解产品管理基础。在线课程：Coursera上的“人工智能基础”课程。edX上的“产品管理基础”课程。实践：调研......
  • Nodify学习 三：连接器
    前置连接概述连接是由两个点之间创建的。Source和Target依赖属性是Point类型，通常绑定到连接器的Anchor点。基本连接库中所有连接的基类是BaseConnection，它派生自Shape。在创建自定义连接时，可以不受任何限值地从BaseConnection派生。它公开了两个命令及其对应的事件：Disconne......
  • 计算机毕业设计Python+Tensorflow小说推荐系统 K-means聚类推荐算法 深度学习 Kears
    2、基于物品协同过滤推荐算法2.1、基于⽤户的协同过滤算法（UserCF）该算法利⽤⽤户之间的相似性来推荐⽤户感兴趣的信息，个⼈通过合作的机制给予信息相当程度的回应（如评分）并记录下来以达到过滤的⽬的进⽽帮助别⼈筛选信息，回应不⼀定局限于特别感兴趣的，特别不感兴趣信息的纪录也相......
  • 计算机毕业设计PySpark+Django高考志愿填报推荐系统 高考预测 高考大数据分析 Hadoop
    摘要本文旨在设计与实现一个基于Spark的高考志愿填报推荐系统，旨在帮助高考生根据自身成绩和兴趣，精准推荐合适的大学和专业。系统采用大数据处理框架Spark，结合机器学习算法，实现了对高考数据的深度挖掘和分析，为考生提供科学、有效的志愿填报建议。系统捕捉考生个人特征、......
  • 深度学习中的正则化技术 - Dropout篇
    序言在深度学习的浩瀚领域中，模型过拟合一直是研究者们面临的挑战之一。当模型在训练集上表现得近乎完美，却难以在未见过的数据（测试集）上保持同样优异的性能时，过拟合现象便悄然发生。为了有效缓解这一问题，Dropout......
  • k8s学习--pod的所有状态详解(图例展示)
    在Kubernetes中，Pod是最小的可部署计算单元。Pod有多种状态，每种状态都反映了Pod的生命周期的不同阶段。以下是Pod的所有状态及其详细解释：状态转换示意图1.Pending描述：Pod被创建并通过了调度器，但还没有绑定到任何节点，也可能容器镜像还在下载中。原因：没有足够......
  • 前端重学笔记-CSS篇-10
    一、HTML5新特性HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。声明:1.新特性增加了很多，但是我们专注于开发常用的新特......
  • [强化学习]--悬崖漫步
    Q-Learning是一种在强化学习中广泛应用的算法，它属于值迭代方法的一种，能够通过与环境交互来学习最优策略。Q-Learning的核心思想是学习一个动作价值函数（Q-Function），这个函数可以预测从某个状态采取某个动作后所能获得的长期奖励。1、Q-Learning的基本原理Q-Learning的目标是找......
  • 苍穹外卖学习笔记——第九天
    用户端历史订单模块查询历史订单需求分析和设计产品原型业务功能分页查询历史订单。可以根据订单状态查询（全部订单、待付款、已取消）。订单按照下单时间倒序排列。展示订单数据时，需要展示的数据包括：下单时间、订单状态、订单金额、订单明细（商品名称、图片）。接口设计......
  • 学习Go的第二天
    加完班回到家，继续第二天的学习，先尝试了解下常量，常量使用关键字const定义，用于存储不会改变的数据。故意尝试修改下常量：IDE提示：cannotassigntoPi(neitheraddressablenoramapindexexpression)，即：无法分配给pi（既不是可寻址的，也不是映射索引表达式）iota特殊常量可以用......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99