Asp.net core 少走弯路系列教程（三）CSS 学习
前言
新人学习成本很高，网络上太多的名词和框架，全部学习会浪费大量的时间和精力。
新手缺乏学习内容的辨别能力，本系列文章为新手过滤掉不适合的学习内容（比如多线程等等），让新手少走弯路直通罗马。
作者认为新人应该先打好基础，不要直接学习框架，例如先掌握 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 脚本知识！
系列文章导航
- （一）了解 W3C
- （二）HTML 学习
- （三）CSS 学习
- （四）JavaScript 学习
- （五）了解 HTTP 协议
- （六）C# 语法学习
- （七）WebApi 学习
- （八）数据库 CRUD 增删改查学习
- （九）待续。。
原创保护，转载请注明出处：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应 ...
随机推荐
- 第9章 LINQ 运算符
第9章 LINQ 运算符 本章所有例子所使用的 names 数组都是一致的: string[] names = {"Tom", "Dick", "Ha ...
- Ubuntu手动安装Mysql包
ubuntu通过tar包安装mysql5.7.21 1.下载解压命令见下: wget https://dev.mysql.com//Downloads/MySQL-5.7/mysql-5.7.21-l ...
- JMeter + ant + Jenkins 接口测试持续集成
JMeter + ant + Jenkins 接口测试持续集成 操作系统:linux 环境变量 地址 jdk11 https://www.oracle.com/java/technologies/do ...
- FLink16--计数窗口--CountWindiwApp
一.依赖 https://www.cnblogs.com/robots2/p/16048648.html 二.代码 概念:窗口来多少条计算一次,存在滚动和滑动两种情况 package net.xdcl ...
- "最新"部署幻兽帕鲁游戏服务器及开局经验分享
Banner 2024,<幻兽帕鲁><雾锁王国>等游戏爆火!那么如何快速拥有一个可以跟小伙伴们愉快玩耍的服务器呢?社区里不少小伙伴已经给出了自己的最佳实践,你甚至不需要懂技术, ...
- 泰山派设备控制（RGB）
泰山派设备系统控制(RGB) 1.进入设备系统 cd /sys/class 2.进入RGB灯子系统 cd /sys/class/leds/ 罗列可操作的设备,可以看到三个设备,"rgb-le ...
- autMan奥特曼机器人-代理池配置教程
一.优势: 全可视化 稳如老牛(从2.8.6开始) 隧道代理和接口获取,使用灵活 代理池运行状态指令可查:代理池 二.启用代理池并设置服务端口 代理池的启用与关闭,均为重启autMan生效 设置隧道代 ...
- 支付宝 IoT 设备入门宝典（下）设备经营篇
上篇介绍了支付宝 IoT 设备管理,但除了这些基础功能外,商户还可以利用设备进行一些运营动作,让设备更好的帮助自己,本篇就会以设备经营为中心,介绍常见的设备相关能力和问题解决方案.如果对上篇感兴趣,可 ...
- 导出和导入word样式模板
对于自己配置过之后常用的word样式可以导出作为样式模板, 可以重复使用. 举例说一下哪些是常用的word样式, 例如: (常见的): 中文的内容的样式, 中英文分别设置不同的样式 (比较高级的)多级 ...
- k8s dashboard token 生成/获取
创建示例用户 在本指南中,我们将了解如何使用 Kubernetes 的服务帐户机制创建新用户.授予该用户管理员权限并使用与该用户绑定的承载令牌登录仪表板. 对于以下每个和的代码片段ServiceAcc ...