前言

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

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

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

随机推荐

Docker部署Go+Mysql+Redis
两种方式Docker和Docker Compose部署web项目,相对于Go语言来说,不管是使用docker部署还是直接服务器部署都相当方便,比python要简单很多. 1.Dockerfile结构解 ...
从图像到信息，AI识图开启智能识别新时代
当前用户在使用各类应用时,文字.图片和视频已经成为互联网内容的主要载体,许多用户在浏览过程中通常想要选取页面上的文字或者得到图片或者视频画面的具体信息.比如,识别文本中的特定实体(如电话号码.邮箱.网 ...
EMR集群信息查看-Hive
一.日志 1.hivemetastore日志简介:查看运行情况,其它组件会通过hivemetastore获取表信息 tail -f /data/emr/hive/logs/hadoop-hiveme ...
面试官：谈谈RabbitMQ的队头阻塞问题？
RabbitMQ 延迟消息的队头阻塞问题是指,在使用死信队列(DLX)和 TTL(消息过期时间)实现延迟消息时,由于队列的先进先出(FIFO)特性,在队列头部消息未过期的情况下,即使后续消息已经过期也 ...
Deepseek学习随笔（9）--- 清华大学发布Deepseek赋能职场（附网盘链接）
作为一名职场人,在工作中常常面临效率瓶颈:如何快速生成高质量内容?如何高效处理复杂任务?这些问题在接触了<清华大学-DeepSeek赋能职场>这份文档后,得到了全新的解答.这份由清华大学新 ...
CF2029C New Rating
思路(二分 + 数据结构优化DP) 大致题意为:一个值 \(x\) 初始为 \(0\),然后有一个数组 \(a\),遍历一次数组. 如果 \(a_i > x\),则 \(x + 1\). 如果 ...
Python基础-Python操作word、面向对象
今日概要: 第三方模块 -- word 面向对象 1 Word格式-第三方模块自定义模块内置模块第三方模块 requests bs4 openpyxl python-docx 1.1 快速上手 ...
【Hypermesh】TetraMesh Panel 常用选项详解
结合Hypermesh 2020 帮助文档和自己的一点使用经验,整理了这个博客.
PPT-嵌入字体提示不可嵌入怎么办
直接将不可嵌入的字体替换为可以嵌入的字体开始->替换->替换字体
Vue3组合式API终极指南：从原理到实战，彻底掌握高效开发！
前言在Vue3从发布到今天,组合式API已成为现代前端开发的标杆设计模式.本文通过真实项目场景,深度解析组合式API的核心特性,配以完整代码示例,助你彻底掌握企业级Vue应用开发精髓. 一.为什么组 ...

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