Asp.net core 少走弯路系列教程（三）CSS 学习
<h1 id="前言">前言</h1><p>新人学习成本很高，网络上太多的名词和框架，全部学习会浪费大量的时间和精力。</p>
<p>新手缺乏学习内容的辨别能力，本系列文章为新手过滤掉不适合的学习内容（比如多线程等等），让新手少走弯路直通罗马。</p>
<p>作者认为新人应该先打好基础，不要直接学习框架，例如先掌握 SQL 再使用 EFCore 框架。</p>
<p>作者只传授数年内不会变化的知识，让新手学习快速进入跑道受益终身。</p>
<p>分享使我快乐，请务必转发给同学，朋友，让大家都少走一些弯路！！</p>
<hr>
<p>W3C 是一群大佬制定的 WEB 标准规范，包括 HTML/CSS/JavaScript、HTTP协议等等。所有厂商遵循行业标准，比如前端的浏览器（Chrome/IE/Firefox），后端的WEB服务器（Nginx/Apache/IIS）。（思考：如果 IE浏览器 只能访问 IIS 服务器？）</p>
<p>我们基于 WEB 之上的码农，只需要学习好这些标准知识，就可以在任何编程语言下通用，这些知识未来几十年都不过时。</p>
<p>W3C 虽然标准，但也不是每项技术都值得新人学习（例如 XHTML/XSL），对于新手而言，<strong>只推荐学习 HTML/CSS/JavaScript、HTTP协议</strong>。</p>
<hr>
<h1 id="如何使用-css">如何使用 CSS</h1>
<p>CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。</p>
<p>CSS 可以通过以下方式添加到HTML中:</p>
<ul>
<li>内联样式 - 在HTML元素中使用"style" 属性</li>
<li>内部样式表 - 在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS</li>
<li>外部引用 - 使用外部 CSS 文件（最好的方式是通过外部引用CSS文件）</li>
</ul>
<pre><code class="language-html"><body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
</code></pre>
<p>或者</p>
<pre><code class="language-html"><head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
</code></pre>
<p>或者</p>
<pre><code class="language-html"><head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</code></pre>
<p>mystyle.css</p>
<pre><code class="language-css">body {
background-color:#d0e4fe;
}
h1 {
color:orange;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
/*这是个注释*/
</code></pre>
<hr>
<h1 id="id-和-class-选择器">id 和 class 选择器</h1>
<p>如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。</p>
<p>以下的样式规则应用于元素属性 id="para1":</p>
<pre><code class="language-html"><style>
#para1
{
text-align:center;
color:red;
}
</style>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</code></pre>
<p>在以下的例子中，所有拥有 center 类的 HTML 元素均为居中：</p>
<pre><code class="language-html"><style>
.center
{
text-align:center;
}
</style>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</code></pre>
<p>你也可以指定特定的 HTML 元素使用 class。</p>
<p>在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中：</p>
<pre><code class="language-html"><style>
p.center
{
text-align:center;
}
</style>
<div class="center">标题没有居中。</div>
<p class="center">段落居中。</p>
</code></pre>
<p>多个 class 选择器可以使用空格分开：</p>
<pre><code class="language-html"><style>
.center { text-align:center; }
.color { color:#ff0000; }
</style>
<div class="center color">标题居中，红色</div>
</code></pre>
<hr>
<h1 id="css-样式">CSS 样式</h1>
<ul>
<li>背景颜色 background-color:#b0c4de;</li>
<li>背景图像 background-image:url('paper.gif');</li>
<li>背景简写 background:#b0c4de url('paper.gif') no-repeat right top;</li>
<li>文本颜色 color:#00ff00;</li>
<li>文本对齐 text-align:center;</li>
<li>文本字体 font-family:"Times New Roman",Times,serif;</li>
<li>字体大小 font-size:30px;</li>
<li>链接样式</li>
</ul>
<pre><code class="language-html">a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
</code></pre>
<ul>
<li 1px="">表格边框 table,th,td</li>
<li>表格宽度和高度 table { width:100%; } th</li>
<li>表格文字对齐 td</li>
<li>表格填充 td</li>
<li>表格颜色 th</li>
<li>宽度和高度</li>
<li>外边距</li>
<li>内边距</li>
</ul>
<p>嵌套选择器：</p>
<ul>
<li>p{ }: 为所有 p 元素指定一个样式。</li>
<li>.marked{ }: 为所有 class="marked" 的元素指定一个样式。</li>
<li>.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。</li>
<li>p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。</li>
</ul>
<pre><code>参考：https://www.runoob.com
</code></pre>
<p>CSS 内容体系还有很多，但是对新手而已学到这里算入门了，千万不要指望一下能吃下所有内容（贪吃蛇的后果），只有反复的实战才能彻底领会。</p>
<p>到这里，你已经对 CSS 有了初步的认识，为我们以后深入打下了基础，下一篇我们学习 JavaScript 脚本知识！</p>
<hr>
<h2 id="系列文章导航">系列文章导航</h2>
<ul>
<li>（一）了解 W3C</li>
<li>（二）HTML 学习</li>
<li>（三）CSS 学习</li>
<li>（四）JavaScript 学习</li>
<li>（五）了解 HTTP 协议</li>
<li>（六）C# 语法学习</li>
<li>（七）WebApi 学习</li>
<li>（八）数据库 CRUD 增删改查学习</li>
<li>（九）待续。。</li>
</ul>
<p>原创保护，转载请注明出处：https://www.cnblogs.com/FreeSql/p/16782488.html</p><br><br>
来源：https://www.cnblogs.com/FreeSql/p/16741992.html
頁:
[1]