一名软件工程专业学生的前端之旅，记录自己对三件套（HTML、CSS、JavaScript）、jquery、Node.js、Vue、axios、小程序开发（uniapp）以及各种UI组件库、前端框架的学习。

【前端之旅】Web基础与开发工具

【前端之旅】HTML 大总结

@[TOC](CSS 三万字总结)

一、CSS简介

1、什么是CSS

CSS全称Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

2、CSS的好处及作用

可以实现内容与样式的分离，便于开发，样式复用，便于网站的后期维护。

页面的精确控制，让页面更精美。

页面外观美化：字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动，布局和定位。

3、CSS的初体验

CSS测试

效果如下：

二、基本用法

1、CSS语法模板

1、CSS的定义是由三个部分构成：

① 选择符（selector）：样式要应用于哪些元素

② 属性（properties）：何种样式，如字体，颜色

③ 属性的取值（value）：样式的取值：如12px

2、基本格式如下：

h1 {

color: crimson;

}

（选择符 { 属性:值 }）

3、如果需要对一个选择符指定多个属性时，用分号将所有的属性和值分开：

p { text-align: center; color: red}

（段落居中排列;并且段落中的文字为红色）

2、CSS引用方式

CSS引用方式有三种方式：

行内样式（直接写在标签内）

内部样式（写在style标签内）

外部样式（使用外部.css文件）

使用HTML标签的style属性定义，只对设置style属性的标签起作用，一般用于测试，不用于实际开发页面中。

优势：直观，很容易区分是给哪个标签添加的样式 。

劣势：代码冗余，样式过多的话，代码的可读性很差。

我是一个段落标签

在页面头部< head > 标签内通过style标签定义，对当前页面中所有符合样式选择器的标签都起作用。

优势：实现了标签和样式的分离，让代码的可读性更高。

我是一个段落标签

使用单独的 .css 文件定义，然后在页面中使用 link标签 或 @import指令 引入，最常用。

引入方式：外部样式（有两种）：链接式和导入式。

优势:实现了html文件和样式的分离，让代码的可读性更高，而且让代码的复用性也更高！

index.css

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

index.html

我是一个段落标签

无论是外部样式，内部样式还是行内样式，都会生效都能起到为标签添加样式，进行布局的作用。但是如果同时使用多种引入方式,就会产生覆盖效果，后写的样式覆盖先写的样式。

一般自己写案例时多使用内部样式，这样进行文件交换只发一个文件比较方便。 但在实际开发中我们基本不使用行内样式，使用最多的是外部样式引入方式！

3、选择器

选择器的用处：用于准确的选中元素（就是HTML种讲的标签），并赋予CSS样式。

作用：根据标签的名字找到标签，但是标签选择器会找到所有同名选择器。

我是段落标签1

我是段落标签2

作用：通过标签的class属性，选择对应的标签元素，类选择器的作用对多个标签（往往需要相同的样式）设置样式，一个标签可以设置多个class值，值与值之间用空格隔开，这个标签会具有所有class包含的样式。

我是段落标签1

我是段落标签2

我是段落标签3

作用：通过标签的id属性，选择对应的元素。类选择器可以选择多个，因为class属性不唯一，但是id选择器只能选择一个，因为id是唯一的。

我是段落标签

群组选择器是可以同时选择多个标签的选择器,全选择器顾名思义就是选择全部的标签。

我是段落标签

我是一级标签

我是二级标签

我是三级标签

层次选择器又分为后代选择器、子代选择器、相邻选择器、兄弟选择器。层次选择器是通过层次嵌套的关系进行选择标签的，块状标签可以嵌套内联标签（行内元素）和其他块状标签；内联标签只能嵌套文本和其他内联标签,但不能嵌套块状标签。

• 1
• 2
• 3
  • 11
  • 22
  • 33

我是段落标签1

我是段落标签2

我是段落标签3

我是段落标签4

我是段落标签1

我是段落标签2

我是段落标签3

我是段落标签4

我是段落标签1

我是段落标签2

我是段落标签3

我是段落标签4

伪（虚）类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。

最常见的用处就是可以对链接在不同状态下定义不同的样式效果。

格式 ：选择符:伪类 {属性: 值}

伪类和类不同，是CSS已经定义好的，不能像类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（虚类）的样式。

使用伪类设置链接不同状态的样式

4种a（锚）元素的伪类，可表示链接在4种不同的状态：link、visited、active、hover。

如果要给一个元素加4个伪类，一定要遵守一个顺序（link visited hover active）

快去CSDN找孙不坚1208

效果如下：

状态说明：初始时未点击时是蓝色，当鼠标放上去后（悬停状态）是红色，点击状态下是绿色，点击后离开是粉红色。

选择器权重：选择器权重值高，则应用其选择器样式对标签进行修饰。

内联样式，如: style=” ”，权值为1000。

ID选择器，如：#content，权值为100。

类、伪类和属性选择器，如.content，权值为10。

标签选择器、层次选择器、伪元素选择器，如div p，权值为1。

!important(并不是选择器而是修饰某个样式的值)>id选择器 > 类选择器> 标签选择器> 通配符选择器

权重高低通过精确度评判，精确度越高，权重越大。

复合选择器的权重计算方式一：

将基本选择器的权重相加之和，就是权重大小，值越大，权重越高。

比如：

#box ul li a .cur 权重是 100+1+1+1+10 = 113

#box li .cur 权重是 100+1+10 = 111

那么后面的样式就会被前面的样式层叠掉,那么最终a的颜色是red

复合选择器的权重计算方式二：

4个0计算方式 （0,0,0,0）分别对应（行内式个数,id选择器个数,类选择器个数,标签选择器个数）

两个选择器通过对比4个数的大小，确定权重关系，如何理解？

例如：#box ul li a .cur 有1个id，3个标签，1个类 那么 4个0 就是 (0,1,1,3)

例如：.nav ul .active .cur 有0个id，1个标签，3个类 那么 4个0 就是 (0,0,3,1)

怎么比较大小呢？

先比较第一个数，两个都是0，所以对比第二个数，因为第一个选择器第二个数是1，而后一个选择器权重是0所以前面的选择器权重大。

4、设置字体样式

常用的字体样式主要有5种：字体颜色 、字体样式、字体大小、字体粗细、字体倾斜

这是第一个段落标签

这是第二个段落标签

这是第三个段落标签

5、设置文本样式

常用的文本样式主要有8种：对齐方式 、行高、缩进、文本线处理、字距词距、文本换行、内容文本溢出处理。

我是一个段落我是一个段落 我是一个段落我是一个段落 我是一个段落我是一个段落 我是一个段落我是一个段落 我是一个段落我是一个段落 我是一个段落我是一个段落 我是一个段落我是一个段落 我是一个段落我是一个段落 我是一个段落我是一个段落 我是一个段落我是一个段落 我是一个段落我是一个段落

行高的应用：通过行高等于高度，实现单行文本居中对齐。

6、设置背景样式

常用背景样式中有5个主要的背景属性：

background-color: 指定填充背景的颜色。

background-image: 引用图片作为背景。

background-position: 指定元素背景图片的位置。

background-repeat: 决定是否重复背景图片。

background-attachment: 决定背景图是否随页面滚动。

背景定位(background-position)

background-position 属性（background-position: 值1 值2）用来控制背景图片在元素中的位置，实际上指定的是图片左上角相对于元素左上角的位置。

下面的例子中，设置了一个背景图片并且设置了 background-repeat 为 no-repeat,用 background-position 属性来控制它的位置，其中第一个数字表示 x 轴(水平)位置，第二个是 y 轴(垂直) 位置。

/* 例 1: 默认值 */background-position: 0 0; 例 2: 把图片向右移动 */background-position: 75px 0; 例 3: 把图片向左移动*/background-position: -75px 0; 例 4: 把图片向下移动 */background-position: 0 100px; */

background-position 属性可以用其它数值，比如关键词和百分比来指定，这比较实用，尤其是在元素尺寸不是用像素设置时。

关键词：通过设置X轴与Y轴来进行图片定位。

x 轴上：left center right

y 轴上：top center bottom

百分数:浏览器是以元素的百分比数值来设置图片的位置的。顺序方面和使用像素值时的顺序几乎一样，首先是 x 轴，其次是 y 轴

background-position: right top;background-position: 100% 50%;

7、设置列表样式

ul li ：list-style

none:去掉原点

circle：空心圆

decimal：数字

square：正方形

三、盒子模型

在Html学习中，我们知道Html中的每个元素（标签），都有自己的大小（占地面积），了解每个元素的大小，有助于我们更好的对页面进行布局，通过盒子模型的特征进行布局，是HTML布局的主要方式之一。

什么是盒子模型？

可以把页面上的每一个元素看成一个盒子，这是一个抽象的概念。

盒子模型的组成：盒子模型由内容（通过width和height指定的大小区域），内边距（内容区域和外框之间的空隙），边框（border）和外边距（当前元素和其他元素之间的距离）组成。

盒子由外边距、边框、内边距和内容组成

背景应用于由内容和内边距、边框组成的区域

width 和 height 指的是内容区域的宽度和高度

盒子实际占有宽度（或高度）为“内容+内边距+边框+外边距”。

1、盒子模型之内容

content：盒子里的“物品”，即盒子模型必须有的部分，可以是文字、图片、超链接，或其它盒子等。

内容的大小由宽度和高度属性定义

对于块级(display: block)元素：(缺省的宽度为充满父元素宽度，缺省的高度为内容的高度)可以通过定义宽度和高度改变大小。

对于行内 (display: inline)元素：（缺省的宽度为内容的宽度，缺省的高度为内容的高度）不可以通过定义宽度和高度改变大小。

常见的块级元素：

相关文章

前端开发的核心技术是什么（web前端核心技术）

827 2022-05-30

HTML5前端包括什么技术

827 2022-05-30

【一统江湖的大前端（8）】matter.js 经典物理

827 2022-05-30