【前端】CSS基础（学习笔记）

一、简介

1、HTML局限性

HTML只关注内容的语义，但是丑！

2、CSS概要

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。

CSS 是也是一种标记语言

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

由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离

3、CSS语法规范

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

h1 {color: red;font-size: 25px;
}
  1. 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
  2. 属性和属性值以“键值对”的形式出现
  3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
  4. 属性和属性值之间用英文“:”分开
  5. 多个“键值对”之间用英文“;”进行区分

所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方。

<head><style>h4 {color: blue;font-size: 100px;}</style>
</head>

4、CSS代码风格

样式格式书写：展开格式

样式大小写风格：样式选择器，属性名，属性值关键字全部使用小写字母

样式空格风格：属性值前面，冒号后面，保留一个空格、选择器（标签）和大括号中间保留空格

二、基础选择器

1、选择器作用

区分并选择标签

2、选择器分类

选择器分为基础选择器和复合选择器两个大类

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

3、标签选择器

标签选择器是用 HTML 标签名称作为选择器，按标签名称分类

h1 {color: red;
}

4、类选择器

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。一个标签可以有多个名字，空格隔开。

<div class=‘red’> 变红色 </div>

.red {color: red;
}

样式点定义，结构类调用。一个或多个，开发最常用

5、id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。

<div id=‘red’> 变红色 </div>

#red {color: red;
}

id 属性只能在每个 HTML 文档中出现一次。

样式#定义，结构id调用，只能调用一次，别人切勿使用

6、通配符选择器

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

* {margin: 0;padding: 0;
}

三、字体属性

1、字体系列

CSS 使用 font-family 属性定义文本的字体系列

div {font-family: Arial,"Microsoft Yahei", "微软雅黑";
}

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

一般情况下,如果有空格隔开的多个单词组成的字体，加引号。

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

2、字体大小

CSS 使用 font-size 属性定义字体大小。

px（像素）大小是我们网页的最常用的单位

谷歌浏览器默认的文字大小为16px。不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小（可以给 body 指定整个页面文字的大小）

3、字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

属性值描述
normal默认值
bold粗体
100~900normal：400；bold：700

4、文字样式

CSS 使用 font-style 属性设置文本的风格

属性值描述
normal默认值
italic斜体

很少使用斜体，反而要给em,i改为不倾斜

5、字体复合属性

字体属性可以把以上文字样式综合来写, 这样可以更节约代码

body { font: [font-style] [font-weight] font-size[/line-height] font-family;
}

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

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

四、文本属性

1、文本颜色

color 属性用于定义文本的颜色。

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

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

2、对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式。

属性值解释
left左对齐（默认）
right右对齐
center居中对齐

3、装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

属性值描述
none无（默认）
underline下划线
overline上划线（？）
line-through删除线

4、文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

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

div { text-indent: 10px;
}p { text-indent: 2em;
}

5、行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

五、CSS引入方式

1、内部样式表

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中

<style>
h4 {color: blue;font-size: 100px;
}
</style>

<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中。代码结构清晰，但是并没有实现结构与样式完全分离

使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是练习时常用的方式

2、行内样式表

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

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

style 其实就是标签的属性，在双引号中间，写法要符合 CSS 规范

可以控制当前的标签设置样式

由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用使用行内样式表设定 CSS，通常也被称为行内式引入

3、外部样式表

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

使用外部样式表设定 CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式

六、浏览器调试工具

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

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

右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。

Ctrl + 0 复原浏览器大小。

如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。

如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

七、复合选择器

1、后代选择器

后代选择器：选择父元素里面子元素

写法：把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */
  1. 元素1 和 元素2 中间用空格隔开
  2. 元素1 是父级，元素2 是子级，最终选择的是元素2
  3. 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
  4. 元素1 和 元素2 可以是任意基础选择器

2、子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。（亲儿子元素）

div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */
  1. 元素1 和 元素2 中间用 大于号 隔开
  2. 元素1 是父级，元素2 是子级，最终选择的是元素2
  3. 元素2 必须是亲儿子

3、并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明。通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */
  1. 元素1 和 元素2 中间用逗号隔开
  2. 逗号可以理解为和的意思
  3. 并集选择器通常用于集体声明

4、链接伪类选择器

伪类选择器用于向某些选择器添加特殊的效果

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

链接伪类选择器注意事项

  1. 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
  2. 记忆法：love hate 或者 lv 包包 hao 。
  3. 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
/* a 是标签选择器 所有的链接 */ 
a { color: gray;
}/* :hover 是链接伪类选择器 鼠标经过 */
a:hover { color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}

6、:focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素

input:focus { background-color:yellow;
}

八、元素显示模式

1、块元素

常见的块元素有h1~h6、p、div、ul、ol、li等，其中 div 标签是最典型的块元素

特点
  1. 比较霸道，自己独占一行。
  2. 高度，宽度、外边距以及内边距都可以控制。
  3. 宽度默认是容器（父级宽度）的100%。
  4. 是一个容器及盒子，里面可以放行内或者块级元素。
注意
  1. 文字类的元素内不能使用块级元素
  2. p 标签主要用于存放文字，因此 p 里面不能放块级元素，特别是不能放div
  3. h1~h6等都是文字类块级标签，里面也不能放其他块级元素

2、行内元素

常见的行内元素有 a、strong、b、em、i、del、s、ins、u、span等，其中span标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

特点
  1. 相邻行内元素在一行上，一行可以显示多个。
  2. 高、宽直接设置是无效的。
  3. 默认宽度就是它本身内容的宽度。
  4. 行内元素只能容纳文本或其他行内元素。
注意
  1. 链接里面不能再放链接
  2. 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

3、行内块元素

在行内元素中有几个特殊的标签： <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。称它们为行内块元素。

特点
  1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
  2. 默认宽度就是它本身内容的宽度（行内元素特点）。
  3. 高度，行高、外边距以及内边距都可以控制（块级元素特点）

4、元素显示模式转换

一个模式的元素需要另外一种模式的特性

转换为块元素：display:block;

转换为行内元素：display:inline;

转换为行内块：display: inline-block;

5、单行文字垂直居中

让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中

九、背景

1、背景颜色

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

p {background-color: pink;
}div {background-color: transparent;
}

2、背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置

div {background-image : none;
}p {background-image : url(https://rexhao.work/medias/logo.png);
}

注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。

3、背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数作用
repeat背景图像在纵向和横向上平铺（默认）
no-repeat背景图便不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向平铺

4、背景图片位置

利用 background-position 属性可以改变图片在背景中的位置

background-position: x y;

参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位

参数说明
length百分数 | 长度值
positiontop | center | bottom | left |right 方位名词
  1. 参数是方位名词
    1. 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
    2. 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
  2. 参数是精确单位
    1. 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
    2. 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
  3. 参数是混合单位
    1. 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y

5、背景图像固定（背景附着）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动，后期可以制作视差滚动的效果

background-attachment : scroll | fixed
参数作用
scroll背景图随着对象滚动
fixed背景图像固定

6、背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中，节约代码量。

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

background: transparent url(image.jpg) repeat-y fixed top;

7、背景色半透明

CSS3 为我们提供了背景颜色半透明的效果。

background: rgba(0, 0, 0, 0.3);
  1. 最后一个参数是 alpha 透明度，取值范围在 0~1之间
  2. 习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
  3. 背景半透明是指盒子背景半透明，盒子的内容不受影响
  4. CSS3 新增属性， IE9+ 版本浏览器才支持的。但现在实际开发，我们不太关注兼容性写法了，可以放心使用

十、CSS三大特性

1、层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖）另一个冲突的样式。层叠性主要 解决样式冲突的问题

相同优先级，后来居上

2、继承性

子标签会维承父标签的某些样式，如文本颜色和字号。（子承父业）

text-,font-,line-,color属性

行高的继承
body {font: 12px/1.5 Microsoft YaHei;
}

行高可以跟单位也可以不跟单位

如果子元素没有设置行高：继承父元素的行高为 1.5，此时子元素的行高是 ：当前子元素的文字大小 * 1.5

优势就是里面的子元素可以根据自己文字大小自动调整行高

3、优先级

选择器权重
继承、*0,0,0,0
元素选择器0,0,0,1
类选择器、伪类选择器0,0,1,0
ID选择器0,1,0,0
行内元素1,0,0,0
!important无穷大
  1. 权重是有4组数字组成，但是不会有进位。
  2. 等级判断从左向右，如果某一位数值相同，则判斯下一位数值
  3. 继承的权重是0，如果该元素没有直接选中 ，不管父元素权重多高，子元素得到的权重都是0。

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

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

相关文章

blender 粒子系统 roughness 属性

blender 粒子系统 roughness 属性

粒子系统中的Roughness是一种用来控制粒子的随机性和不规则性的属性&#xff0c;它可以影响粒子的发射方向、速度、大小、旋转等。Roughness有以下几个子属性&#xff1a; - **Uniform**&#xff1a;这个属性用来控制粒子的发射方向的随机性&#xff0c;即粒子在法线方向上的偏…
阅读更多...
托盘四向穿梭车自动化密集库供应｜单机智能向系统智能跨越的HEGERLS托盘四向车系统

托盘四向穿梭车自动化密集库供应｜单机智能向系统智能跨越的HEGERLS托盘四向车系统

随着物流产业的迅猛发展&#xff0c;托盘四向穿梭式自动化密集仓储系统可认为是在穿梭车货架系统基础上提出的一种新仓储概念。托盘四向穿梭式立体库因其在流通仓储体系中所具有的高效密集存储功能优势、运作成本优势与系统化智能化管理优势&#xff0c;已发展为仓储物流的主流…
阅读更多...
喜讯：加速度商城系统全系列产品品牌全新升级为Shopfa

喜讯：加速度商城系统全系列产品品牌全新升级为Shopfa

2月1日讯&#xff1a;经过1年多的品牌文化塑造&#xff0c;深圳市加速度软件开发有限公司经过研究决定&#xff0c;将旗下的多商户商城系列、小程序商城系列、B2B商城系列、供应商集采系列、电子元器件商城系列、跨境独立站商城系列、MRO工业品商城系列、外卖商城系列、智慧零售…
阅读更多...
重写 AppiumService 类，添加默认启动参数，并实时显示启动日志

重写 AppiumService 类，添加默认启动参数，并实时显示启动日志

一、前置说明 在Appium的1.6.0版本中引入了AppiumService类&#xff0c;可以很方便的通过该类来管理Appium服务器的启动和停止。经过测试&#xff0c;使用该类的实例执行关闭server时&#xff0c;并没有释放端口号&#xff0c;会导致第二次启动时失败。另外&#xff0c;使用该…
阅读更多...
6.2 U-boot 顶层 Makefile

6.2 U-boot 顶层 Makefile

一、U-boot工程目录分析 如果要分析uboot源码&#xff0c;首先要将uboot源码进行编译&#xff0c;编译需要在Ubuntu进行&#xff0c;把uboot文件放在一个目录下。 编译完成后的文件是这样&#xff1a; 我们需要看的文件夹如下。 1. arch 文件夹 从上图可以看出有很多架构&…
阅读更多...
geolife笔记：整理处理单条轨迹

geolife笔记：整理处理单条轨迹

以 数据集笔记 geolife &#xff08;操作篇&#xff09;_geolife数据集-CSDN博客 轨迹为例 1 读取数据 import pandas as pd data pd.read_csv(Geolife Trajectories 1.3/Data//000/Trajectory/20081023025304.plt,headerNone, skiprows6,names[Latitude, Longitude, Not_Im…
阅读更多...
【GEE笔记】在线分类流程，标注样本点、分类和精度评价

【GEE笔记】在线分类流程，标注样本点、分类和精度评价

GEE在线分类流程 介绍 GEE&#xff08;Google Earth Engine&#xff09;是一个强大的地理信息处理平台&#xff0c;可以实现在线的遥感影像分析和处理。本文将介绍如何使用GEE进行在线的分类流程&#xff0c;包括标注样本点、分类和精度评价。本文以2020年5月至8月的哨兵2影像…
阅读更多...
什么是散列函数

什么是散列函数

散列函数是一种公开的数学函数。散列函数运算的输入信息也可叫作报文。散列函数运算后所得到的结果叫作散列码或者叫作消息摘要。散列函数具有如下一些特点&#xff1a; &#xff08;1&#xff09;不同内容的报文具有不同的散列码&#xff0c;而一旦原始报文有任何改变&#xf…
阅读更多...
__attribute__ 详解

__attribute__ 详解

GNU C的一大特色（却不被初学者所知）就是__attribute__机制。__attribute__可以设置函数属性（Function Attribute）、变量属性（Variable Attribute）和类型属性（Type Attribute）。 特征： __attribute__书写特征是： __attribute__前后都有两个下划线，并切后面会紧…
阅读更多...
文件管理和操作工具Path Finder mac功能介绍

文件管理和操作工具Path Finder mac功能介绍

Path Finder mac是一款Mac平台上的文件管理和操作工具&#xff0c;提供了比Finder更丰富的功能和更直观的用户界面。它可以帮助用户更高效地浏览、复制、移动、删除和管理文件&#xff0c;以及进行各种高级操作。 Path Finder mac软件功能 - 文件浏览&#xff1a;可以快速浏览文…
阅读更多...
【数据结构 — 排序 — 插入排序】

【数据结构 — 排序 — 插入排序】

数据结构 — 排序 — 插入排序 一.排序1.1.排序的概念及其运用1.1.1排序的概念1.1.2排序运用1.1.3 常见的排序算法 二.插入排序2.1.直接插入排序2.1.1.算法讲解2.1.2.代码实现2.1.2.1.函数定义2.1.2.2.算法接口实现2.1.2.3.测试代码实现2.1.2.4.测试展示 2.2.希尔排序2.2.1.算法…
阅读更多...
ASO优化：帮助实现企业和用户的共赢

ASO优化：帮助实现企业和用户的共赢

大数据时代APP拉获新客&#xff0c;ASO优化应该这么玩&#xff01; 市场那么大&#xff0c;用户那么广。企业设计的APP如何在茫茫人群中精准地把自己送到用户面前&#xff0c;并与ta产生沟通呢。随着时代的发展&#xff0c;数据成为企业竞争的核心。APP的营销发展离不开数据推…
阅读更多...
gcc tips - GCC使用技巧与高级特性

gcc tips - GCC使用技巧与高级特性

目录 1. 获取 GCC 编译器预定义的宏 2. 列出依赖的头文件 3. 保存预处理结果到文件&#xff08;展开define, 展开include header&#xff09; 4. 写回调跟踪记录函数运行 -finstrument-functions 5. -fdump-rtl-expand 画函数调用关系图 GCC&#xff0c;全称GNU Compiler …
阅读更多...
第一课【习题】三方库

第一课【习题】三方库

三方组件是开发者在系统能力的基础上进行了一层具体功能的封装&#xff0c;对其能力进行拓展的工具 。 可以通过ohpm uninstall 指令下载指定的三方库 lottie使用loadAnimation方法加载动画。 通过ohpm安装lottie后&#xff0c;在哪个文件中会生成相关的配置信息&#xf…
阅读更多...
C++ - 哈希

C++ - 哈希

在顺序结构以及平衡树中&#xff0c;由于元素关键码与其存储位置之间没有对应的关系&#xff0c;因此在查找一个元素时&#xff0c;必须要经过关键码的多次比较&#xff1b;比如顺序表中需要从表头开始依次往后比对寻找&#xff0c;查找时间复杂度为 O(N)&#xff0c;平衡树中需…
阅读更多...
快速登录界面关于如何登录以及多账号列表解析以及config配置文件如何读取以及JsLogin模块与SdoLogin模块如何通信(4)

快速登录界面关于如何登录以及多账号列表解析以及config配置文件如何读取以及JsLogin模块与SdoLogin模块如何通信(4)

1、### Jslogin模块与前端以及JsLogin模块与Sdologin的交互 配置文件的读取: <CompanyIdForQq value"301"/> <CompanyIdForWx value"300"/><CompanyIdForWb value"302"/><qq value"https://graph.qq.com/oauth2.0/au…
阅读更多...
freertos统计任务运行时间和堆栈使用情况（快速应用篇）

freertos统计任务运行时间和堆栈使用情况（快速应用篇）

这里写自定义目录标题 背景配置FreeRTOSCconfig.h统计时钟源任务中打印 背景 本文直接讲解如果快速实现freertos打印任务运行时间&#xff0c;堆栈使用情况等调试信息&#xff0c;不讲解原理。 配置 FreeRTOSCconfig.h 增加以下代码&#xff1a; #define configUSE_TRACE_…
阅读更多...
git clone 命令

git clone 命令

git clone 是一个用于克隆&#xff08;clone&#xff09;远程 Git 仓库到本地的命令。 git clone 可以将一个远程 Git 仓库拷贝到本地&#xff0c;让自己能够查看该项目&#xff0c;或者进行修改。 git clone 命令&#xff0c;你可以复制远程仓库的所有代码和历史记录&#xf…
阅读更多...
template

template

类型&#xff1a; string 详细&#xff1a; 一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略&#xff0c;除非模板的内容有分发插槽。 如果值以 # 开始&#xff0c;则它将被用作选择符&#xff0c;并使用匹配元素的 innerHTML 作为…
阅读更多...
深入了解 Axios 拦截器

深入了解 Axios 拦截器

深入了解 Axios 拦截器 本文将向您介绍什么是 Axios 拦截器以及如何使用它们。通过分步指南和示例代码&#xff0c;您将学习如何使用 Axios 拦截器来处理请求和响应&#xff0c;并添加授权和错误处理。 什么是 Axios 拦截器&#xff1f; Axios 拦截器允许您在请求发送和响应…
阅读更多...
最新文章

Copyright @ 2022~2023