前端学习第三天-css基础

1. CSS简介

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

那么如何实现结构和样式的完全分离呢？

1.1 什么是CSS

简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

1.2 CSS发展历史

  1. 1996年 CSS 1.0 规范面世，其中加入了字体、样色等相关属性。

  2. 1998年 CSS 2.0 规范推出，这个版本的 CSS 也是最广为人知的一个版本。

  3. 2004年 CSS 2.1 规范推出，对 CSS 2.0 进行了一些小范围的修改，删除了一些浏览器支持不成熟的属性。

  4. 2010年 CSS 3.0 规范推出，将 CSS3 分成了不同的模块，例如盒子模型、背景和边框、文字特效等模块。

2. CSS使用方式(4种)

2.1 行内样式

<!DOCTYPE html>
<html lang="en"><head><title>This is title</title></head><body><p style="font-size: 16px; color: red;">大家好</p></body>
</html>

行内样式需要写到标签的 style 属性值中。

2.2 内部样式表

<!DOCTYPE html>
<html lang="en"><head><title>This is title</title><style>p {font-size: 16px;color: red;}</style></head><body><p>Hello everyone</p></body>
</html>

内部样式需要写到 <style> 标签中。

2.3 外部样式表

  • 链接式

将样式写到单独的文件中，文件的扩展名为 .css。例如，index.css 文件中有如下样式：

p {font-size: 16px;color: red;
}

然后通过 <link> 元素将 index.css 文件引入到页面中：

<!DOCTYPE html>
<html lang="en"><head><title>This is title</title><link rel="stylesheet" type="text/css" href="./css/index.css"></head><body><p>我是优秀的开发工程师</p></body>
</html>

2.4 导入外部样式表

css文件中通过@import 引入其他css文件

@import url(global.css);

2.5css使用方式总结

  • 定义在外部文件（外链样式）：开发中主要是通过这种形式定义样式。（推荐）

  • 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。

  • 在css文件导入外部样式表(导入样式)：通过import 引入其他css文件。

  • 定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。（不推荐）

    3. CSS基本语法

    CSS 样式由一系列的规则集组成，规则集中有一条或多条样式声明。

  • 选择器通常是您需要改变样式的 HTML 元素。

  • 每条样式声明包含着一对属性名和属性值。

  • 属性名和属性值之间以冒号（:）隔开。

  • 样式规则之间以分号（;）隔开。

4. CSS字体样式属性

4.1 font-size:字号大小

font-size属性用于设置字号。推荐使用像素单位px。

4.1.1 px

  • px单位名称为像素，像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。

  • 一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。

  • 大多数浏览器的默认字体大小是16px。

4.1.2 em

em是相对字体长度单位。如果用于font-size属性本身，则是相对于父元素的font-size。

em单位有如下特点：

  • em的值并不是固定的;

  • em会继承父级元素的字体大小。

4.2 font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{ font-family:"Times New Roman",微软雅黑;
}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

注意:

  1. 现在网页中普遍使用16px、字体是微软雅黑。

  2. 各种字体之间必须使用英文状态下的逗号隔开。

  3. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。

  4. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

4.3 font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用css 来实现。

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

属性值描述
normal默认值。定义标准的字符。
bold定义粗体字符。
bolder定义更粗的字符。
lighter定义更细的字符。
100~900定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。

4.4 font-style:字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用css 来实现，但是css 是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

注意:

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

4.5 font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style  font-weight  font-size  font-family;
}

注意：

1.使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

2.其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

5. CSS注释

CSS规则是使用 /* 需要注释的内容 */ 进行注释的。

p{font-size: 14px;                 /* 所有的字体是14像素大小*/}

6. 选择器

6.1 基本选择器（重点）

6.1.1 标签选择器

p {font-size: 16px;color: red;
}

选择页面中所有的 <p> 元素，给它们设置字体大小和颜色。

6.1.2 Class 选择器

.box {font-size: 20px;color: green;
}

选择页面中 class 属性值中包含 box 类名的所有元素，给它们设置字体大小和颜色。

6.1.3 ID 选择器

#nav {font-size: 24px;color: blue;
}

选择页面中 id 属性值是 nav 的元素，给它设置字体大小和颜色。

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。 类选择器（class） 好比人的名字， 是可以多次重复使用的。 id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

6.1.4 通配符选择器

* {font-size: 24px;color: blue;
}

6.1.5 总结-CSS的基本选择器

  • 标签选择器：针对一类标签

  • ID选择器：针对某一个特定的标签使用

  • 类选择器：针对你想要的所有标签使用

  • 通用选择器（通配符）：针对所有的标签都适用（不建议使用）

6.2伪类选择器(重点)

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果等。

为了和我们刚才学的类选择器相区别，类选择器是一个点比如 .demo {} 而我们的伪类选择器用 2个点 就是冒号比如 :link{}

6.2.1 链接伪类选择器

/* 未访问的链接 */
:link   /* 已访问的链接 */
:visited 
/* 鼠标移动到链接上 */
:hover
/* 选定的链接 */
:active

注意:

  • a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！

  • a:active 必须位于 a:hover 之后，这样才能生效！

  • a:link会对拥有a标签的属性href=""，即拥有实际链接地址的a对象发生效果

7. CSS外观属性

7.1 color：文本颜色

属性名color
属性值预定义的颜色名 | 十六进制值的颜色值 | RGB颜色值
默认值在不同浏览器中，默认值可能不同，但是在大部分浏览器中默认值为黑色。
描述设置文本的颜色

注意:

1.一般情况下颜色我们喜欢小写字母 比如 #ff0000。

2.css颜色简写比如 #ff0000 可以简写为#f00， #ff00ff 简写为 #f0f。

7.2 颜色半透明(css3)

文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：

/* a 是alpha透明的意思,取值范围 0~1之间  */
color: rgba(r,g,b,a)    
color: rgba(0,0,0,0.3)

7.3 line-height：行间距

行高是指文本行基线间的垂直距离:基线与基线之间的距离。

属性名line-height
属性值normal |数字 | 长度值 | 百分比
默认值normal
描述设置文本的行高

  • normal：默认值，行高由浏览器自动处理。

  • 数字：行高 = 数字 * 字体大小，例如，line-height: 2;font-size: 16px;，则行高等于：2 * 16px = 32px

  • 长度值：使用长度值设置行高，例如，line-height: 32px。

基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。

一般项目中的页面的行高设置比字号大7~8像素左右就可以了, 比如当前使用14像素的字号，行高设为24像素左右合适。

7.4 text-align：水平对齐方式

属性名text-align
属性值left | right | center | justify
默认值如果文本方向为ltr，则默认值为left；如果文本方向为rtl，则默认值为right
描述设置文本在水平方向上的对齐方式

  • left：内容左对齐。

  • center：内容居中对齐。（重点）

  • right：内容右对齐。

  • justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。

7.5 text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

7.6 text-decoration：文本修饰

文本修饰

属性名text-decoration
属性值none | underline | overline | line-through
默认值none
描述对文本进行修饰

  • none：指定文字无装饰

  • underline：指定文字的装饰是下划线

  • overline：指定文字的装饰是上划线

  • line-through：指定文字的装饰是贯穿线

7.7 letter-spacing：字符间距

字符间距

属性名letter-spacing
属性值normal | 长度值
默认值normal
描述增加或减少字符间的空白（字符间距）

  • normal：默认间隔

  • 长度值：用长度值指定间隔。可以为负值。

7.8 word-spacing（单词）

单词间距

属性名word-spacing
属性值normal | length
默认值normal
描述增加或减少单词间的空白(即字间隔)

  • normal：默认间隔

  • length：用长度值指定间隔。可以为负值。

7.9 文字阴影(CSS3)

可以给文字添加阴影效果

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

值描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊的距离。
color可选。阴影的颜色。

  • 前两项是必须写的。 后两项可以选写。

  • /* 多重阴影 */
text-shadow: -5px 0px cyan, 5px 0px red;

8. CSS书写规范

开始就形成良好的书写规范，是你专业化的开始。

8.1 标识符规范

【建议】小写。

示例：

/* good */
.username{color:red;
}
​
/* bad */
.USERNAME{COLOR:RED;
}

8.2 属性规范

【强制】 属性定义必须另起一行。

示例：

/* good */
.selector{margin: 0;padding: 0;
}
​
/* bad */
.selector { margin: 0; padding: 0; }

【强制】 属性定义后必须以分号结尾。

示例：

/* good */
.selector {margin: 0;
}
​
/* bad */
.selector {margin: 0
}

9.开发者工具（chrome）

此工具是我们的必备工具，以后代码出了问题，我们首先就是：

“按F12”或者是 “shift+ctrl+i” 打开开发者工具。

  1. ctrl+滚轮可以放大开发者工具代码大小。

  2. 左边是HTML元素结构 右边是CSS样式。

  3. 右边CSS样式可以改动数值和颜色查看更改后效果。

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

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

相关文章

USB4之ASM2464PD与ASM2464PDX兼容与运用

USB4之ASM2464PD与ASM2464PDX兼容与运用

首先在NVMe上运用: 一&#xff1a;ASM2464PD&#xff08;现在可以做带PD的方案&#xff09; 二&#xff1a;ASM2464PDX 1&#xff1a; Application Guide- CFX card reader NVMe SSD 2&#xff1a;ASM2464PDX Application Guide- NVMe SSD x4 with data clone 三&#xff…
阅读更多...
C习题003：球筐投球（一排）

C习题003：球筐投球（一排）

题目 输入样例 在这里给出一组输入。例如&#xff1a; 5 3 7 5 7 7 3 1 5 3 1 5 2 4 4 4输出样例 在这里给出相应的输出。例如&#xff1a; 12 10 12 16 8代码长度限制 16 KB 时间限制400 ms 内存限制 64 MB 栈限制 8192 KB 代码 #include<stdio.h> int main() {int…
阅读更多...
新一代湖仓集存储，多模型统一架构，高效挖掘数据价值

新一代湖仓集存储，多模型统一架构，高效挖掘数据价值

星环科技TDH一直致力于给用户带来高性能、高可靠的一站式大数据基础平台&#xff0c;满足对海量数据的存储和复杂业务的处理需求。 同时在易用性方面持续深耕&#xff0c;降低用户开发和运维成本&#xff0c;让数据处理平民化&#xff0c;助力用户以更便捷、高效的方式去挖掘数…
阅读更多...
jmeter如何请求访问https接口

jmeter如何请求访问https接口

添加线程组http请求 新建线程组&#xff0c;添加http请求 填入协议&#xff0c;ip&#xff0c;端口&#xff0c;请求类型&#xff0c;路径&#xff0c;以及请求参数&#xff0c;查看结果树等。 然后最关键的一步来了。 导入证书 步骤&#xff1a;获取证书&#xff0c;重新生…
阅读更多...
基于SSM的高校竞赛和考级查询系统（有报告）。Javaee项目。ssm项目。

基于SSM的高校竞赛和考级查询系统（有报告）。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的高校竞赛和考级查询系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Sp…
阅读更多...
Java中的动态代理与Spring AOP编程

Java中的动态代理与Spring AOP编程

第一章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;在Java里&#xff0c;动态代理和Spring AOP&#xff08;面向切面编程&#xff09;是两个能让代码更加灵活、更加干净的强大工具。作为一名Java程序员&#xff0c;小黑觉得掌握它们对于写出高质量的代码来说非常…
阅读更多...
通过GitHub探索Python爬虫技术

通过GitHub探索Python爬虫技术

1.检索爬取内容案例。 2.找到最近更新的。(最新一般都可以直接运行) 3.选择适合自己的项目&#xff0c;目前测试下面画红圈的是可行的。 4.方便大家查看就把代码粘贴出来了。 #图中画圈一代码 import requests import os import rewhile True:music_id input("请输入歌曲…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：位置设置）

鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：位置设置）

设置组件的对齐方式、布局方向和显示位置。 说明&#xff1a; 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 align align(value: Alignment) 设置容器元素绘制区域内的子元素的对齐方式。 卡片能力&#xff1a; 从API…
阅读更多...
【系统分析师】-系统配置与性能评价

【系统分析师】-系统配置与性能评价

1、性能指标 主频&#xff1a;又称时钟频率&#xff0c;1GHZ表示1秒有1G个时钟周期 1s10^9ns 主频外频 * 倍频 时钟周期 主频的倒数指令周期&#xff1a;取出并执行一条指令的时间 总线周期&#xff1a;一个访存储器或IO操作所用时间平均执行周期数&#xff1a;CPI表示…
阅读更多...
如何解决幻兽帕鲁/Palworld服务器联机游戏时的丢包问题？

如何解决幻兽帕鲁/Palworld服务器联机游戏时的丢包问题？

如何解决幻兽帕鲁/Palworld服务器联机游戏时的丢包问题&#xff1f; 等待服务器维护&#xff1a;首先&#xff0c;确保网络连接稳定&#xff0c;然后查看游戏官方或社区论坛&#xff0c;了解是否有服务器维护的消息。这是解决丢包问题的一种直接且有效的方法。 更新显卡驱动&a…
阅读更多...
Siemens-NXUG二次开发-获取prt中体与类型、实体面与类型、实体边与类型、边上点的Tag标识[Python UF][20240302]

Siemens-NXUG二次开发-获取prt中体与类型、实体面与类型、实体边与类型、边上点的Tag标识[Python UF][20240302]

Siemens-NXUG二次开发-获取prt中体与类型、实体面与类型、实体边与类型、边上点的Tag标识[Python UF][20240302] 1.python uf函数1.1 NXOpen.UF.Obj.CycleObjsInPart1.2 NXOpen.UF.Obj.AskTypeAndSubtype1.3 NXOpen.UF.Modeling.AskBodyFaces1.4 NXOpen.UF.Modeling.AskFaceEdg…
阅读更多...
RISC-V特权架构 - 机器模式下的异常处理

RISC-V特权架构 - 机器模式下的异常处理

RISC-V特权架构 - 机器模式下的异常处理 1 进入异常1.1 从mtvec 定义的PC 地址开始执行1.2 更新CSR 寄存器mcause1.3 更新CSR 寄存器mepc1.4 更新CSR 寄存器mtval1.5 更新CSR 寄存器mstatus 2 退出异常2.1 从mepc 定义的PC 地址开始执行2.2 更新CSR 寄存器mstatus 3 异常服务程…
阅读更多...
Android Tombstone 分析

Android Tombstone 分析

1.什么是tombstone Tombstone是指在分布式系统中用于标记数据已被删除的记录&#xff0c;通常包含删除操作的时间戳和相关信息。 当一个动态库&#xff08;native程序&#xff09;开始执行时&#xff0c;系统会注册一些连接到 debuggerd 的signal handlers。当系统发生崩溃时…
阅读更多...
Spark Shuffle Tracking 原理分析

Spark Shuffle Tracking 原理分析

Shuffle Tracking Shuffle Tracking 是 Spark 在没有 ESS(External Shuffle Service)情况&#xff0c;并且开启 Dynamic Allocation 的重要功能。如在 K8S 上运行 spark 没有 ESS。本文档所有的前提都是基于以上条件的。 如果开启了 ESS&#xff0c;那么 Executor 计算完后&a…
阅读更多...
MySQL 表的基本操作，结合项目的表自动初始化来讲

MySQL 表的基本操作，结合项目的表自动初始化来讲

有了数据库以后&#xff0c;我们就可以在数据库中对表进行增删改查了&#xff0c;这也就意味着&#xff0c;一名真正的 CRUD Boy 即将到来&#xff08;&#x1f601;&#xff09;。 查表 查看当前数据库中所有的表&#xff0c;使用 show tables; 命令 由于当前数据库中还没有…
阅读更多...
基于Python3的数据结构与算法 - 09 希尔排序

基于Python3的数据结构与算法 - 09 希尔排序

一、引入 希尔排序是一种分组插入排序的算法。 二、排序思路 首先取一个整数d1 n/2&#xff0c;将元素分为d1个组&#xff0c;每组相邻量取元素距离为d1&#xff0c;在各组内直接进行插入排序&#xff1b;取第二个整数d2 d1/2&#xff0c; 重复上述分组排序过程&#xff0…
阅读更多...
CSS 自测题 -- 用 flex 布局绘制骰子（一、二、三【含斜三点】、四、五、六点）

CSS 自测题 -- 用 flex 布局绘制骰子（一、二、三【含斜三点】、四、五、六点）

一点 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>css flex布局-画骰子</title><sty…
阅读更多...
Unity 切换场景

Unity 切换场景

场景切换前必须要将场景拖动到Build中 同步加载场景 using System.Collections; using System.Collections.Generic; //using UnityEditor.SearchService; using UnityEngine; // 场景管理 需要导入该类 using UnityEngine.SceneManagement;public class c3 : MonoBehaviour {…
阅读更多...
redis五大基础类型【重点】

redis五大基础类型【重点】

之前写过一点小知识&#xff1a;https://blog.csdn.net/qq_45927881/article/details/134959181?spm1001.2014.3001.5501 参考链接 https://xiaolincoding.com/redis/data_struct/command.html#%E4%BB%8B%E7%BB%8D 目录 1. string&#xff08;字符串&#xff09;2. Hash&#…
阅读更多...
MySql安全加固：配置不同用户不同账号禁止使用旧密码禁止MySql进程管理员权限

MySql安全加固：配置不同用户不同账号禁止使用旧密码禁止MySql进程管理员权限

MySql安全加固&#xff1a;配置不同用户不同账号&禁止使用旧密码&禁止MySql进程管理员权限 1.1 检查是否配置不同用户不同账号1.2 检查是否禁止使用旧密码1.3 禁止MySql进程管理员权限 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023