【前端】零基础学会编写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.rhkb.cn/news/376135.html

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

相关文章

简单的SQL字符型注入

简单的SQL字符型注入

目录 注入类型 判断字段数 确定回显点 查找数据库名 查找数据库表名 查询字段名 获取想要的数据 以sqli-labs靶场上的简单SQL注入为例 注入类型 判断是数字类型还是字符类型 常见的闭合方式 ?id1、?id1"、?id1)、?id1")等&#xff0c;大多都是单引号…
阅读更多...
前端Canvas入门——一些注意事项

前端Canvas入门——一些注意事项

创建渐变的三种方法&#xff1a; createLinearGradient() - 线性渐变 createRadialGradient() - 径向渐变&#xff08;放射性渐变&#xff09; createConicGradient() - 锥形渐变 这三种的核心观点都是&#xff1a; 创建一个gradient对象&#xff0c;然后调用addColorStop()方法…
阅读更多...
Python转换PDF为PowerPoint演示文件

Python转换PDF为PowerPoint演示文件

PDF文件以其跨平台兼容性和版面固定性成为了分享和存储文档资料的首选格式。然而&#xff0c;在需要进行生动、互动性强的演示时&#xff0c;PDF的静态特性便难以满足个性化演示需求。将PDF文件转换为PowerPoint演示文稿可以解决这一问题。PowerPoint不仅提供了丰富的动画和过渡…
阅读更多...
亚马逊erp个人贴牌工作室贴牌，孵化贴牌，无限开子账号...

亚马逊erp个人贴牌工作室贴牌，孵化贴牌，无限开子账号...

三种方式个人工作室贴牌。 系统的工作室贴牌以及个人贴牌能实现的权限。首先贴牌这一块的所有功能跟卖的铺货的全部工程不用说了都可以用&#xff0c;没有任何限制&#xff0c;也没有隐藏收费&#xff0c;这是功能板块。主要是开子账号这块&#xff0c;在会员子账号角色先设置…
阅读更多...
【渗透测试】利用hook技术破解前端JS加解密 - JS-Forward

【渗透测试】利用hook技术破解前端JS加解密 - JS-Forward

前言 在做渗透测试项目时&#xff0c;尤其是金融方面&#xff0c;经常会遇到前端JS加解密技术&#xff0c;看着一堆堆密密麻麻的密文&#xff0c;会给人一种无力感。Hook技术则会帮助我们无需获取加解密密钥的前提下&#xff0c;获取明文进行渗透测试 环境准备 JS-Forward Burp…
阅读更多...
函数（实参以及形参）

函数（实参以及形参）

实际参数&#xff08;实参&#xff09; 实际参数就是在调用函数时传递给函数的具体值。这些值可以是常量、变量、表达式或更复杂的数据结构。实参的值在函数被调用时传递给对应的形参&#xff0c;然后函数内部就可以使用这些值来执行相应的操作。 int main() {int a 0;int b …
阅读更多...
【轻松拿捏】Java-final关键字（面试）

【轻松拿捏】Java-final关键字（面试）

目录 1. 定义和基本用法 回答要点&#xff1a; 示例回答&#xff1a; 2. final 变量 回答要点&#xff1a; 示例回答&#xff1a; 3. final 方法 回答要点&#xff1a; 示例回答&#xff1a; 4. final 类 回答要点&#xff1a; 示例回答&#xff1a; 5. final 关键…
阅读更多...
Elasticsearch：Node.js ECS 日志记录 - Morgan

Elasticsearch：Node.js ECS 日志记录 - Morgan

这是之前系列文章&#xff1a; Elasticsearch&#xff1a;Node.js ECS 日志记录 - Pino Elasticsearch&#xff1a;Node.js ECS 日志记录 - Winston 中的第三篇文章。在今天的文章中&#xff0c;我将描述如何使用 Morgan 包针对 Node.js 应用进行日子记录。此 Morgan Node.j…
阅读更多...
【微服务】springboot对接Prometheus指标监控使用详解

【微服务】springboot对接Prometheus指标监控使用详解

目录 一、前言 二、微服务监控概述 2.1 微服务常用监控指标 2.2 微服务常用指标监控工具 2.3 微服务使用Prometheus监控优势 三、环境准备 3.1 部署Prometheus服务 3.2 部署Grafana 服务 3.3 提前搭建springboot工程 3.3.1 引入基础依赖 3.3.2 配置Actuator 端点 3.…
阅读更多...
SpringBoot运维篇

SpringBoot运维篇

工程打包与运行 windows系统 直接使用maven对项目进行打包 jar支持命令行启动需要依赖maven插件支持&#xff0c;打包时须确认是否具有SpringBoot对应的maven插件 <build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><ar…
阅读更多...
单目测距 单目相机测距 图片像素坐标转实际坐标的一种转换方案

单目测距 单目相机测距 图片像素坐标转实际坐标的一种转换方案

需要相机位置固定 原图 红色的点是我们标注的像素点&#xff0c;这些红色的点我们知道它的像素坐标&#xff0c;以及以右下角相机位置为原点的x y 实际坐标数值 通过转换&#xff0c;可以得到整个图片内部其余像素点的实际坐标&#xff0c; 这些红色的点是通过转换关系生成的&…
阅读更多...
春招冲刺百题计划|堆

春招冲刺百题计划|堆

Java基础复习 Java数组的声明与初始化Java ArrayListJava HashMapJava String 类Java LinkedListJava Deque继承LinkedListJava SetJava 队列优先队列:第二题用到了 第一题&#xff1a;215. 数组中的第K个最大元素 可以直接使用Arrays.sort()快排&#xff0c;然后return nums…
阅读更多...
Let‘s Encrypt免费安全证书的步骤及使用

Let‘s Encrypt免费安全证书的步骤及使用

网站安全现已成为每个在线业务的重要考虑因素。为了确保网站与用户之间的通信安全&#xff0c;SSL/TLS证书发挥着至关重要的作用。 申请Lets Encrypt域名SSL证书步骤 1、登录来此加密网站&#xff0c;输入域名&#xff0c;可以勾选泛域名和包含根域。 2、选择加密方式&#x…
阅读更多...
初识Laravel（Laravel的项目搭建）

初识Laravel（Laravel的项目搭建）

初识Laravel&#xff08;Laravel的项目搭建&#xff09; 一、项目简单搭建&#xff08;laravel&#xff09;1.首先我们确保使用国内的 Composer 加速镜像&#xff08;[加速原理](https://learnku.com/php/wikis/30594)&#xff09;&#xff1a;2.新建一个名为 Laravel 的项目&a…
阅读更多...
Java中创建线程的方式

Java中创建线程的方式

文章目录 创建线程ThreadRunnableCallable线程池创建方式自定义线程池线程池工作原理阻塞队列线程池参数合理配置线程池参数 创建线程 在Java中创建一个线程&#xff0c;有且仅有一种方式&#xff0c;创建一个Thread类实例&#xff0c;并调用它的start方法。 Thread 最经典也…
阅读更多...
Selenium使用注意事项:

Selenium使用注意事项:

find_element 和 find_elements 的区别 WebDriver和WebElement的区别 问题&#xff1a; 会遇到报错&#xff1a; selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector",&…
阅读更多...
离线下载linux mysql和mysql基本库

离线下载linux mysql和mysql基本库

下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/ 选择数据库版本&#xff0c;系统&#xff0c;系统版本信息 下载需要的rpm包&#xff0c;传入服务器&#xff0c;使用yum install xxx.rpm安装即可 mysql-community下载地址 https://dev.mysql.com/downloads/my…
阅读更多...
图论---匈牙利算法求二分图最大匹配的实现

图论---匈牙利算法求二分图最大匹配的实现

开始编程前分析设计思路和程序的整体的框架&#xff0c;以及作为数学问题的性质&#xff1a; 程序流程图&#xff1a; 数学原理&#xff1a; 求解二分图最大匹配问题的算法&#xff0c;寻找一个边的子集&#xff0c;使得每个左部点都与右部点相连&#xff0c;并且没有两条边共享…
阅读更多...
如何通过文件分发系统，实现能源电力企业文件的安全分发流转？

如何通过文件分发系统，实现能源电力企业文件的安全分发流转？

随着企业业务的快速发展&#xff0c;能源电力企业会在全国乃至全球&#xff0c;设立总部-分部-办事处/网点等多层级的结构&#xff0c;因此会涉及自动化的文件分发的业务场景。文件分发系统是一种将文件从一个地方自动传输到多个接收者的过程&#xff0c;可以提高工作效率&…
阅读更多...
Linux 复现Docker NAT网络

Linux 复现Docker NAT网络

Linux 复现Docker NAT网络 docker 网络的构成分为宿主机docker0网桥和为容器创建的veth 对构成。这个默认网络命名空间就是我们登陆后日常使用的命名空间 使用ifconfig命令查看到的就是默认网络命名空间&#xff0c;docker0就是网桥&#xff0c;容器会把docker0当成路由&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发