html和css学习

1.1.1 介绍

在学习了基本HTML标签和样式后，接下来学习前端开发的第二门技术。

我们发现，虽然标签的属性可以调整一些样式，但是效果不够理想，而我们更愿意把样式编写在 标签中，让页面设计更美观更丰富，实际上，这是通过CSS实现的。那么什么是CSS呢？

如果说，HTML是网页的"素颜"，那么CSS就是页面的"美妆师"，它就是让网页的外观更漂亮！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0oSG6tBO-1656942846680)(assets/css1.jpg)]

• CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS）

• 简单的说，它是用于设置和布局网页的计算机语言，会告知浏览器如何渲染页面元素

• HTML负责界面的结构，CSS负责美化界面

• 例如，调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等

• 所谓 : 层叠性指的是样式的优先级，当产生冲突时以优先级高的为准

• 所谓：是指丰富的样式外观。拿边框距离来说，允许设置边框，允许设置边框与框内元素的距离，允许设置边框与边框的距离等等。

1.1.2 CSS的组成

• CSS是一门基于规则的语言 ，你能定义用于你的网页中特定元素的一组样式规则
• 这里面提到了两个概念，一是特定元素，二是样式规则
• 对应CSS的语法，也就是选择器（selects）和样式声明（eclarations）

• 选择器：选择 HTML 元素的方式。可以使用标签名、class属性值、id值等多种方式
• 样式声明：用于给 HTML 元素设置具体的样式。格式是 属性名:属性值

• 格式：

• 举例：

• 分析：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NB8P9Zt6-1656942846682)(assets/1573553282632.png)]

1. 效果

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0oFXvyC7-1656942846683)(img/css入门.png)]

2. 实现步骤

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IEJ6UWGd-1656942846683)(img/css入门实现步骤.png)]

3. 新建案例：01-入门案例.html

4. 在初始页面的标签中，加入一对 标签。标签规定的固定的标题样式。

5. 在标签中加入一对 标签中，表示准备应用样式。

6. 编写样式

7. 打开浏览器查看，文字的颜色和大小都发生改变，应用了新的样式，效果如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BMOjv4uP-1656942846684)(assets/1573554231351.png)]

• 打开开发者工具

  打开浏览器，点击键盘键，显示开发者工具窗口。

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b1duUAQf-1656942846685)(assets/1573697452420.png)]

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RYdffRWB-1656942846685)(img/控制台.png)]

• 查看开发者工具

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HHyxB4uI-1656942846685)(assets/1573697622186.png)]

• 选择元素

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QDJ5z71s-1656942846686)(assets/1573697773675.png)]

• 修改样式

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bZFzjJtC-1656942846686)(assets/1573698020491.png)]

CSS 层叠样式表。可以为 HTML 元素添加一些样式。

CSS的主要部分有：

1. 选择器：用来选择页面元素的方式。
2. 样式声明：用来设置样式，格式。

在学习CSS时，要抓住两个方面：

1. 掌握多种选择器，能够灵活的选择页面元素。
2. 掌握样式的声明，能够使用多种属性来设置多样的效果。

2.1.1 内联样式

了解,几乎不用,维护艰难

内联样式：也叫行内样式，是CSS声明在元素的属性中，仅影响一个元素：

• 格式：

• 案例：02-引入方式1.html

• 效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LKMUNuqr-1656942846687)(img/引入1.png)]

• 虽然格式简单，但是样式作用无法复用到多个元素上，不利于维护，此格式了解即可。

2.1.2 内部样式表

• 在标签中通过标签来控制样式。只能影响当前文件。
• 内部样式（内嵌样式）只能作用在当前页面上，如果是多个页面，就无法复用了。

• 格式：

• 案例：03-引入方式2.html

• 效果如下：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GssinAVU-1656942846687)(img/引入2.png)]

2.1.3 外部样式表

• 在标签中通过标签来引入独立 css 文件，可以影响不同的文件

• 外部样式表（外链样式）是CSS附加到文档中的最常见和最有用的方法，因为您可以将CSS文件链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式

• 外部样式表是指将CSS编写在扩展名为 的单独文件中，并从HTML 元素引用它

• 格式：

• 案例：

1. 创建css/01.css文件

2. link标签引入文件

• 效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cWh8QOB9-1656942846687)(img/引入2.png)]

• 什么是注释：注释是用于解释说明程序的
• 注释的格式：
• 注释的特点：被注释掉的样式，不会被浏览器解析
• 与HTML一样，鼓励您在CSS中进行注释，以帮助您理解几个月后返回的代码工作方式，并帮助其他使用该代码的人对其进行理解
• 格式：

• 案例：05-注释.html

1. 什么是选择器

   一个 HTML 文件中会存在很多个元素，如果想对不同的元素添加不同的样式，就需要使用到选择器了

   说白了，选择器就是用来选择指定的元素的

2. 接下来我们将要详细的学习各种选择器的使用

3. 选择器的分类：

2.2.1 基本选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WyOSupwo-1656942846688)(img/基本选择器02.png)]

1）元素选择器

页面元素：

选择器：

2）类选择器

页面元素：

选择器：

3）ID选择器

页面元素：

选择器：

4）通用选择器

页面元素：

选择器：

5） 案例：

• 06-基本选择器.html

• 代码

• 效果

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eE8hIcXi-1656942846688)(img/基本选择器.png)]

2.2.2 属性选择器

• 属性选择器

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QTFCH5o7-1656942846689)(img/属性选择器.png)]

• 案例：07-属性选择器.html

• 效果

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FpxJGtau-1656942846689)(img/属性选择器效果.png)]

2.2.3 伪类选择器

• 伪类选择器，用于选择处于特定状态的元素，例如，一些元素中的第一个元素，或者某个元素被鼠标指针悬停。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5kttsYdC-1656942846689)(img/伪类选择器.png)]

注意：

伪类顺序 link ，visited，hover，active，否则有可能失效

• 格式：

• 案例：08-伪类选择器.html

2.2.4 组合选择器

• 组合选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Va0n84KA-1656942846690)(img/组合选择器.png)]

• 分组选择器，大家一般叫并集选择器

• 后代选择器与并集选择器，可以将任意的基本选择器进行组合

• 案例：09-组合选择器.html

• 补充：

  • 后代选择器

  • 子级选择器

1. CSS的引入方式有三种（内联样式，内部样式，外部样式），建议使用外部样式表
2. 注释类似于java多行注释。
3. 选择器是CSS的重要部分：
   1. 基本选择器：可以通过元素，类，id来选择元素
   2. 属性选择器：可以通过属性值选择元素
   3. 伪类选择器：可以指定元素的某种状态，比如链接
   4. 组合选择器：可以组合基本选择器，更加精细的划分如何选择

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KPSQkT8t-1656942846690)(img/头条优化版.png)]

• 上图三个红框内容，之前都是一张图片
• 我们这一次就去真正实现一些这些布局

3.2.1 边框样式

• 边框样式

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wQ25zeds-1656942846690)(img/边框样式.png)]

• 案例：案例一/01案例一：边框样式演示.html

• 效果

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KhuISrM1-1656942846691)(img/边框效果.png)]

3.2.2 文本样式

• 文本样式

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vRbiJvov-1656942846691)(img/文本样式.png)]

• 案例：02案例一：文本样式演示.html

• 效果：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kvc8M5Wo-1656942846691)(img/文本样式效果.png)]

3.2.3 常见样式属性

其他属性：

1）边框样式

在之前学习了简写属性来设置边框样式，接下来我们将研究如何创造性地使用边框。

• 单个边框

设置一个方向边框的宽度、样式和颜色，例如：

• 无边框

当border值为none时，可以让边框不显示，用于特殊效果。

• 圆角

通过使用属性设置盒子的圆角，虽然能分别设置四个角，但是通常我们使用一个值，来设置整体效果，例如

2）文本样式

• 颜色

  该属性设置所选元素的前景色的颜色

  颜色的值，可以由多种方式赋值，常见的有颜色单词，RGB十六进制，例如：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2xYWxxLX-1656942846692)(assets/1574001685034.png)]

• 字体种类

  使用属性-这允许您指定一种字体

• 字体大小

  字体大小使用属性设置，可以采用常见单位：

  ：像素，文本高度像素绝对数值。

  ：1em等于我们要设置样式的当前元素的父元素上设置的字体大小，这是相对数值，能看懂即可。

• 文本修饰

  :设置字体上的文本装饰线。

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hDKV1iWs-1656942846692)(assets/1574002112573.png)]

• 文本对齐

  该属性用于控制文本如何在其包含的内容框中对齐。可用值如下，它们的工作方式与常规字处理器应用程序中的工作方式几乎相同：

  • ：左对齐文本。
  • ：右对齐文本。
  • ：使文本居中。
  • ：使文本散布，改变单词之间的间距，以使文本的所有行都具有相同的宽度。

• 行高

  该属性设置每行文本的高度，也就是行距。

• 垂直对齐方式

  vertical-aligin：top/middel/bottom/百分比

3.4.1 顶部和导航条

• 要实现的部分，如下图红框

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wJp9dLbF-1656942846692)(img/顶部和导航条.png)]

  步骤

  1. 创建一个 html 文件
  2. 创建顶部标签
  3. 通过三个标签实现登录、注册、更多三个超链接
  4. 设置顶部样式(背景色、行高、文字对齐方式、字体大小、超链接颜色、悬浮、和去除下划线)
  5. 创建导航条标签
  6. 通过标签引入 logo 图片
  7. 通过两个标签实现首页、科技两个超链接
  8. 通过标签实现正文两个字的显示
  9. 设置导航条样式(行高)

• 代码：03案例一：头条页面.html

• 样式代码：css/news.css

• 效果

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vWGuUbHX-1656942846692)(img/顶部导航条效果.png)]

3.4.2 左侧分享和中间正文和右侧广告图片的

• 要实现的部分：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TB7sjglb-1656942846693)(img/头条中间部分.png)]

• 步骤

  1. 创建左侧分享标签
  2. 通过标签嵌套标签和标签实现图片和文字的显示
  3. 设置左侧分享样式(宽度、文字水平对齐、浮动、图片大小、文字垂直对齐)
  4. 创建中间正文标签
  5. 实现正文内容的填充
  6. 设置中间正文样式(宽度、浮动)
  7. 创建右侧广告标签
  8. 通过标签引入广告图片
  9. 设置右侧广告样式(宽度、浮动)

• 代码

• 样式代码

• 效果

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XqK67kW8-1656942846693)(img/中间部分效果.png)]

3.4.3 底部页脚超链接

• 要实现的效果

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yw4YoiT5-1656942846693)(img/页脚效果.png)]

• 步骤

  1. 创建底部页脚标签。
  2. 通过标签实现超链接。
  3. 设置底部页脚样式(浮动、背景色、文字水平对齐、行高、超链接颜色)。

• 代码

• 样式代码

• 效果
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Qr9a5TC-1656942846694)(img/页脚效果.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XZWM6EEY-1656942846694)(img/登陆界面.png)]

4.2.1 表格标签

1）什么是表格

表格是由行和列组成的结构化数据集(表格数据)。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IcrTaHgk-1656942846694)(assets/swimming-timetable.png)]

2）表格标签

• 表格标签

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qKGx7jCC-1656942846695)(img/表格标签.png)]

• 案例：01案例二：表格标签演示.html

• 效果

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ydDDIOyL-1656942846695)(img/表格效果.png)]

4.2.2

• 样式控制

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fwsQHh10-1656942846695)(img/样式控制.png)]

• 说明：

  轮廓outline：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

  display属性，用来设置一个元素应如何显示。可以设置块级和行内元素的切换，也可以设置元素隐藏。

• 案例：02案例二：样式演示.html

• 效果

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cxf8RgAD-1656942846695)(img/样式效果.png)]

4.2.3 盒子模型

• 万物皆"盒子"

• 盒子模型是通过设置边框和元素内容的边距，从而实现布局的方式

• 分为内边距和外边距两种方式

• 分析图：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CBQkEVaO-1656942846696)(img/盒子模型图.png)]

• 内外边距的设置，取决于所在视角，而我们一般经常使用的是外边距

• 内外边距介绍：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N0gL55Yv-1656942846696)(img/内外边距.png)]

• 案例：03案例二：盒子模型演示.html

• 效果：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7nSdopAl-1656942846696)(img/内外边距图.png)]

• 补充：值含义：

1. 一个值时

2. 两个值时

3. 三个值时

4. 四个值时

4.3.1 顶部图片和表单

• 要实现的内容如下：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g6OSHZb1-1656942846696)(img/登陆01.png)]

  • 左上角是一个logo，就是顶部图片

• 步骤

  1. 创建一个 html 文件。
  2. 创建三个标签划分区域(顶部公司图标、中间表单、底部页脚)。
  3. 在顶部标签中通过标签引入图片。
  4. 在中间表单标签中通过表单标签和表格标签填充表单项。
  5. 设置样式(背景图片、背景色、宽度、外边距、弧度、文字水平对齐)。

• 案例：04案例二：登录页面.html

• 样式代码：css/login.css

• 效果

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dsCaB3vT-1656942846696)(img/登陆效果01.png)]

4.3.2 中间表单的样式

• 步骤

  1. 设置表头样式(字体大小、颜色)
  2. 设置表体提示样式(文字大小)
  3. 设置表体输入框样式(边框、弧度、宽度、高度、轮廓)
  4. 设置表底按钮样式(边框、弧度、宽度、高度、背景色、字体颜色、字体大小)
  5. 设置表行样式(行高)

• 代码

• 样式代码：login.css增加如下代码

• 效果

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2gA4UFwY-1656942846697)(img/登陆效果02.png)]

4.3.3 底部页脚

• 步骤

  1. 在底部页脚标签中通过文字和标签实现超链接
  2. 设置底部页脚样式(宽度、外边距、字体大小、字体颜色)
  3. 设置超链接样式(去除下划线、超链接文字颜色)
  4. 在案例一头条页面登录超链接中，引入跳转登录页面

• 代码

• 样式代码

• 效果

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y5ipghAL-1656942846697)(img/登陆效果03.png)]

4.3.4 登陆跳转页面

• 点击案例一中的登陆，跳转到登陆界面

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-52I9Xoap-1656942846697)(img/跳转.png)]

• 修改案例一代码：03案例一：头条页面.html

将网站部署到服务器，浏览器通过URL地址访问页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NZPpaxQG-1656942846697)(assets/1573812990799.png)]

在地址栏输入URL地址，访问服务器上的页面。

5.2.1 Nginx服务器概述

Nginx是一种服务器软件，其最主要，最基本的功能是可以与服务器硬件(电脑)结合，让程序员可以将程序发布在Nginx服务器上，让成千上万的用户可以浏览。

​ 除此之外，Nginx还是一种高性能的HTTP和反向代理服务器，同时也是一个代理邮件服务器。也就是说，我们在Nginx上可以：

1. 可以发布网站(静态, html,css,js)
2. 可以实现负载均衡,
3. 代理服务器
4. 可以作为邮件服务器实现收发邮件等功能

本课程我们只讨论Nginx发布网站的功能，其它的功能后续课程会深入学习.

5.2.2 在Linux上使用Nginx

1）下载Nginx

• 进入http://nginx.org/网站，下载nginx-1.17.5.tar.gz文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-33bcHUR1-1656942846698)(assets/1573805867978.png)]

• 今日资料有这个压缩包，可以直接用：nginx-1.17.5.tar.gz

2）上传并解压

• 使用crt上传压缩包

  • 打开crt，连接linux，然后alt+p，进入如下界面
  • 执行命令：put xx/xx.gz

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B7EhCTde-1656942846698)(img/upload.png)]

• 解压

  • 先进入根目录：cd ~
  • 将压缩包移动到 /home/目录 ： mv xx.gz /home/
  • 解压缩：tar -zxvf xx.gz

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Qpkd792-1656942846698)(img/upload2.png)]

  • 安装好之后进入安装好的目录

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rjzb1Nne-1656942846698)(img/upload3.png)]

3）准备依赖环境

4）编译安装

5）启动服务器

6）浏览器访问

浏览器输入虚拟机ip地址，默认80端口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5jEPSiB1-1656942846699)(img/upload4.png)]

5.2.3 发布项目

1. 在 /home 下创建一个 toutiao 目录：mkdir toutiao
2. 将项目上传到该目录下：put xx/web.zip （web.zip在今天资料中：资料发布的项目web.zip）
3. 解压项目压缩包：unzip web.zip
4. 编辑 nginx 配置文件：vi /home/nginx-1.17.5/conf/nginx.conf
   • 将root改为头条目录，如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jei7LSGI-1656942846699)(assets/1573812368563.png)]

5. 重启服务

6. 访问

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GQb1tcl2-1656942846699)(img/fangwen.png)]

   • 点击超链接，可以跳转到案例1
   • 案例1中，点击登录，可以跳转到案例2

5.2.4 windows版本的Nginx操作

1. 将"day02_css资料 ginx-1.18.0.zip"解压到无中文的目录下：C:DevelopSoft

2. 双击运行nginx.exe（窗口会一闪而过，然后打开浏览器访问http://localhost:80，可以看到nginx的欢迎界面即可）

3. 将“day02_css资料发布的项目web.zip”复制到一个无中文的目录下：比如：C:DevelopSoft ginx-1.18.0project（自己建一个project文件夹）

4. 然后将web.zip解压

5. 配置nginx.conf （注意目录的斜杠是 / ）

6. 重新加载nginx

7. windows下nginx常用命令：（需要将cmd进入到nginx.exe目录下才能执行如下命令）

8. 本文地址：https://sicmodule.kub2b.com/quote/18337.html     企库往 https://sicmodule.kub2b.com/ , 查看更多