欢迎回来三钻的FCC前端教程，上一篇文章我们通过28关学会了HTML与HTML5网页开发基础。这一期我们一起攻破前端第二大知识点《CSS基础入门》。因为这一课一共有44关，我把文章分成两期更新。敬请期待！
上图中的两个动画，一个文字直接变粗，一个渐渐变粗，我觉得后者会更有趣。但普通的字体可达不到这种效果，例如微软雅黑，无论怎么调整它的 FontWeight，实际上它也只有三种粗细：
在只允许使用html，不能使用js和css的情况下，也能把CSDN的自定义模块玩出花来
Tailwind CSS 是目前获得star数量最多的css框架，less只有16.9k，sass 14.6k;今天就来探究一下为何Tailwind CSS这么受欢迎
HTML 基础 概念 全写： HyperText Mark-up Language
好比：我们去超市买水果，若买一个带回家一个，那么效率很低，不如买完一次性打包带回家更方便。
CSS 选择器： CSS id选择器： id选择器可以为标有特定 id的HTML元素指定特定的样式 id选择器是以 “#” 来定义的 <!DOCTYPE html> <html> <head> <title>Node</title> <style type="text/css"> #red {color: red;} #green {color: green;} </style> </head> <body> id选择器：red -- 红色 <p
id选择器：red -- 红色
HTML 1、一套规则，浏览器认识的规则。 2、开发者： 学习Html规则 开发后台程序： - 写Html文件（充当模板的作用） ****** - 数据库获取数据，然后替换到html文件的指定位置（Web框架） 3、本地测试 - 找到文件路径，直接浏览器打开 - pycharm打开测试 4、编写Html文件 - doctype
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
随着用户认知提升，网页设计也在不断的向前发展，同时也逐步形成了一些规范，比如网页尺寸、文字规范、图片规范、按钮设计、表单设计、自适应设计与响应设计等。接下来小编跟你详细分享网页设计规范，以便您在设计之前一定要和前端沟通使用的尺寸、字体、交互等，这样有助于后期，不会有误会。
设置某一个角的圆角，比如设置左上角的圆角： border-top-left-radius:30px 60px;
在当今多设备浏览的时代，响应式设计已成为网页开发不可或缺的一部分。它使网站能够根据用户所使用的设备（如桌面、平板、手机）的特性自动调整布局、图像大小和字体，从而提供一致且优化的用户体验。本文将深入浅出地探讨响应式设计的核心概念——媒体查询，并分析一些常见的问题、易错点及其解决方案，辅以实用的代码示例。
除了使用媒体查询和现代CSS布局（例如flexbox和grid）来创建响应式网站之外，我们使用一些比较不太被用或者比较新的特性来制作响应式网站。 在本文中，我们将探讨许多可用的工具（围绕HTML和CSS），从响应图像到相对较新的CSS函数，无论我们是否使用媒体查询，它们都可以正常工作。
对于Bootstrap这个CSS框架，很多程序员持鄙视的态度，就如鄙视jQuery一般。诚然，就算不用这个框架，而是纯手写，或者借助JS框架的模板，一样可以写出一套页面，至于页面的精良程度、是否可二次开发、是否主流浏览器全兼容、是否可复用、可扩展、那就看开发者的个人能力了——如果一些人拿着公司的高额薪水或者甲方的高额酬金，却干着一锤子的买卖，代码不可复用，不可扩展，不可二次开发，浏览器不全兼容，他只是非常快速的胡七八凑了一套页面，应付到上线，然后潇洒的鄙视一下Bootstrap，我只能对这种人说俩字：呵呵。
0x01 前言 前两天在百家号上看到一篇名为《反击爬虫，前端工程师的脑洞可以有多大？》的文章，文章从多方面结合实际情况列举了包括猫眼电影、美团、去哪儿等大型电商网站的反爬虫机制。的确，如文章所说，对于一张网页，我们往往希望它是结构良好，内容清晰的，这样搜索引擎才能准确地认知它；而反过来，又有一些情景，我们不希望内容能被轻易获取，比方说电商网站的交易额，高等学校网站的题目等。因为这些内容，往往是一个产品的生命线，必须做到有效地保护。这就是爬虫与反爬虫这一话题的由来。本文就以做的较好的“猫眼电影”网站为例，搞定
在这篇文章之前，已经初步的了解了HTML是怎么创建了，接下来，我们要用创建的文件去写我们进入前端的第一个demo，当然了，如果你忘记了，我之前的文章里也有详细的步骤。
在新窗口打开连接：要输入的文字 （
追随最新的网页设计趋势，紧跟设计潮流是设计师们必做的功课之一。快速更迭的网页设计趋势和网页开发技术对2019年的网页设计趋势来说必将产生直接的影响。
这里是加粗文本 这个文本是加粗的 这里是字体放大 这里是字体缩小 这里是斜体的 这个文本是斜体的 这个文本包含 下标 这个文本包含 上标
• 说明文档： https://www.npmjs.com/package/node-pngquant-native
*bootstrap.css 是完整的bootstrap样式表，未经压缩过的，可供开发的时候进行调试用 *bootstrap.min.css 是经过压缩后的bootstrap样式表，内容和bootstrap.css完全一样，但是把中间不必要的空格之类的东西都删掉了，所以文件大小会比bootstrap.css小，可以在部署网站的时候引用，如果引用了这个文件，就没必要引用bootstrap.css了，下面的文件同样。
爬虫是 Python 的一个常见应用场景，很多练习项目就是让大家去爬某某网站。爬取网页的时候，你大概率会碰到一些反爬措施。这种情况下，你该如何应对呢？本文梳理了常见的反爬措施和应对方案。
首先先加载我们的HTML代码，加载完成后进行HTML的解析，在解析的同时加载CSS。待解析完成后创建我们对应的DOM树，然后把解析后的CSS挂载在DOM树上，最后对用户进行展示页面。
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
首先需要准备好字体，字体大家自己百度找一下就行了（字体不建议文件太大的） 其实只要改一下css就好了，一般都是在style.css，没有css文件就自己创建一个 这里我就以Typecho示例，Typecho这样的程序css都在主题里面，找到主题文件夹就好了 之后打开自己的css文件夹打开style.css或者其他css都可以，加上如下代码 字体文件格式可以自己转码，一般woff、ttf、otf、svg四种格式已经可以兼容市面上99％的浏览器了
你肯定经历过耗费数个小时，换着花样地尝试所有可能起作用的 CSS 属性、一遍遍地从 Stack Overflow 上复制粘贴代码，寄希望于误打误撞地赌中那个能实现预期效果的魔幻组合。
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣的CSS题目
一、字体样式 1.常用的字体样式属性 属性 说明 font-family 字体类型 font-size 字体大小 font-weight 字体粗细 font-style 字体风格 color 字体颜色 可以看到，大部分字体样式属性是以font为前缀，font意思就是字体。 二、font-family（字体类型） 我们常说的宋体、楷体等就是字体类型。 在CSS中，使用font-family属性定义字体类型。 1.语法格式 <style type="text/css"> font-fam
想对某个结构元素式样样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可使用not选择器。
CSS相关查阅文档：https://kohler.lanzouo.com/i0XFcz8svob
css写在style标签中，style标签一般写在head标签里面，title标签下面。
结合现代网站的复杂性和浏览器处理CSS的方式，即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分，所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验，这也需要优化你的CSS。
一、web font web font是应用在web中的一种字体技术，在CSS中使用font-face定义新的字体。先了解操作系统中的字体： a）、安装好操作系统后，会默认安装一些字体，这些字体文件描
引言 上次给大家带来了html部分的笔记，大家的反馈让我非常开心?。 这次给大家带来css部分的第一篇笔记，由于本人比较蠢，学的很慢，而且css部分内容非常的细、广，需要不断code，才能体会其中细节
由于国产化进程的不断推进，冒出了不少基于 Linux 的国产操作系统，这就导致我们平时在 windows 上使用的好好的字体，在这些国产操作系统上就失效了，其原因是这些操作系统上没有安装对应的字体。
非布局样式-字体 * 字体 字重 颜色 大小 行高 和文字相关的一些 * 背景 边框 和盒子相关的 * 滚动 换行 跟 页面 和 布局有关 * 粗体 斜体 下划线 文字装饰性的样式 * 其它 * 字体族(font-family) -- serif 衬线字体：字体周围有装饰性的弯弯钩钩(比如 宋体) -- sans-serif 非衬线字体：字体笔画的开始和结束 都非常规则。如 屏幕上的文字(比如 黑体) -- monospace 等宽字体
今天，在 CodePen 上看到一个很有意思的效果 -- GSAP 3 ETC Variable Font Wave，借助了 JS 动画库 GSAP 实现，一起来看看：
当想要指定某个地方的字体自定义时候，可以通过右键审查元素找到那个字体的类，给于类或者在原有的类下面给于属性即可。
该篇文章基本没有太多移动端的字体选择及分析。并且过了这么久，如今的 Web 字体又有了一些新的东西，遂有此文。
字体实现方式 在CSS中，我们会发现下面的语句（通常在style.css文件内） font-family: "Microsoft YaHei","WenQuanYi Micro Hei", sans-serif; line-height: 1.8; font-size: 16px; background: #f5f5f5; color: #848484; font-weight: 300; overflow-x: hidden 1234567 font-family: "Micr
嗯,说实话,我写这个的话比较少人看啊,但是还是继续坚持下去吧,可不可能半途而废啊,接下来是第三天的笔记. 在此之前先为大家显示下前端工程师的路线图: 第三天的笔记:HTML AND CSS: 早上所学的： 1.无序列表：从 元素开始，并包含一个或多个 元素。 例： milk cheese 2.有序列表：从元素开始，并包含一个或多个 元素。 例： Garfield Sylvester 3.创建一个表单（form） Text input(文本输入框)，例： 注意：input元素是自关闭的。 占位符（plac
上述属性都是对性能要求比较高的。如果这些属性使用较少，那这就不是问题。但是如果一个页面出现几百次，那么整体的CSS可能会受到影响，所以要谨慎使用。
Font Awesome介绍 Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。 一个字库，675个图标 仅一个Font Awesome字库，就包含了与网页相关的所有形象图标。 无需依赖JavaScript Font Awesome完全不依赖JavaScript，因此无需担心兼容性。 无限缩放 无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标。 如言语一般自由 Font Awesome完全免费，哪
css是什么：CSS是层叠样式表(Cascading Style Sheets)的简称，有时我们也会称之为CSS样式表或级联样式表。CSS 是也是一种标记语言。 有什么用：主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS是一种描述HTML文档样式的语言,CSS描述应该如何显示HTML元素。
Demo 可以参考：http://idv3.sinaapp.com 中标题字体的用法，具体用法如下：
网络安全字体是由许多操作系统预先安装的字体。虽然不是所有的系统都安装了相同的字体，但你可以使用网络安全字体堆栈来选择几种看起来类似的字体，并且安装在你想支持的各种系统上。如果你想使用预装字体以外的字体，从CSS3开始，你可以使用网络字体Web fonts - Learn web development | MDN。
CSS语言介绍：CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
