CSS简述（1）

CSS概述

CSS（层叠样式表，Cascading Style Sheets）是一种样式表语言，用于对HTML文档控制外观，定义布局。例如、css涉及字体、颜色、边距、高度、背景图像、高级定位等方面

CSS的主要用途：

1. 分离内容和样式

可将页面内容和表现形式分隔开，页面内容存放在HTML文档中，而用于定义表现形式的css在一个.css文件中或HTML文档的某一部分

2. 提供了丰富的样式描述

CSS提供了丰富的样式描述能力，可以精确地控制网页中每一个元素的外观和布局。例如，你可以使用CSS来设置文本的颜色、字体、大小、间距等，以及元素的背景色、边框、边距、内边距等。

3. 层叠性

CSS的层叠性（Cascading）是指当多个样式应用于同一个元素时，这些样式会按照一定的规则进行叠加和覆盖。这种机制使得你可以为不同的元素或情境定义不同的样式，并通过优先级规则来决定最终应用哪个样式。

基本语法-行内样式表

在HTML元素的style属性中直接进行添加CSS样式的方法

行内样式表直接在HTML元素中使用style属性，并在其中定义CSS属性和值。每个CSS属性和值之间使用分号（;）分隔，整个style属性的值使用引号（可以是单引号或双引号）包裹起来，但属性值本身（如颜色值）通常不需要引号

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- css的基本语法 行内样式表（直接写在标签内部的属性）--><p style="color: indianred;font-size: 20px;font-weight: bold;">静夜思</p><!-- px指的是像素单位 ，font-size字体所占的像素尺寸，font-weight字体加粗--><!-- 那么我们利用css的行内样式表去完成一首古诗的书写 --><p style="color: limegreen;font-size: 16px;">床前明月光</p><p style="color: limegreen;font-size: 16px;">疑是地上霜</p><p style="color: limegreen;font-size: 16px;">举头望明月</p><p style="color: limegreen;font-size: 16px;">低头思故乡</p><!-- 当我们使用css的行内样式表使发现还不能避免冗余 --></body>
</html>

 虽然行内样式表在某些情况下（如快速测试或一次性样式）可能很有用，但它们通常不推荐用于大型或复杂的项目，原因如下：

  1. 难以维护：如果样式分布在HTML文件的多个位置，管理和维护这些样式将会变得困难。
  2. 重复代码：如果你需要在多个元素上应用相同的样式，使用行内样式表会导致代码重复。
  3. 无法利用CSS的强大功能：行内样式表只能用于单个元素，因此你无法利用CSS的选择器、伪类、媒体查询等强大功能。

基本语法-内嵌样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 内嵌样式表 --><style>/* 对p标签的属性进行创建 *//* 标签选择器 */p{font-size: 16px;color: blueviolet;font-weight: 100;}</style></head><body><p>静夜思</p><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></body>
</html>

在HTML中的style标签中对p标签中样式进行定义

虽然内嵌样式表在某些情况下很有用，但通常不推荐在大型项目中过度使用它们。这是因为：

  1. 难以维护：如果你的样式分布在HTML文件的多个位置，那么管理和维护这些样式将会变得困难。
  2. 重复代码：如果你需要在多个元素上应用相同的样式，那么使用内嵌样式表将会导致重复的代码。
  3. 无法利用CSS的强大功能：内嵌样式表只能用于单个元素，因此你无法利用CSS的选择器、伪类、媒体查询等强大功能。

基本语法-外部样式表

外部样式表是将所有的样式放在或者多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式文件链接到HTML文档中

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link href="../css/new_file.css" rel="stylesheet"/><!-- rel="stylesheet"为指定导入的为一个样式表文件 --></head><body><p>静夜思</p><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></body>
</html>
p{font-size: 16px;color: blueviolet;font-weight: 100;}
  • rel: 定义了当前文档与被链接文档之间的关系。对于CSS文件，该值通常为stylesheet
  • type: 定义了被链接文档的MIME类型。对于CSS文件，该值通常为text/css,但在HTML5中，这个属性是可选的，因为浏览器默认将.css文件的MIME类型视为text/css
  • href: 指定了被链接文档的位置，可以是相对路径或绝对路径。在这个例子中，我们假设styles.css文件与HTML文件位于同一目录下

使用外部样式表的好处包括：

  • 易于维护：所有的样式规则都集中在一个或多个.css文件中，使得修改和更新样式变得更加容易。
  • 代码复用：你可以在一个或多个HTML文件中引用同一个外部样式表，从而实现样式的复用。
  • 提高性能：浏览器会缓存外部样式表文件，这意味着如果多个页面使用了相同的样式表，那么浏览器只需要下载一次样式表文件。
  • 内容与表现分离：使用外部样式表可以使HTML文件更加专注于内容，而CSS文件则专注于表现，这符合Web开发中的“内容与表现分离”的原则。

选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这是需要用到CSS选择器

选择器（Selector） 是CSS（层叠样式表）中用于“定位”或“选择”要应用样式规则的HTML元素的方式。选择器决定了哪些元素会受到影响，而声明块则包含了这些元素应如何展示的指令

常用的选择器：

标签选择器

通过标签选择器可以选择页面中所有的指定标签

标签名{}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 内嵌样式表 --><style>/* 对p标签的属性进行创建 *//* 标签选择器 */p{font-size: 16px;color: blueviolet;font-weight: 100;}</style></head><body><p>静夜思</p><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></body>
</html>

类选择器

通过标签的class属性值选中一组标签

.cclass属性值{}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 类选择器 */.p1{color: aqua;font-size: 20px;}.p2{color: aquamarine;font-size: 16px;}</style></head><body><p class="p1">静夜思</p><p class="p2">床前明月光</p><p class="p2">疑是地上霜</p><p class="p2">举头望明月</p><p class="p2">低头思故乡</p></body>
</html>

id选择器

通过标签的id属性选中一组标签

#id属性值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* id选择器 */#id1{color: aqua;font-size: 20px;}#id2{color: aquamarine;font-size: 16px;}</style></head><body><p id="id1">静夜思</p><p id="id2">床前明月光</p><p id="id2">疑是地上霜</p><p id="id2">举头望明月</p><p id="id2">低头思故乡</p></body>
</html>

通配选择器

可以用来选中页面中的所有标签

*{}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 标签选择器  */p{font-weight: 300;font-family: 宋体;}/* id选择器 */#id{color: blue;font-size: 16px;}/* 类选择器 */.p{color: azure;font-family: 楷体 ;}/* 通配选择器 */*{font-family: 楷体;}#id,.p{font-weight: bold;}</style></head><body><p id="id">静夜思</p><p class="p">床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p><h1>作者：李白</h1><b>类型：古诗</b></body>
</html>

文本

在CSS（层叠样式表）中，文本样式是一个重要的组成部分，用于控制网页中文本的外观和布局。以下是一些常见的CSS文本属性：

1. 颜色（color）

使用color属性定义文本颜色

p {  color: red;  
}

2.字体大小（font-size）

使用font-size属性可以设置文本字体大小

h1 {  font-size: 24px;  
}

也可以使用相对单位，如em、rem、%等

3. 字体家族 (Font Family)

使用font-family属性可以设置文本的字体

body {  font-family:楷体;  
}

如果第一个字体不可用，浏览器将尝试使用列表中的下一个字体

4.字体风格 (Font Style)

使用font-style属性可以设置文本是否为斜体

em {  font-style: italic;  
}

 5. 字体粗细 (Font Weight)

使用font-weight属性可以设置文本的粗细

strong {  font-weight: bold;  
}

 也可以使用数字值，如400（正常）和700（粗体），其中700表示的字体粗细与bold相同，这也是平常见到的字体粗体

6. 文本装饰 (Text Decoration)

使用text-decoration属性可以设置文本的下划线、上划线或删除线

a {  text-decoration: none; /* 移除下划线 */  
}

移除超链接文本的下划线

7. 文本对齐 (Text Align)

使用text-align属性可以设置文本的水平对齐方式

div {  text-align: center; /* 居中对齐 */  
}

 8. 文本缩进 (Text Indent)

使用text-indent属性可以设置文本的首行缩进

p {  text-indent: 2em; /* 首行缩进两个字符的宽度 */  
}

 9. 行高 (Line Height)

使用line-height属性可以设置文本行之间的垂直间距

p {  line-height: 1.5; /* 行高为字体大小的1.5倍 */  
}

10. 文本转换 (Text Transform)

使用text-transform属性可以控制文本的大小写

h1 {  text-transform: uppercase; /* 转换为大写 */  
}

11. 字间距 (Letter Spacing)

使用letter-spacing属性可以设置字符之间的间距

h2 {  letter-spacing: 2px; /* 字符间距增加2像素 */  
}

 12. 词间距 (Word Spacing)

使用word-spacing属性可以设置单词之间的间距

p {  word-spacing: 5px; /* 单词间距增加5像素 */  
}

13. 文本阴影 (Text Shadow)

使用text-shadow属性可以为文本添加阴影效果

h1 {  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 阴影向右下方偏移，模糊半径为4像素，颜色为半透明的黑色 */  
}

 应用：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.demo1{/* 设置字体颜色 */color: green; /* 设置字体的大小 */font-size: 20px;/* 设置相应字体 */font-family: 楷体;/* 设置字体的加粗 */font-weight: 700;/* 设置字体格式--italic(斜体) */font-style: italic;/* 设置文本的对齐方式————(默认left)*/text-align: left;/* text—...   对文本的一些修饰 *//* 设置行高 */line-height: 30px;/* 指定字符的间距 *//* 中文 */letter-spacing: 5px;/* 英文（分隔单词） */word-spacing: 10px;/* 段落首行缩进  em---当前文档中一个字符的大小 */text-indent: 2em;}a{/* 去除超链接标签的下划线 */text-decoration: none;/* none表示什么都没有，去除原有的多余修饰 */}</style></head><body><p class="demo1"">在刚过去的一周，两站世界乒联（WTT）常规挑战赛在中国太原和巴西里约热内卢同时进行，均完美落幕。国乒再度包揽WTT太原赛的全部五项冠军，雨果·卡尔德拉诺同样在主场夺得WTT巴西赛的男单冠军。</p><a href="">百度</a></body>
</html>

背景

在CSS中，你可以使用多种属性来修饰元素的背景。以下是一些常用的CSS属性，用于定制元素的背景：

1. background-color：设置元素的背景颜色

div {  background-color: #f00; /* 红色背景 */  
}

 2. background-image：设置元素的背景图像

div {  background-image: url('image.jpg'); /* 使用指定的图片作为背景 */  
}

3. background-repeat：设置背景图像是否及如何重复。

  • repeat：默认值，水平和垂直方向都重复。

  • repeat-x：只在水平方向重复。

  • repeat-y：只在垂直方向重复。

  • no-repeat：不重复

div {  background-image: url('image.jpg');  background-repeat: no-repeat; /* 不重复背景图像 */  
}

4. background-position：设置背景图像的位置。

  • 可以使用关键字（如top, bottom, left, right, center）或百分比、像素值来定位

div {  background-image: url('image.jpg');  background-position: right top; /* 将背景图像定位到右上角 */  
}

5.  background-size：设置背景图像的大小。

  • 可以使用关键字（如cover, contain）或百分比、像素值来设置大小

div {  background-image: url('image.jpg');  background-size: cover; /* 确保背景图像覆盖整个元素区域，可能部分图像不可见 */  
}

6. background-attachment：设置背景图像是否固定或随页面滚动。

  • fixed：背景图像不会随页面的其余部分滚动。

  • local：背景图像与元素内容一起滚动。

  • scroll：默认值，背景图像随页面的其余部分一起滚动。

div {  background-image: url('image.jpg');  background-attachment: fixed; /* 固定的背景图像 */  
}

7.  background：这是一个简写属性，用于设置所有背景属性

div {  background: #f00 url('image.jpg') no-repeat right top fixed;  /* 简写形式，设置颜色、图像、不重复、位置（右上角）、固定 */  
}

注意：当使用多个背景图像时，后面的图像会覆盖前面的图像。你可以通过逗号分隔每个背景声明来设置多个背景图像。例如：

div {  background: url('image1.jpg') no-repeat left top, url('image2.jpg') no-repeat right bottom;  /* 左侧顶部显示image1.jpg，右侧底部显示image2.jpg */  
}

应用： 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">p{color: red;/* 背景颜色 */background-color: aquamarine;width:800px;height:600px;/* 背景图片 */background-image: url("../img/pear.jpg");/* 控制背景图片是否重复 */background-repeat: no-repeat;/* 背景位置 */background-position: center center;/* 背景尺寸 */background-size: 400px 400px;}</style></head><body><p>段落</p></body>
</html>

css列表、css伪类、透明度、块级、行级、行级块标签、Display、div和span、盒子模型见下篇

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

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

相关文章

2024.6.1 学习记录

2024.6.1 学习记录

1、面经复习 2、项目使用guthub action 完成CI/CD&#xff0c;使用rollup打包为es格式 3、代码随想录刷题复习
阅读更多...
Go语言-切片底层探索 —— 补充篇：切片和底层数组到底是什么关系？

Go语言-切片底层探索 —— 补充篇：切片和底层数组到底是什么关系？

之前的切片探索中&#xff0c;上篇通过一道算法题目&#xff0c;了解到切片的两大特性&#xff1a;一是&#xff1a;切片是引用类型&#xff0c;指向底层数组&#xff0c;修改其底层数组的时候&#xff0c;会影响切片中的值。二是&#xff1a;向切片中添加元素的时候&#xff0…
阅读更多...
半导体光子电学期末笔记1: 电磁光学基本理论

半导体光子电学期末笔记1: 电磁光学基本理论

Chapter 2: 电磁光学基本理论 电磁光学理论概述 真空中麦克斯韦方程组[p9] 在自由空间中&#xff0c;麦克斯韦方程组可以写成如下形式&#xff1a; { ∇ H ϵ 0 ∂ E ∂ t (1) ∇ E − μ 0 ∂ H ∂ t (2) ∇ ⋅ E 0 (3) ∇ ⋅ H 0 (4) \begin{cases} \nabla \times \…
阅读更多...
Java——异常详解

Java——异常详解

异常五个主要关键字&#xff1a;throw、try、catch、finally、throws 1. 异常的概念与体系结构 1.1 异常的概念 在Java中&#xff0c;程序执行过程中发生的不正常行为被称为异常&#xff0c;如&#xff1a; 1. 算数异常 public static void main(String[] args) {System.ou…
阅读更多...
基于MingGW64 GCC编译Windows平台上的 libuvc

基于MingGW64 GCC编译Windows平台上的 libuvc

安装cmake 打开cmake官网 https://cmake.org/download/&#xff0c;下载安装包&#xff1a; 安装时选择将cmake加到系统环境变量里。安装完成后在新的CMD命令窗口执行cmake --version可看到输出&#xff1a; D:\>cmake --version cmake version 3.29.3 CMake suite mainta…
阅读更多...
牛客网刷题 | BC108 反斜线形图案

牛客网刷题 | BC108 反斜线形图案

目前主要分为三个专栏&#xff0c;后续还会添加&#xff1a; 专栏如下&#xff1a; C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读&#xff01; 初来乍到&#xff0c;如有错误请指出&#xff0c;感谢&#xff01; 描述 KiKi学习了循环&am…
阅读更多...
社交媒体数据恢复：Voxer

社交媒体数据恢复：Voxer

一、Voxer数据恢复教程 了解Voxer应用 Voxer是一款专门为iPhone和Android智能手机设计的免费对讲机应用&#xff0c;为用户提供即时的语音、文本、照片等信息发送和接收服务。该应用有点类似短信服务&#xff0c;但用声音代替文本。当你下载之后&#xff0c;如果不邀请朋友&a…
阅读更多...
Github查询语法

Github查询语法

转载自link 基础查询结构 一个关键词会匹配文件内容或文件路径。 多个关键词会匹配文件内容&#xff0c;只要包含关键词&#xff0c;就会出现在搜索结果中&#xff0c;不论前后顺序&#xff0c;是否是一个单词&#xff08;多个关键词之间没有空格&#xff09;。 还可以使用…
阅读更多...
Java中的JVM是什么？简要说明其工作原理

Java中的JVM是什么？简要说明其工作原理

Java虚拟机&#xff08;JVM&#xff09;概述 Java虚拟机&#xff08;Java Virtual Machine&#xff0c;JVM&#xff09;是Java技术的核心部分。它是一个抽象的计算机&#xff0c;可以解释和执行Java字节码。JVM提供了一个运行Java程序的环境&#xff0c;使得Java程序可以在各种…
阅读更多...
【面试】字节码文件是跨平台的吗？

【面试】字节码文件是跨平台的吗？

目录 1. 说明 1. 说明 1.字节码文件&#xff08;.class文件&#xff09;是跨平台的。2.字节码文件是Java源代码经过Java编译器&#xff08;javac&#xff09;编译后生成的中间代码文件&#xff0c;这些包含了Java虚拟机&#xff08;JVM&#xff09;指令&#xff0c;而不是特定…
阅读更多...
重复文件怎么查找并清理？电脑重复文件清理工具分享：4个

重复文件怎么查找并清理？电脑重复文件清理工具分享：4个

在日常使用电脑的过程中&#xff0c;我们不可避免地会遇到各种重复文件的问题。这些重复文件不仅占据了宝贵的存储空间&#xff0c;还可能导致系统性能下降&#xff0c;甚至引发一些不必要的问题。因此&#xff0c;如何有效地查找并清理这些重复文件成为了许多用户关注的焦点。…
阅读更多...
计算 x 的二进制表示中 1 的个数

计算 x 的二进制表示中 1 的个数

计算 x 的二进制表示中 1 的个数 代码如下&#xff1a; int func(int x){int countx 0;while (x>0){countx;x x & (x - 1);}return countx;} 完整代码&#xff1a; using System; using System.Collections.Generic; using System.ComponentModel; using System.Dat…
阅读更多...
STM32基于HAL库的HC-SR04模块超声波测距

STM32基于HAL库的HC-SR04模块超声波测距

文章目录 一、HC-SR04模块介绍二、创建工程1.选择芯片2.配置RCC、SY![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9d2a5b883f0e409eabb804e6da861277.png)3.配置串口14.配置定时器5.配置GPIO 三、Keil代码1.勾选Use MicroLIB2.创建SR04.c和SR04.h文件3.其他代码 …
阅读更多...
html three.js 引入.stl模型示例

html three.js 引入.stl模型示例

1.新建一个模块用于放置模型 <div id"chart_map" style"width:800px;height:500px"></div> 2. 引入代码根据需求更改 <!-- 在head或body标签内加入以下链接 --> <script src"https://cdn.jsdelivr.net/npm/three0.137/build/t…
阅读更多...
算法题-字符串排序

算法题-字符串排序

题目描述 给定n个字符串&#xff0c;请对n个字符串按照字典序排列。 输入描述: 输入第一行为一个正整数n(1≤n≤1000),下面n行为n个字符串(字符串长度≤100),字符串中只含有大小写字母。 输出描述: 数据输出n行&#xff0c;输出结果为按照字典序排列的字符串。 输入 #输…
阅读更多...
2.7HDR与LDR

2.7HDR与LDR

一、基本概念 1.基本概念 动态范围&#xff08;Dynamic Range&#xff09; 最高亮度 / 最低亮度 HDR High Dynamic RangeLDR Low Dynamic Range HDR与LDR和Tonemapping的对应关系&#xff1a; 我们常用的各种显示器屏幕&#xff0c;由于不同的厂家不同的工艺导致它们的…
阅读更多...
HALCON-从入门到入门-软件界面介绍

HALCON-从入门到入门-软件界面介绍

1.废话 从halcon12到halcon23&#xff0c;开发的IDE界面大差不差&#xff0c;简单说下界面上不同功能按键的分布&#xff0c;以及一些快捷键啥的&#xff0c;要是还有我没有总结到的&#xff0c;又比较好用的&#xff0c;欢迎大家补充一下。 1.菜单栏 从上看到下&#xff0c;…
阅读更多...
如何从0到设计一个CRM系统

如何从0到设计一个CRM系统

什么是CRM 设计开始之前&#xff0c;先来了解一下什么是CRM。CRM&#xff08;Customer Relationship Management&#xff09;是指通过建立和维护与客户的良好关系&#xff0c;达到满足客户需求、提高客户满意度、增加业务收入的一种管理方法和策略。CRM涉及到跟踪和管理客户的所…
阅读更多...
python深度学习入门-从零构建CNN和RNN

python深度学习入门-从零构建CNN和RNN

文章目录 第1章 基本概念1.1. 导数1.2. 链式法则1.3. 多输入函数的导数1.4. 多输入向量函数的导数1.5. 向量函数及其导数&#xff1a; 再进一步1.6. 包含两个二维矩阵数据的计算图 第2章 基本原理2.1. 监督学习概述2.2. 监督学习模型2.3. 线性回归2.3.1. 线性回归&#xff1a; …
阅读更多...
[激光原理与应用-94]：电控 - 低噪声运放的原理

[激光原理与应用-94]：电控 - 低噪声运放的原理

目录 一、什么是低噪声运放 1.1 什么是低噪声水平 1.2 什么是高增益 在电子工程中的应用 在通信领域的应用 在音频和视频处理中的应用 注意事项 1.3 什么是宽带宽 1.4 什么是低偏置电流 重要性 特点 解决方法 应用 二、低噪声运放的原理图 1. 基本构成 2. 设计…
阅读更多...
最新文章

Copyright @ 2022~2023