首页 › CSS论坛 › CSS学习笔记

聪明 發表於 2020-6-3 17:50:00

CSS学习笔记

<h2><span style="font-size: 14px"><span style="text-decoration: underline">https://www.runoob.com/css/css-tutorial.html</span></span></h2>
<h2><span style="font-size: 14px"><span style="font-family: 仿宋">学习</span>CSS网址</span></h2>
<h2><span style="font-family: 仿宋; font-size: 14px">以下对部分内容做提炼</span></h2>
<p><span style="font-size: 14px">&nbsp;</span></p>
<h2><span style="font-size: 14px">CSS 指层叠样式表 (Cascading&nbsp;Style&nbsp;Sheets)</span></h2>
<h2><span style="font-size: 14px"><span style="font-family: 仿宋">样式定义</span><span style="font-family: 仿宋">如何显示</span>&nbsp;HTML 元素</span></h2>
<h2><span style="font-size: 14px"><span style="font-family: 仿宋">样式通常存储在</span><span style="font-family: 仿宋">样式表</span><span style="font-family: 仿宋">中</span></span></h2>
<h2>&nbsp;</h2>
<p>&nbsp;</p>
<h1><strong>CSS&nbsp;</strong><strong><span style="font-family: Helvetica">语法</span></strong></h1>
<h2><span style="font-size: 13px">CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:</span></h2>
<p class="p"><span style="font-size: 13px">&nbsp;</span></p>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">选择器通常是您需要改变样式的</span> HTML 元素。</span></h2>
<h2><span style="font-family: 仿宋; font-size: 13px">每条声明由一个属性和一个值组成。</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">属性（</span>property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。</span></h2>
<h2><span style="font-size: 13px">&nbsp;</span></h2>
<h2><span style="font-size: 13px">CSS声明总是以分号(;)结束，声明总以大括号({})括起来:</span></h2>
<h2><span style="font-size: 13px">p {color:red;text-align:center;}</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">为了让</span>CSS可读性更强，可以每行只描述一个属性:</span></h2>
<h2><span style="font-family: 仿宋; font-size: 13px">实例</span></h2>
<h2><span style="font-size: 13px">p</span><br><span style="font-size: 13px">{</span><br><span style="font-size: 13px">color:red;</span><br><span style="font-size: 13px">text-align:center;</span><br><span style="font-size: 13px">}</span></h2>
<p><span style="font-size: 13px">&nbsp;</span></p>
<h2><strong>CSS 注释</strong></h2>
<h2><span style="font-family: 仿宋; font-size: 13px">注释是用来解释你的代码，浏览器会忽略它。</span></h2>
<h2><span style="font-size: 13px">CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:</span></h2>
<h2><span style="font-size: 13px">/*这是个注释*/</span><br><span style="font-size: 13px">p</span><br><span style="font-size: 13px">{</span><br><span style="font-size: 13px">text-align:center;</span><br><span style="font-size: 13px">/*这是另一个注释*/</span><br><span style="font-size: 13px">color:black;</span><br><span style="font-size: 13px">font-family:arial;</span><br><span style="font-size: 13px">}</span></h2>
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2><span style="font-size: 13px"><strong>CSS&nbsp;</strong><strong>Id</strong><strong>&nbsp;和&nbsp;</strong><strong>Class</strong><span style="font-family: 仿宋">如果你要在</span>HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。</span></h2>
<h2><span style="font-size: 13px">&nbsp;</span></h2>
<h2><span style="font-size: 13px">id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。</span></h2>
<h2><span style="font-size: 13px">HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">以下的样式规则应用于元素属性</span> id="para1":</span></h2>
<h2><span style="font-family: 仿宋; font-size: 13px">实例</span></h2>
<h2><span style="font-size: 13px">#para1 { text-align:center; color:red; }</span></h2>
<h2><span style="font-size: 13px">ID属性不要以数字开头<span style="font-family: 仿宋">！</span></span></h2>
<h2>&nbsp;</h2>
<h2><span style="font-size: 13px">class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。</span></h2>
<h2><span style="font-size: 13px">class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">在以下的例子中，所有拥有</span> center 类的 HTML 元素均为居中。</span></h2>
<h2><span style="font-family: 仿宋; font-size: 13px">实例</span></h2>
<h2><span style="font-size: 13px">.center {text-align:center;}</span></h2>
<h2><span style="font-size: 13px">&nbsp;</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">也可以指定特定的</span>HTML元素使用class。</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">在以下实例中</span>, 所有的 p 元素使用 class="center" 让该元素的文本居中:</span></h2>
<h2><span style="font-family: 仿宋; font-size: 13px">实例</span></h2>
<h2><span style="font-size: 13px">p.center {text-align:center;}</span></h2>
<h2><span style="font-size: 13px">&nbsp;</span></h2>
<h2><span style="font-family: 仿宋; font-size: 13px">类名的第一个字符不能使用数字！</span></h2>
<p>&nbsp;</p>
<h1><strong>&nbsp;</strong></h1>
<h1><strong>CSS&nbsp;</strong><strong><span style="font-family: Helvetica">创建</span></strong></h1>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">当读到一个样式表时，浏览器会根据它来格式化</span> HTML 文档。</span></h2>
<h2><span style="font-size: 13px">&nbsp;</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">插入样式表的方法有三种</span>:</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">外部样式表</span>(External style sheet)</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">内部样式表</span>(Internal style sheet)</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">内联样式</span>(Inline style)</span></h2>
<p><span style="font-size: 13px">&nbsp;</span></p>
<h2><strong><span style="font-family: Helvetica">外部样式表</span></strong></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用</span> &lt;link&gt; 标签链接到样式表。 &lt;link&gt; 标签在（文档的）头部：</span></h2>
<h2><span style="font-size: 13px">&lt;head&gt; </span></h2>
<h2><span style="font-size: 13px">&lt;link rel="stylesheet" type="text/css" href="mystyle.css"&gt; </span></h2>
<h2><span style="font-size: 13px">&lt;/head&gt;</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">浏览器会从文件</span> mystyle.css 中读到样式声明，并根据它来格式文档。</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的</span> html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：</span></h2>
<h2><span style="font-size: 13px">hr {color:sienna;} </span></h2>
<h2><span style="font-size: 13px">p {margin-left:20px;} </span></h2>
<h2><span style="font-size: 13px">body {background-image:url("/images/back40.gif");}</span></h2>
<h2><span style="font-size: 13px">&nbsp;</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">不要在属性值与单位之间留有空格（如：</span>"margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。</span></h2>
<h2><span style="font-size: 13px"><strong>&nbsp;</strong></span></h2>
<h2><strong><span style="font-family: Helvetica">内部样式表</span></strong></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用</span> &lt;style&gt; 标签在文档头部定义内部样式表，就像这样:</span></h2>
<h2><span style="font-size: 13px">&lt;head&gt; </span></h2>
<h2><span style="font-size: 13px">&lt;style&gt; </span></h2>
<h2><span style="font-size: 13px">hr {color:sienna;} </span></h2>
<h2><span style="font-size: 13px">p {margin-left:20px;} </span></h2>
<h2><span style="font-size: 13px">body {background-image:url("images/back40.gif");} </span></h2>
<h2><span style="font-size: 13px">&lt;/style&gt; </span></h2>
<h2><span style="font-size: 13px">&lt;/head&gt;</span></h2>
<h2><span style="font-size: 13px">&nbsp;</span></h2>
<p><span style="font-size: 13px">&nbsp;</span></p>
<h2><strong><span style="font-family: Helvetica">内联样式</span></strong></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">由</span><span style="font-family: 仿宋">于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。</span></span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">要使用内联样式，你需要在相关的标签内使用样式（</span>style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：</span></h2>
<h2><span style="font-size: 13px">&lt;p style="color:sienna;margin-left:20px"&gt;这是一个段落。&lt;/p&gt;</span></h2>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2><strong><span style="font-family: Helvetica">多重样式</span></strong></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">如</span><span style="font-family: 仿宋">果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。</span>&nbsp;</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">例如，外部样式表拥有针对</span> h3 选择器的三个属性：</span></h2>
<h2><span style="font-size: 13px">h3 { color:red; text-align:left; font-size:8pt; }</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">而内部样式表拥有针对</span> h3 选择器的两个属性：</span></h2>
<h2><span style="font-size: 13px">h3 { text-align:right; font-size:20pt; }</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">假如拥有内部样式表的这个页面同时与外部样式表链接，那么</span> h3 得到的样式是：</span></h2>
<h2><span style="font-size: 13px">color:red; text-align:right; font-size:20pt;</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">即颜色属性将被继承于外部样式表，而文字排列（</span>text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。</span></h2>
<p><span style="font-size: 13px">&nbsp;</span></p>
<h2><strong><span style="font-family: Helvetica">多重样式优先级</span></strong></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">样式表允许以多种方式规定样式信息。样式可以规定在单个的</span> HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。</span></h2>
<h2><span style="font-family: 仿宋; font-size: 13px">一般情况下，优先级如下：</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">内联样式）</span>Inline style &gt; （内部样式）Internal style sheet &gt;（外部样式）External style sheet &gt; 浏览器默认样式</span></h2>
<h2><span style="font-size: 13px">&lt;head&gt; &lt;!-- 外部样式 style.css --&gt; &lt;link rel="stylesheet" type="text/css" href="style.css"/&gt; &lt;!-- 设置：h3{color:blue;} --&gt; &lt;style type="text/css"&gt; /* 内部样式 */ h3{color:green;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h3&gt;测试！&lt;/h3&gt; &lt;/body&gt;</span></h2>
<h2><span style="font-family: 仿宋; font-size: 13px">注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。</span></h2>
<h2>&nbsp;</h2>
<p>&nbsp;</p>
<h1><strong>CSS&nbsp;</strong><strong><span style="font-family: Helvetica">背景</span></strong></h1>
<p>&nbsp;</p>
<h2><span style="font-size: 13px">CSS 背景属性用于定义HTML元素的背景。</span></h2>
<h2><span style="font-size: 13px">CSS 属性定义背景效果:</span></h2>
<h2><span style="font-size: 13px">background-color</span></h2>
<h2><span style="font-size: 13px">background-image</span></h2>
<h2><span style="font-size: 13px">background-repeat</span></h2>
<h2><span style="font-size: 13px">background-attachment</span></h2>
<h2><span style="font-size: 13px">background-position</span></h2>
<h2><span style="font-size: 13px"><strong>&nbsp;</strong></span></h2>
<h2><strong><span style="font-family: Helvetica">背景颜色</span></strong></h2>
<h2><span style="font-size: 13px">background-color 属性定义了元素的背景颜色.</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">页面的背景颜色使用在</span>body的选择器中:</span></h2>
<h2><span style="font-family: 仿宋; font-size: 13px">实例</span></h2>
<h2><span style="font-size: 13px">body {}</span></h2>
<h2><span style="font-size: 13px">&nbsp;</span></h2>
<h2><span style="font-size: 13px">CSS中，颜色值通常以以下方式定义:</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">十六进制</span> - 如："#ff0000"</span></h2>
<h2><span style="font-size: 13px">RGB - 如："rgb(255,0,0)"</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">颜色名称</span> - 如："red"</span></h2>
<h2><span style="font-size: 13px"><span style="font-family: 仿宋">以下实例中</span>, h1, p, 和 div 元素拥有不同的背景颜色:</span></h2>
<h2><span style="font-family: 仿宋; font-size: 13px">实例</span></h2>
<h2><span style="font-size: 13px">h1 {}</span><br><span style="font-size: 13px">p {background-color:#e0ffff;}</span><br><span style="font-size: 13px">div {background-color:#b0c4de;}</span></h2>
<p><span style="font-size: 13px">&nbsp;</span></p>
<p><span style="font-size: 13px">&nbsp;</span></p>
<h2><strong><span style="font-family: Helvetica">背景图像</span></strong></h2>
<p class="p"><span style="font-size: 13px">background-image 属性描述了元素的背景图像.</span></p>
<p class="p"><span style="font-size: 13px"><span style="font-family: 仿宋">默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体</span>.</span></p>
<p class="p"><span style="font-size: 13px"><span style="font-family: 仿宋">页面背景图片设置实例</span>:</span></p>
<h2><span style="font-family: 仿宋; font-size: 13px">实例</span></h2>
<p><span style="font-size: 13px">body {background-image:url('paper.gif');}</span></p>
<p class="p"><span style="font-size: 13px"><span style="font-family: 仿宋">默认情况下</span> background-image 属性会在页面的水平或者垂直方向平铺。</span></p>
<h2><span style="font-size: 13px"><strong>&nbsp;</strong></span></h2>
<h2><strong><span style="font-family: Helvetica">背景图像</span> - 水平或垂直平铺</strong></h2>
<p class="p"><span style="font-size: 13px"><span style="font-family: 仿宋">如果图像只在水平方向平铺</span> (repeat-x), 页面背景会更好些:</span></p>
<p class="p"><span style="font-family: 仿宋; font-size: 13px">实例</span></p>
<p class="p"><span style="font-size: 13px">body</span><br><span style="font-size: 13px">{</span><br><span style="font-size: 13px">background-image:url('gradient2.png');</span><br><span style="font-size: 13px">background-repeat:repeat-x;</span><br><span style="font-size: 13px">}</span></p>
<h2><strong>&nbsp;</strong></h2>
<h2><strong><span style="font-family: Helvetica">背景图像</span>- 设置定位与不平铺</strong></h2>
<p class="p"><span style="font-family: 仿宋; font-size: 13px">让背景图像不影响文本的排版</span></p>
<p class="p"><span style="font-size: 13px"><span style="font-family: 仿宋">如果你不想让图像平铺，你可以使用</span> background-repeat 属性:</span></p>
<p class="p"><span style="font-family: 仿宋; font-size: 13px">实例</span></p>
<p class="p"><span style="font-size: 13px">body</span><br><span style="font-size: 13px">{</span><br><span style="font-size: 13px">background-image:url('img_tree.png');</span><br><span style="font-size: 13px">background-repeat:no-repeat;</span><br><span style="font-size: 13px">}</span></p>
<p class="p"><span style="font-size: 13px">&nbsp;</span></p>
<p class="p"><span style="font-family: 仿宋; font-size: 13px">为了让页面排版更加合理，不影响文本的阅读，可以改变图像的位置。</span></p>
<p class="p"><span style="font-size: 13px"><span style="font-family: 仿宋">可以利用</span> background-position 属性改变图像在背景中的位置:</span></p>
<p class="p"><span style="font-family: 仿宋; font-size: 13px">实例</span></p>
<p class="p"><span style="font-size: 13px">body</span><br><span style="font-size: 13px">{</span><br><span style="font-size: 13px">background-image:url('img_tree.png');</span><br><span style="font-size: 13px">background-repeat:no-repeat;</span><br><span style="font-size: 13px">background-position:right top;</span><br><span style="font-size: 13px">}</span></p>
<p class="p">&nbsp;</p>
<h2><strong><span style="font-family: Helvetica">背景</span>- 简写属性</strong></h2>
<p class="p"><span style="font-size: 13px"><span style="font-family: 仿宋">简化这些属性的代码，可以将这些属性合并在同一个属性中</span>.</span></p>
<p class="p"><span style="font-size: 13px"><span style="font-family: 仿宋">背景颜色的简写属性为</span> "background":</span></p>
<p class="p"><span style="font-family: 仿宋; font-size: 13px">实例</span></p>
<p class="p"><span style="font-size: 13px">body {background:#ffffff url('img_tree.png') no-repeat right top;}</span></p>
<p class="p"><br><span style="font-size: 13px"><span style="font-family: 仿宋">当使用简写属性时，属性值的顺序为：</span>:</span></p>
<p class="p"><span style="font-size: 13px">background-color</span></p>
<p class="p"><span style="font-size: 13px">background-image</span></p>
<p class="p"><span style="font-size: 13px">background-repeat</span></p>
<p class="p"><span style="font-size: 13px">background-attachment</span></p>
<p class="p"><span style="font-size: 13px">background-position</span></p>
<p class="p"><span style="font-size: 13px">&nbsp;</span></p>
<p class="p">&nbsp;</p>
<p class="p"><span style="font-size: 13px">未完待续</span></p><br><br>
来源：https://www.cnblogs.com/3467580254zsb/p/13039088.html

查看完整版本: CSS学习笔记