Loading

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  阅读(649)  评论(0编辑  收藏  举报