前言

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

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

作者认为新人应该先打好基础，不要直接学习框架，例如先掌握 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 学习的更多相关文章

ASP.NET Core ：中间件系列（三）：中间件限流
中间件微软官网定义: 中间件中间件意思就是处理请求和响应的软件: 1.选择是否将请求传递到管道中的下一个组件. 2.可在管道中的下一个组件前后执行工作. 对中间件类必须包括以下具有类型为 R ...
学习ASP.NET Core Razor 编程系列十五——文件上传功能（三）
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Blazor编程系列三十——JWT登录（4）
学习ASP.NET Core Blazor编程系列文章之目录学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...
学习ASP.NET Core Razor 编程系列九——增加查询功能
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十九——分页
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十七——分组
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十六——排序
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十二——在页面中增加校验
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Blazor编程系列十五——查询
学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
学习ASP.NET Core Blazor编程系列十六——排序
学习ASP.NET Core Blazor编程系列文章之目录学习ASP.NET Core Blazor编程系列一--综述学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...

随机推荐

Dummynet简单部署
本文分享自天翼云开发者社区<Dummynet简单部署>,作者:凸凹部署流程 ^准备内核版本 ^参看系统内核版本 uname -r 我们需要将ipfw编译成内核模块,请确保ipfw用到的内 ...
C#中根据传入的字符串字段返回实体Lambda表达式
我们在操作实体的时候,经常会使用到Lambda表达式,如下所示就是对实体IOT_Sample的CrtTime进行操作: var ret = NestExtension.GetSort<IOT_S ...
解决使用PowerShell执行命令出现“因为在此系统上禁止运行脚本”的问题
1.问题描述出现的具体错误如下所示: 2.解决办法以管理员身份运行PowerShell,执行命令get-executionpolicy可查看PowerShell执行的策略(Restricted代表 ...
在 PyTorch 中理解词向量，将单词转换为有用的向量表示
你要是想构建一个大型语言模型,首先得掌握词向量的概念.幸运的是,这个概念很简单,也是本系列文章的一个完美起点. 那么,假设你有一堆单词,它可以只是一个简单的字符串数组. animals = [&quo ...
Iceberg的Copy on Write和Merge On Read介绍
一.默认的Copy on Write Copy no Write模式指的是在进行更新数据时,先将数据拷贝出来进行相应的更新,再替换掉原先的数据二.Merge On Read读取时合并在v2版本才支 ...
常用Maven命令
一.常用命令 1.1 打包 mvn clean package -DskipTests 指定环境 mvn clean install -Dmaven.test.skip=true -Pprod-tx ...
实战AI大模型辅助编程：新安江水文模型和SCE-UA优化算法的移植与实现
新安江水文模型与 SCE-UA 优化算法是水文学和水资源管理领域的重要工具,二者结合使用可以有效模拟流域的水文过程并优化模型参数. 新安江水文模型是一种概念性水文模型,主要用于模拟流域的降雨-径流关系 ...
mysql中，让自动增长字段值复位/重新计数
在使用mysql时,常常要设置一个id值,并设置为自动增长如果想要复位重新计数的话,那么应该使用以下语句 ALTER TABLE `表名` AUTO_INCREMENT = 1; 但需要注意的是,除 ...
Java基础常见知识、面试题总结（上）
Java语言有哪些特点简单易学: 面向对象(封装,继承,多态): 平台无关性( Java 虚拟机实现平台无关性): 支持多线程( C++ 语言没有内置的多线程机制,因此必须调用操作系统的多线程功能来 ...
Javascript 显示当前滚动条滚动的百分比
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

Asp.net core 少走弯路系列教程（三）CSS 学习