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 脚本知识！

系列文章导航

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

posted @ 2022-10-11 20:28 FreeSql 阅读(694) 评论(0) 编辑收藏举报

刷新页面返回顶部

Loading

FreeSql

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

前言

如何使用 CSS

id 和 class 选择器

CSS 样式

系列文章导航

公告