一文诠释：CSS语法、注释、运用方式、选取器。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">写在开篇</h2>html的内容，想要改变它的样式？<span style="color: black;">例如</span>颜色、字体、布局，等等，怎么破？CSS代码带你起飞！<h2 style="color: black; text-align: left; margin-bottom: 10px;">css语法</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css的语法非常简单，如下：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">选取</span>器 {属性: 值;属性:值}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">例如：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">h2 {color: cornflowerblue;font-size: 60px;}
</div>上面的h2是元素<span style="color: black;">选取</span>器，属性color，它的值是cornflowerblue。属性font-size，它的值是60px。<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">运用</span>css的3种方式</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">有3种css的<span style="color: black;">运用</span>方式：</p><span style="color: black;">外边</span> CSS内部 CSS行内 CSS虽然有3种，但笔者只讲<span style="color: black;">外边</span>css，在<span style="color: black;">实质</span><span style="color: black;">研发</span>中，内容<span style="color: black;">必要</span>和样式分离，大有好处，慢慢体会吧！<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">那样</span><span style="color: black;">怎样</span><span style="color: black;">运用</span><span style="color: black;">外边</span>的css？<span style="color: black;">必须</span>在html的head中<span style="color: black;">经过</span>link来引入，如下：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><head>
<link rel="stylesheet" href="./test.css">
</head>
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">css代码中<span style="color: black;">怎样</span>写注释</h2>在写代码的过程中，注释很<span style="color: black;">要紧</span>。但不要<span style="color: black;">茫然</span>的注释，对<span style="color: black;">重要</span>的、<span style="color: black;">要紧</span>的<span style="color: black;">规律</span>做简单明了的注释<span style="color: black;">就可</span>，<span style="color: black;">否则</span>写的代码看起来跟一坨屎没什么区别。<span style="color: black;">那样</span>在css代码中，<span style="color: black;">亦</span>是<span style="color: black;">能够</span>做注释的。当然了，该注释的时候就注释，<span style="color: black;">不应</span>注释的时候就别注释。那到底要不要加注释？算了，随你吧！不！我还是啰嗦一下，对简单明了、见名知意的代码就<span style="color: black;">不必</span>注释了，要<span style="color: black;">尽可能</span>让<span style="color: black;">咱们</span>的代码看起来简洁、优雅。笔者曾经接手过一个项目，看了别人写的代码之后，<span style="color: black;">便是</span>一坨屎。我看个屁啊！直接重写，看都不想看了。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">回到正题，解锁3种注释姿势。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">姿势1：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">/* 注释内容 */
h2,h3,p{
text-align: center;
color: cornflowerblue;
font-size: 60px;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">姿势2：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">/* 注释内容，注释内容，
注释内容。
*/
h2,h3,p{
text-align: center;
color: cornflowerblue;
font-size: 60px;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">姿势3：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">h2,h3,p{
text-align: center;
color: cornflowerblue; /* 注释内容 */
font-size: 60px;
}
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">css<span style="color: black;">选取</span>器</h2>css的<span style="color: black;">选取</span>器很<span style="color: black;">要紧</span>，<span style="color: black;">因此</span>笔者单独拿出来讲了。下面<span style="color: black;">咱们</span>剖析一下5种<span style="color: black;">选取</span>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. 元素<span style="color: black;">选取</span>器</h2>元素<span style="color: black;">选取</span>器<span style="color: black;">便是</span><span style="color: black;">经过</span>元素来进行<span style="color: black;">选取</span>，并设置css样式，看下面小栗子。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">创建home.html文件</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全栈运维学习</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p>面向运维编程</p>
<p>面向运维编程</p>
</body>
</html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">创建test.css文件</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">p {
text-align: center;
color: red;
}
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. id<span style="color: black;">选取</span>器</h2><span style="color: black;">经过</span>id<span style="color: black;">选取</span>器，来<span style="color: black;">选取</span>元素，前提<span style="color: black;">要求</span>是元素<span style="color: black;">必须</span>设置了id，看下面的小栗子。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">创建home.html文件</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全栈运维学习</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p id="a1">面向运维编程</p>
<p id="a2">面向运维编程</p>
</body>
</html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">创建test.css文件</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">#a1 {
text-align: center;
color: blue;
font-size: 100px;
}
</div>id<span style="color: black;">选取</span>器的语
你的留言真是温暖如春，让我感受到了无尽的支持与鼓励。 大势所趋，用于讽刺一些制作目的就是为了跟风玩梗，博取眼球的作品。 你的见解独到，让我受益匪浅，期待更多交流。 你的见解真是独到，让我受益匪浅。
页:
[1]