前言

新人学习成本很高，网络上太多的名词和框架，全部学习会浪费大量的时间和精力。

新手缺乏学习内容的辨别能力，本系列文章为新手过滤掉不适合的学习内容（比如多线程等等），让新手少走弯路直通罗马。

作者认为新人应该先打好基础，不要直接学习框架，例如先掌握 SQL 再使用 EFCore 框架。

作者只传授数年内不会变化的知识，让新手学习快速进入跑道受益终身。

分享使我快乐，请务必转发给同学，朋友，让大家都少走一些弯路！！

W3C 是一群大佬制定的 WEB 标准规范，包括 HTML/CSS/JavaScript、HTTP协议等等。所有厂商遵循行业标准，比如前端的浏览器（Chrome/IE/Firefox），后端的WEB服务器（Nginx/Apache/IIS）。（思考：如果 IE浏览器 只能访问 IIS 服务器？）

我们基于 WEB 之上的码农，只需要学习好这些标准知识，就可以在任何编程语言下通用，这些知识未来几十年都不过时。

W3C 虽然标准，但也不是每项技术都值得新人学习（例如 XHTML/XSL），对于新手而言，只推荐学习 HTML/CSS/JavaScript、HTTP协议。

如何使用 CSS

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

CSS 可以通过以下方式添加到HTML中:

  • 内联样式 - 在HTML元素中使用"style" 属性
  • 内部样式表 - 在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  • 外部引用 - 使用外部 CSS 文件（最好的方式是通过外部引用CSS文件）
<body style="background-color:yellow;">

<h2 style="background-color:red;">这是一个标题</h2>

<p style="background-color:green;">这是一个段落。</p>

</body>

或者

<head>

<style type="text/css">

body {background-color:yellow;}

p {color:blue;}

</style>

</head>

或者

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

mystyle.css

body {

    background-color:#d0e4fe;

}

h1 {

    color:orange;

    text-align:center;

}

p {

    font-family:"Times New Roman";

    font-size:20px;

}

/*这是个注释*/

id 和 class 选择器

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

以下的样式规则应用于元素属性 id="para1":

<style>

#para1

{

	text-align:center;

	color:red;

}

</style>

<p id="para1">Hello World!</p>

<p>这个段落不受该样式的影响。</p>

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中：

<style>

.center

{

	text-align:center;

}

</style>

<h1 class="center">标题居中</h1>

<p class="center">段落居中。</p>

你也可以指定特定的 HTML 元素使用 class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中：

<style>

p.center

{

	text-align:center;

}

</style>

<div class="center">标题没有居中。</div>

<p class="center">段落居中。</p>

多个 class 选择器可以使用空格分开：

<style>

.center { text-align:center; }

.color { color:#ff0000; }

</style>

<div class="center color">标题居中，红色</div>

CSS 样式

  • 背景颜色 background-color:#b0c4de;
  • 背景图像 background-image:url('paper.gif');
  • 背景简写 background:#b0c4de url('paper.gif') no-repeat right top;
  • 文本颜色 color:#00ff00;
  • 文本对齐 text-align:center;
  • 文本字体 font-family:"Times New Roman",Times,serif;
  • 字体大小 font-size:30px;
  • 链接样式
a:link {color:#000000;} /* 未访问链接*/

a:visited {color:#00FF00;} /* 已访问链接 */

a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */

a:active {color:#0000FF;} /* 鼠标点击时 */
  • 表格边框 table,th,td
  • 表格宽度和高度 table { width:100%; } th
  • 表格文字对齐 td
  • 表格填充 td
  • 表格颜色 th
  • 宽度和高度
  • 外边距
  • 内边距

嵌套选择器：

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
参考：https://www.runoob.com

CSS 内容体系还有很多，但是对新手而已学到这里算入门了，千万不要指望一下能吃下所有内容（贪吃蛇的后果），只有反复的实战才能彻底领会。

到这里，你已经对 CSS 有了初步的认识，为我们以后深入打下了基础，下一篇我们学习 JavaScript 脚本知识！

系列文章导航

原创保护，转载请注明出处：https://www.cnblogs.com/FreeSql/p/16782488.html

Asp.net core 少走弯路系列教程（三）CSS 学习的更多相关文章

  1. ASP.NET Core ：中间件系列（三）：中间件限流

    中间件 微软官网定义: 中间件 中间件意思就是处理请求和响应的软件: 1.选择是否将请求传递到管道中的下一个组件. 2.可在管道中的下一个组件前后执行工作. 对中间件类 必须 包括以下 具有类型为 R ...

  2. 学习ASP.NET Core Razor 编程系列十五——文件上传功能（三）

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  3. 学习ASP.NET Core Blazor编程系列三十——JWT登录（4）

    学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...

  4. 学习ASP.NET Core Razor 编程系列九——增加查询功能

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  5. 学习ASP.NET Core Razor 编程系列十九——分页

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  6. 学习ASP.NET Core Razor 编程系列十七——分组

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  7. 学习ASP.NET Core Razor 编程系列十六——排序

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  8. 学习ASP.NET Core Razor 编程系列十二——在页面中增加校验

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  9. 学习ASP.NET Core Blazor编程系列十五——查询

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  10. 学习ASP.NET Core Blazor编程系列十六——排序

    学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...

随机推荐

  1. 谈谈天翼云VPCE

    本文分享自天翼云开发者社区<谈谈天翼云VPCE>,作者:天枫霁月 一.VPCE产品出现的背景 跨VPC通信,且能够严格限制访问,任意两个租户之间都能互通,性能高,花费少,通过VPCE产品实 ...

  2. galaxy特色胡思乱想

    有没有什么办法,让我不伤害任何人,什么也不破坏,被判死刑.我觉得这样比我紫砂要好的多. 我所可怜的是神不能紫砂.--芥川龙之介<某傻子的一生>

  3. Flink同步kafka到iceberg(cos存储）

    一.flink到logger 1.source create table source_table ( id bigint comment '唯一编号' ,order_number bigint co ...

  4. ORACLE11g数据中创建DB Link方法，用于跨oracle数据库查询数据

    ---查看该用户下已建立的DB link链接 SELECT * FROM DBA_DB_LINKS --创建语句 CREATE DATABASE LINK  连接名CONNECT TO 登录名  ID ...

  5. Luogu P5298 PKUWC2018 Minimax 题解 [ 紫 ] [ 树形 dp ] [ 线段树合并 ] [ 概率 dp ]

    Minimax:线段树合并优化 dp 好题. 树形 dp 因为要求出每一个值的出现概率,首先我们可以想到一个很暴力的 dp 式子. 定义 \(dp_{i,j}\) 表示在节点 \(i\) 时,权值 \ ...

  6. [大模型/AI/GPT] Chatbox:大模型可视化终端应用

    序 概述:Chatbox AI Chatbox AI 是一款 AI 客户端应用和智能助手,支持众多先进的 AI 模型和 API,可在 Windows.MacOS.Android.iOS.Linux 和 ...

  7. 理解 SystemVerilog 中的循环与并发线程

    1. 首先理解 scope 的概念 除了常见的module.interface.class.task以及function等等,另外,begin-end block 和 fork-join block ...

  8. go测试跨包代码覆盖率

    Golang虽然只是一门编程语言,但也为我们提供了不少工具,其中测试工具是最常用的,大概 前提概要 以前看书,只说了用什么工具去做覆盖率,和基本的使用,当时看了也没想太多.后面真正做项目了,老大要求比 ...

  9. Springboot集成easypoi实现excel多sheet导出

    1.环境配置 <!--easypoi依赖,excel导入导出--> <dependency> <groupId>cn.afterturn</groupId&g ...

  10. 使用 Visual Paradigm 的业务流程模型和符号 (BPMN) 综合指南

    业务流程模型和符号 (BPMN) 是一种用于建模和记录业务流程的标准化图形符号.它被广泛采用,因为它能够提供一种清晰.通用的语言,所有利益相关者(业务分析师.技术开发人员和管理人员)都能理解.Visu ...