【前端】零基础学会编写CSS

一、什么是CSS

CSS (Cascading Style Sheets，层叠样式表）是一种是一种用来为结构化文档（如 HTML 文档）添加样式（字体、间距和颜色等）的计算机语言，能够对网页中元素位置的排版进行像素级别的精确控制，实现美化页面的效果。

html决定一个页面的结构，那么css就用来控制页面的展示效果

二、CSS基本语法 

首先介绍基本的概念，CSS的基本语法由选择器和声明组成

选择器用来决定修改谁的样式，声明则决定了修改成什么样子，每条声明都是一个键值对

例如这个例子：

p {color: red; /*设置字体颜色*/font-size: 20px; /*设置字体大小*/
}

就是将所有<p>元素的文本都设置为红色，字体大小为20px

一个样式可以写在同一行，但是更推荐一个声明一行的风格，显得没那么拥挤

三、CSS的引入方式

CSS需要以一定的方式才能够插入HTML中

3.1 内部样式表

将CSS写在style标签中，直接嵌入到HTML内部

例如：

<html>
<head><title>页面标题</title><style>p {color: red;font-size: 20px;}</style>
</head>
<body>页面内容
</body>
</html>

这样可以将CSS和HTML合并在一个文件中，一般将style标签放在HTML的head标签中，也能够做到样式与页面结构分离

不过这种方式分离的不够彻底，当CSS内容很多时会显得杂乱

3.2 行内样式表

这种方法相比上面的内部样式表，分离程度更低，但优先级较高，且只针对单个标签生效

直接在某个标签中定义style属性来指定该标签的样式，但一般只适合写一些简单的样式

例如：

<html>
<head><title>页面标题</title>
</head>
<body><div style="color: red">行内样式表</div>
</body>
</html>

行内样式表的优先级较高，会覆盖其他引入方式的样式

3.3 外部样式表

另外创建一个CSS文件，并使用link标签在HTML文件中引入该CSS文件，例如：

<html>
<head><title>页面标题</title><link rel="stylesheet" href="test.css">
</head>
<body>页面内容
</body>
</html>

这种方式的分离程度最高，是实际开发中最常用的方式

四、选择器

前面提到，选择器决定了要对谁的样式进行修改，我们必须选中了目标，才能设置属性。

选择器也有不同的种类

4.1 基础选择器

（1）标签选择器

前面的例子使用的就是标签选择器，能够快速的修改同一标签的所有元素，但无法进行差异化修改

例如：

<html>
<head><title>页面标题</title><style>p {color: red;}div {color: blue;}</style>
</head>
<body>页面内容
</body>
</html>

（2）类选择器

定义某个元素的类名，然后通过指定类名来修改其样式

例如：

<html>
<head><title>页面标题</title><style>.test {color: red;}</style>
</head>
<body><p class="test">测试</p>
</body>
</html>

一些细节需要注意：

  • 使用类选择器时类名前需要带点
  • 通过定义某元素的class属性来定义其类名
  • 一个类名可以被多个元素同时使用，一个元素也可以同时使用多个类名，多个类名用空格分隔

例如：

<html>
<head><title>页面标题</title><style>.test1 {color: red;}.test2 {font-size: 20px;}</style>
</head>
<body><p class="test1 test2">测试</p>
</body>
</html>
  • 长类名可以用 - 分割
  • 不要用纯数字、中文和标签名作为类名

（3）id选择器

定义某个元素的id，并通过指定id来修改其样式

例如：

<html>
<head><title>页面标题</title><style>#test {color: red;}</style>
</head>
<body><p id="test">测试</p>
</body>
</html>

id选择器和类选择器相似，区别在于：

  • 选择器开头使用#而不是点
  • id是唯一的，不能同时被多个元素使用，这是和类选择器最大的区别

（4）通配符选择器

使用星号 * 来选取所有的元素，例如：

<html>
<head><title>页面标题</title><style>* {color: red;}</style>
</head>
<body>页面内容
</body>
</html>

页面中的所有文字都会被改成红色

4.2 复合选择器

（1）后代选择器

也叫包含选择器，用于选择某个父元素的某个子元素

元素1 元素2 { 声明 }

父子元素间要用空格分隔，前面的是父元素，后面的是子元素，只会修改子元素的样式

多个元素间可以使用不同的基础选择器，例如元素1用类选择器，元素2用标签选择器

例如：

<html>
<head><title>页面标题</title><style>.parent .child {color: red;}</style>
</head>
<body><ol class="parent"><li class="child">1</li><li>2</li><li>3</li></ol>
</body>
</html>

元素2不一定非要是子元素，孙子辈的元素也可以

（2）并集选择器

用于同时对多个目标的样式进行修改，例如：

<html>
<head><title>页面标题</title><style>.test1, .test2 {color: red;}</style>
</head>
<body><div class="test1">1</div><div class="test2">2</div>
</body>
</html>

并集选择器通过逗号分割不同的目标。

任何基础选择器（如上面的类选择器）都可以使用并集选择器

（3）伪类选择器

伪类用于定义元素的特殊状态

一些网页上的链接，鼠标没放上去的时候是黑色的，但是我们把鼠标放上去后就变为了其他颜色，这是如何做到的呢？

我们可以使用伪类选择器来实现这样的效果，例如：

<html>
<head><title>页面标题</title><style>a:link {color: black;}a:visited {color: purple;}a:hover {color: blue;}a:active {color: red;}</style>
</head>
<body><a href="#">链接</a>
</body>
</html>

其中：

  • a:link代表未被访问过的链接
  • a:visited代表已被访问过的链接
  • a:hover代表鼠标指针悬停处的链接
  • a:active代表鼠标按下但没松开的链接

上面的例子中，我们设置的链接未访问时是黑色字体的，将鼠标放在上面就会变为蓝色，按下但不松开时字体则会变为红色，点击链接过后字体变为紫色

在测试上面的例子时，链接被访问后就会一直显示紫色字体

如果我们要将一个被访问过的链接恢复为未访问的状态，则需要用ctrl+shift+delete清空浏览器历史记录

使用伪类选择器时，需要注意按照link-visited-hover-active的顺序定义

除了链接我们还可以在其他元素上使用伪类，例如<div>等

 更多伪类可以跳转：

CSS 伪类 (w3school.com.cn)icon-default.png?t=N7T8https://www.w3school.com.cn/css/css_pseudo_classes.asp

五、常用元素属性

知道该如何选择修改的目标后，我们还需要知道能够修改目标的哪些属性

这里只对部分常用的属性进行介绍，更多属性可以参考文档

CSS 参考手册 (w3school.com.cn)icon-default.png?t=N7T8https://www.w3school.com.cn/cssref/index.asp

5.1 设置字体属性

（1）字体类型

font-family：可以指定目标字体的类型，例如

<html>
<head><title>页面标题</title><style>.test1 {font-family: '微软雅黑';}.test2 {font-family: '宋体';}</style>
</head>
<body><div class="test1">内容1</div><div class="test2">内容2</div>
</body>
</html>

字体名称可以用中文，但是推荐用英文

（2）字体大小

font-size：指定目标字体的大小，例如

<html>
<head><title>页面标题</title><style>.test1 {font-size: 20px;}.test2 {font-size: 40px;}</style>
</head>
<body><div class="test1">内容1</div><div class="test2">内容2</div>
</body>
</html>

不同浏览器默认字体大小不一样，最好显式定义一个明确值

注意，不要忘记带单位px

（3）字体粗细

font-weight：指定目标字体的粗细，例如

<html>
<head><title>页面标题</title><style>.test1 {font-weight: bolder;}.test2 {font-weight: 400;}</style>
</head>
<body><div class="test1">内容1</div><div class="test2">内容2</div>
</body>
</html>

字体粗细既可以用单词表示，从粗到细分别是bolder、bold、normal、lighter

也可以用数字表示，取值范围是100-900，400等同于normal，700等同于bold

（4）字体样式

font-style：指定目标字体的样式（正常或斜体），例如

<html>
<head><title>页面标题</title><style>.test1 {font-style: italic;}.test2 {font-style: normal;}</style>
</head>
<body><div class="test1">内容1</div><div class="test2">内容2</div>
</body>
</html>

5.2 设置文本属性

（1）文本颜色

我们的显示器是由很多像素构成的，将每个像素视为一个点，这个点就能反映出一个具体的颜色

红绿蓝（RGB）是色光三原色，将三个颜色按照不同的比例混合就能得到不同的颜色

计算机中针对RGB三个分量，分别使用一个字节(8个比特位，范围是 0-255，十六进制范围是00-FF)表示，数值越大，该分量的颜色就越浓。

rgb(255,255,255)表示白色，rgb(0,0,0)表示黑色

在设置文本颜色时，我们也可以通过不同的方式设置，例如：

color: rgb(255, 255, 255);
color: white;
color: #ffffff;

三者都表示白色

（2）文本对齐

text-align：控制文本水平方向的对齐，例如

<html>
<head><title>页面标题</title><style>.test1 {text-align: center;}.test2 {text-align: left;}</style>
</head>
<body><div class="test1">内容1</div><div class="test2">内容2</div>
</body>
</html>

其中center表示居中对齐，left表示左对齐，right表示右对齐

（3）文本装饰

text-decoration：给文本加上下划线等装饰，例如

<html>
<head><title>页面标题</title><style>.test1 {text-decoration: underline;}.test2 {text-decoration: line-through;}</style>
</head>
<body><div class="test1">内容1</div><div class="test2">内容2</div>
</body>
</html>

其中underline代表下划线，none代表什么都不加，overline代表上划线，line-through代表删除线

（4）文本缩进

text-indent：控制段落的首行缩进，例如

<html>
<head><title>页面标题</title><style>.test1 {text-indent: 2em;}.test2 {text-indent: 4em;}</style>
</head>
<body><div class="test1">内容1</div><div class="test2">内容2</div>
</body>
</html>

其中单位可以使用px或em，推荐使用em，1em代表一个当前元素的文字大小

缩进值可以是负数，表示向左缩进

（5）行高

line-height：控制上下文本行之间的距离，例如：

<html>
<head><title>页面标题</title><style>.test1 {line-height: 10px;}.test2 {line-height: 100px;}</style>
</head>
<body><div class="test1">内容1</div><div class="test2">内容2</div>
</body>
</html>

5.3 设置背景属性

（1）背景颜色

background-color：设置元素的背景颜色，例如

<html>
<head><title>页面标题</title><style>body {background-color: red;}</style>
</head>
<body></body>
</html>

对body的背景设置为红色，整个页面都变成红色了，可以用来设置页面的基调色

背景颜色和前面文本颜色一样也可以用三种不同的方法设置

（2）背景图片

background-image：将元素的背景设置为某张图片，例如

<html>
<head><title>页面标题</title><style>.pic {background-image: url(baidu.png);height: 300px;width: 300px;}</style>
</head>
<body><div class="pic"></div>
</body>
</html>

设置背景图片时的url既可以是绝对路径，也可以是相对路径

（3）背景重复

background-repeat：设置背景图片该以何种方式在元素中填充

其取值如下：

  • no-repeat：元素内背景图片只重复一次，无论图片是否填满元素背景

  • repeat：元素内背景图片一直重复直到填满元素背景

  • repeat-x：元素内背景图片只在x轴上重复

  • repeat-y：元素内背景图片只在y轴上重复

<html>
<head><title>页面标题</title><style>.pic {background-image: url(baidu.png);height: 600px;width: 600px;background-repeat: no-repeat;}</style>
</head>
<body><div class="pic"></div>
</body>
</html>

no-repeat比较简单这里就不展示效果了，我们从repeat开始

这是repeat的效果：

这是repeat-x的效果：

这是repeat-y的效果：

（4）背景图片位置

background-position：修改图片在元素中的位置，例如：

<html>
<head><title>页面标题</title><style>.pic {background-image: url(baidu.png);height: 600px;width: 600px;border: 2px solid black; /*边框*/background-repeat: no-repeat; /*图片不重复*/background-position: 100px 100px;}</style>
</head>
<body><div class="pic"></div>
</body>
</html>

为了便于演示所以给div元素加上了边框

background-position的参数有三种风格：

  • 方位单词：top、left、right、bottom
  • 精确单位：坐标或百分比（以左上角为原点，前一个为x轴后一个为y轴）
  • 混合单位：同时包含方位和精确单位

（5）背景尺寸

background-size：设置背景的尺寸，例如

<html>
<head><title>页面标题</title><style>.pic {background-image: url(baidu.png);height: 600px;width: 600px;border: 2px solid black;background-repeat: no-repeat; background-size: 100px 100px; /*背景尺寸*/}</style>
</head>
<body><div class="pic"></div>
</body>
</html>

背景尺寸既可以填具体的数值（如20px 40px表示宽度为20px，高度为40px），也可以填百分比

还可以填cover（图像完全覆盖整个背景区域，可能导致图像某些部分超出区域）或contain（图像尺寸扩展到最大但不超出背景区域）等单词

更多元素属性可以参考文档

CSS 参考手册 (w3school.com.cn)icon-default.png?t=N7T8https://www.w3school.com.cn/cssref/index.asp

完.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/45923.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【数据结构取经之路】二叉搜索树的实现

【数据结构取经之路】二叉搜索树的实现

目录 前言 二叉搜索树 概念 性质 二叉搜索树的实现 结点的定义 插入 查找 删除 二叉搜索树完整代码 前言 首先&#xff0c;二叉搜索树是一种数据结构&#xff0c;了解二叉搜素树有助于理解map和set的特性。 二叉搜索树 概念 二叉搜索树又称二叉排序树&#xff0c…
阅读更多...
【Caffeine】⭐️SpringBoot 项目整合 Caffeine 实现本地缓存

【Caffeine】⭐️SpringBoot 项目整合 Caffeine 实现本地缓存

目录 &#x1f378;前言 &#x1f37b;一、Caffeine &#x1f37a;二、项目实践 2.1 环境准备 2.2 项目搭建 2.3 接口测试 ​&#x1f49e;️三、章末 &#x1f378;前言 小伙伴们大家好&#xff0c;缓存是提升系统性能的一个不可或缺的工具&#xff0c;通过缓存可以避免大…
阅读更多...
java基础之接口

java基础之接口

接口和抽象类很像&#xff0c;接口是把行为给抽象化&#xff0c;可以理解成一个抽象类抽象到极致的情况下&#xff0c;形成的类&#xff0c;也就是一个抽象类有且只有抽象方法的时候&#xff0c;就可以用接口来写。 一、抽象类与接口在书写上的异同 这是一个抽象类 public abst…
阅读更多...
五、 计算机网络(考点篇)

五、 计算机网络(考点篇)

1 网络概述和模型 计算机网络是计算机技术与通信技术相结合的产物&#xff0c;它实现了远程通信、远程信息处理和资源共享。计算机网络的功能&#xff1a;数据通信、资源共享、管理集中化、实现分布式处理、负载均衡。 网络性能指标&#xff1a;速率、带宽(频带宽度或传送线路…
阅读更多...
什么是人力资源管理审计

什么是人力资源管理审计

企业管理者可以通过会计审计了解公司的财务状况&#xff0c;对企业同样重要的人力状况如何要怎样了解呢&#xff1f;要怎样提高人力资源部门的运行能力&#xff1f;如何实施各种人力资源功能&#xff1f; 相对与财务、会计审计而言&#xff0c;人力资源审计在我国管理层中还是一…
阅读更多...
驱动电机液冷冷却系统

驱动电机液冷冷却系统

1.自然冷却 自然冷却也可以看作是被动散热&#xff0c;它是依靠驱动电机自身的硬件结构&#xff0c;把热量从里经由金属材料向外散热&#xff0c;所以也就不会造成太多的成本支出&#xff0c;但是整体的散热效果并不太好。 考虑到低成本的原因&#xff0c;自然冷却就不能加装…
阅读更多...
【简历】重庆某一本大学：JAVA简历指导，中厂通过率较低

【简历】重庆某一本大学：JAVA简历指导，中厂通过率较低

注&#xff1a;为保证用户信息安全&#xff0c;姓名和学校等信息已经进行同层次变更&#xff0c;内容部分细节也进行了部分隐藏 简历说明 这是一份重庆某一本大学Java同学的简历。那么因为学校是一个一本的学校&#xff0c;就先要确定就业层次在中厂或者大厂&#xff0c;但是…
阅读更多...
串联式 VS 并联式电源连接拓扑

串联式 VS 并联式电源连接拓扑

https://download.csdn.net/download/qq_42605300/89538758https://download.csdn.net/download/qq_42605300/89538758串联式电源连接拓扑&#xff1a; 缺点&#xff1a;公共阻抗耦合&#xff0c;引入更多共模干扰。 并联式(星型)电源连接拓扑&#xff1a; 缺点&#xff1a;接地…
阅读更多...
【Python】基础语法（顺序语句、条件语句、循环语句）

【Python】基础语法（顺序语句、条件语句、循环语句）

一、顺序语句 默认情况下&#xff0c;Python 的代码执行顺序是按照从上到下的顺序&#xff0c;依次执行的。 编程是一件明确无歧义的事情&#xff0c;安排好任务的顺序&#xff0c;计算机才能够正确的进行执行。 二、条件语句 1、什么是条件语句 条件语句能够表达 “如果...&…
阅读更多...
架构师机器学习操作 (MLOps) 指南

架构师机器学习操作 (MLOps) 指南

MLOps 是机器学习操作的缩写&#xff0c;是一组实践和工具&#xff0c;旨在满足工程师构建模型并将其投入生产的特定需求。一些组织从一些自主开发的工具开始&#xff0c;这些工具在每次实验后对数据集进行版本控制&#xff0c;并在每个训练周期后对检查点模型进行版本控制。另…
阅读更多...
【qt】 QGridLayout布局管理器怎么用?

【qt】 QGridLayout布局管理器怎么用?

QGridLayout是 Qt 中的一个布局管理器&#xff0c;用于在窗口或对话框中创建网格布局。它将控件按照行和列的方式进行排列&#xff0c;使得界面更加整齐和有序。 可以用setSpacing()来设置各个主键之间的间距. 可以设置各组件之间的间隙和与窗口边界的边距. 用addWidget()来添…
阅读更多...
AQS之ReentrantLock源码分析

AQS之ReentrantLock源码分析

目录 1. LockSupport 类 2. 如何设计一把独占锁&#xff1f; 3. 管程 — Java同步的设计思想 3.1 MESA模型 为什么条件队列的线程需要移到同步队列再唤醒运行&#xff1f; 4. AQS原理分析 4.1 什么是AQS 4.2 AQS核心结构 AQS内部维护属性volatile int state 4.3 AQS定义…
阅读更多...
Android 10.0 SystemUI启动流程

Android 10.0 SystemUI启动流程

1、手机开机后&#xff0c;Android系统首先会创建一个Zygote&#xff08;核心进程&#xff09;。 2、由Zygote启动SystemServer。 3、SystemServer会启动系统运行所需的众多核心服务和普通服务、以及一些应用及数据。例如&#xff1a;SystemUI 启动就是从 SystemServer 里启动的…
阅读更多...
[web]-sql注入-白云搜索引擎

[web]-sql注入-白云搜索引擎

ctrlu查看源代码&#xff0c;发现前端有js过滤 <script>function myFunction(){var xdocument.getElementById("number").value;var adocument.getElementById("word").value;var ba.replace(/[\ |\~|\|\!|\|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\|\…
阅读更多...
通过vm可以访问那些属性——06

通过vm可以访问那些属性——06

1.通过vue实例都可以访问那些属性&#xff1f;&#xff08;通过vm都可以vm.什么&#xff09; vue实例中的属性很多。有的以$开始&#xff0c;有的以_开始。 所有以$开始的属性&#xff0c;可以看做是公开的属性&#xff0c;这些属性是提供给程序员使用的 所有以_开始的属性&…
阅读更多...
Redis学习笔记(个人向)

Redis学习笔记(个人向)

Redis学习笔记(个人向) 1. 概述 是一个高性能的 key-value 数据库&#xff1b;其具有以下三个特点&#xff1a; Redis支持数据的持久化&#xff0c;可以将内存中的数据保存在磁盘中&#xff0c;重启的时候可以再次加载进行使用。Redis不仅仅支持简单的key-value类型的数据&…
阅读更多...
《昇思25天学习打卡营第19天|生成式-Pix2Pix实现图像转换》

《昇思25天学习打卡营第19天|生成式-Pix2Pix实现图像转换》

学习内容&#xff1a;Pix2Pix实现图像转换 1.模型简介 Pix2Pix是基于条件生成对抗网络&#xff08;cGAN, Condition Generative Adversarial Networks &#xff09;实现的一种深度学习图像转换模型&#xff0c;该模型是由Phillip Isola等作者在2017年CVPR上提出的&#xff0c…
阅读更多...
【YOLO系列】快速部署YOLOv5（Windows）

【YOLO系列】快速部署YOLOv5（Windows）

引言 在计算机视觉领域&#xff0c;目标检测是至关重要的任务之一&#xff0c;它涉及识别图像或视频中的对象&#xff0c;并将其分类和定位。近年来&#xff0c;**YOLO&#xff08;You Only Look Once&#xff09;**算法因其速度与精度的平衡而变得非常流行。在这篇博文中&…
阅读更多...
防火墙NAT智能选举综合实验

防火墙NAT智能选举综合实验

目录 实验拓扑 实验要求 实验思路 实验配置 需求7 需求8 需求9 需求10 需求11 实验拓扑 实验要求 7.办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 8.分公司设备可以通过总公司的移动链路和电信链路访问到d…
阅读更多...
电表及销售统计Python应用及win程序

电表及销售统计Python应用及win程序

暑假每天都要填表算账很烦躁&#xff0c;就整了个小程序来减轻压力 程序可以做到记录输入的每一条数据&#xff0c;并用新数据减去旧数据算新增的量&#xff0c;同时记录填写时间 Python代码 import json import os # 导入os模块 from datetime import datetime from tkint…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023