首页 › CSS论坛 › 我的css学习博客（一）

琼穹之向 發表於 2021-4-24 15:38:00

我的css学习博客（一）

<h2>起因</h2>
<p>&nbsp; 在学习html，css与SQL的时候，我经常性会忘记具体的语法语句，几乎每次写代码时都需要重新查阅资料来复习语法，因此我决定从0开始复习css，并将我的学习过程记录下来。</p>
<p>&nbsp; 我的css学习博客应该会分为7~10节，本博客为第1节。</p>
<h2>css的代码规范</h2>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_8d9c8052-9b09-47c8-9c11-fc897c5d4c9d" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_8d9c8052-9b09-47c8-9c11-fc897c5d4c9d" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_8d9c8052-9b09-47c8-9c11-fc897c5d4c9d" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">&lt;style&gt;
    h1 </span>{<span style="color: rgba(255, 0, 0, 1)">    //选择器与{中间留有一个空格
      //展开而非挤在一行
      color</span>:<span style="color: rgba(0, 0, 255, 1)"> red</span>;<span style="color: rgba(255, 0, 0, 1)">
      //属性值前,冒号后留有一个空格
    </span>}<span style="color: rgba(128, 0, 0, 1)">
&lt;/style&gt;</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<h2>css的基础选择器</h2>
<h3>&nbsp; 1.标签选择器</h3>
<p>&nbsp; 即用<span style="color: rgba(255, 0, 0, 1)">html</span>中的标签为选择器，可统一设置此标签，使用方式如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_a11359c1-2105-449c-a285-c425fb48da08" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_a11359c1-2105-449c-a285-c425fb48da08" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_a11359c1-2105-449c-a285-c425fb48da08" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">&lt;style&gt;
    h1 </span>{<span style="color: rgba(255, 0, 0, 1)">         //标签名
      color</span>:<span style="color: rgba(0, 0, 255, 1)"> red</span>;
    }<span style="color: rgba(128, 0, 0, 1)">
&lt;/style&gt;</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp; 缺点是不能设置差异化样式。</p>
<h3>&nbsp; 2.类选择器</h3>
<p>&nbsp; 单独选择一个或者某几个标签的选择器，使用方式如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_8deb8242-0f63-4e22-9490-4b937fc688bd" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_8deb8242-0f63-4e22-9490-4b937fc688bd" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_8deb8242-0f63-4e22-9490-4b937fc688bd" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">&lt;style&gt;
    .类名 </span>{<span style="color: rgba(255, 0, 0, 1)">
      属性</span>:<span style="color: rgba(0, 0, 255, 1)"> 属性值</span>;<span style="color: rgba(255, 0, 0, 1)">
      ......
    </span>}<span style="color: rgba(128, 0, 0, 1)">
    &lt;div class="类名"&gt;&lt;/div&gt;
&lt;/style&gt;</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp; 多类名：一个标签可以拥有<span style="color: rgba(255, 0, 0, 1)">多个</span>类名，此标签同时具有多个类名的属性：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_cb9e2bbb-04ef-4ee0-b338-2528fc69738e" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_cb9e2bbb-04ef-4ee0-b338-2528fc69738e" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_cb9e2bbb-04ef-4ee0-b338-2528fc69738e" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">&lt;div class="类名1 类名2 类名3"&gt;&lt;/div&gt;</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<h3>&nbsp; 3.id选择器</h3>
<p>&nbsp; 使用方式及作用与类选择器相同，但只能被调用<span style="color: rgba(255, 0, 0, 1)">一次</span>，使用方式如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_8591e4b0-f544-4758-8f78-a67966f73c00" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_8591e4b0-f544-4758-8f78-a67966f73c00" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_8591e4b0-f544-4758-8f78-a67966f73c00" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">&lt;style&gt;
    #id名 </span>{<span style="color: rgba(255, 0, 0, 1)">
      属性</span>:<span style="color: rgba(0, 0, 255, 1)"> 属性值</span>;<span style="color: rgba(255, 0, 0, 1)">
      ......
    </span>}<span style="color: rgba(128, 0, 0, 1)">
    &lt;div id="id名"&gt;&lt;/div&gt;
&lt;/style&gt;</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp; 经常与JavaScript混合使用。</p>
<h3>&nbsp; 4.通配符选择器</h3>
<p>&nbsp; 用于修改所有的标签，使用方式如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_a8eef681-b3b2-4298-9808-e0b8792255dd" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_a8eef681-b3b2-4298-9808-e0b8792255dd" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_a8eef681-b3b2-4298-9808-e0b8792255dd" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">&lt;style&gt;
    * </span>{<span style="color: rgba(255, 0, 0, 1)">
      属性</span>:<span style="color: rgba(0, 0, 255, 1)"> 属性值</span>;<span style="color: rgba(255, 0, 0, 1)">
      ......
    </span>}<span style="color: rgba(128, 0, 0, 1)">
&lt;/style&gt;</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp;</p>
<h2>CSS的字体属性Fonts</h2>
<h3>&nbsp; 1.字体系列</h3>
<p>&nbsp; font-family用于定义标签的字体系列，使用方式如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_e27ee754-3309-4c80-862f-457e22759b55" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_e27ee754-3309-4c80-862f-457e22759b55" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_e27ee754-3309-4c80-862f-457e22759b55" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">div </span>{<span style="color: rgba(255, 0, 0, 1)">
    font-family</span>:<span style="color: rgba(0, 0, 255, 1)"> arial,"microsoft yahei","微软雅黑"</span>;
}</pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp; 优先使用第一种字体，若没有，再使用第二种....若都没有，则使用浏览器默认字体系列。</p>
<h3>&nbsp; 2.字体大小</h3>
<p>&nbsp; font-size用于定义字体大小，使用方式如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_32c971cb-4095-4bc1-83a1-a9dc2717c5bb" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_32c971cb-4095-4bc1-83a1-a9dc2717c5bb" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_32c971cb-4095-4bc1-83a1-a9dc2717c5bb" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">div </span>{<span style="color: rgba(255, 0, 0, 1)">
    font-size</span>:<span style="color: rgba(0, 0, 255, 1)"> 20px</span>;
}</pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp; px（像素值）为最常用单位（<span style="color: rgba(255, 0, 0, 1)">必须</span>跟单位），谷歌浏览器的默认文字大小为<span style="color: rgba(255, 0, 0, 1)">16px</span>。</p>
<p>&nbsp; 标题标签比较特殊，需要<span style="color: rgba(255, 0, 0, 1)">专门</span>指定文字大小，使用<span style="color: rgba(255, 0, 0, 1)">body</span>标签选择器改变<span style="color: rgba(255, 0, 0, 1)">标题</span>标签字体大小没有用。</p>
<h3>&nbsp; 3.字体粗细</h3>
<p>&nbsp; font-weight用于设置字体粗细，使用方式如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_01388e8f-84e8-4408-938f-1add63f5cdec" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_01388e8f-84e8-4408-938f-1add63f5cdec" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_01388e8f-84e8-4408-938f-1add63f5cdec" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">div </span>{<span style="color: rgba(255, 0, 0, 1)">
    font-weight</span>:<span style="color: rgba(0, 0, 255, 1)"> bold</span>;<span style="color: rgba(255, 0, 0, 1)">
    // bold = 700,normal = 400
</span>}</pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp; 实际开发中多用数字。</p>
<h3>&nbsp; 4.文字样式</h3>
<p>&nbsp; font-style用于设置字体的风格，使用方式如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_d1bdc4b9-354a-418b-a659-4a3e59625284" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_d1bdc4b9-354a-418b-a659-4a3e59625284" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_d1bdc4b9-354a-418b-a659-4a3e59625284" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">font-style: italic; //倾斜
font-style: normal; //倾斜的字体不倾斜</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp; 主要用于使倾斜的字体不倾斜。</p>
<h3>&nbsp; 5.字体复合属性</h3>
<p>&nbsp; font综合写样式，节省代码量，使用方式如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_fbec569b-b46e-474c-8df4-f6c6efaa4e64" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_fbec569b-b46e-474c-8df4-f6c6efaa4e64" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_fbec569b-b46e-474c-8df4-f6c6efaa4e64" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">font: font-style font-weight font-size/line-height font-family;</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp; 顺序<span style="color: rgba(255, 0, 0, 1)">不可颠倒</span>。</p>
<p>&nbsp; 不需要的属性可以省略（取默认值），但size和family不可省略，否则font不起作用。</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_41fbb640-4c9a-4cf3-bdc6-7d915f4e2f62" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_41fbb640-4c9a-4cf3-bdc6-7d915f4e2f62" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_41fbb640-4c9a-4cf3-bdc6-7d915f4e2f62" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">font: 20px "微软雅黑";</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp;</p>
<h2>CSS文本属性</h2>
<h3>&nbsp; 1.文本颜色</h3>
<p>&nbsp; 改变文本颜色，使用方式如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_310e724f-59d8-401c-b388-89ea4b485bad" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_310e724f-59d8-401c-b388-89ea4b485bad" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_310e724f-59d8-401c-b388-89ea4b485bad" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">color: red;               //预定义的颜色值
color: #ff0000;      //十六进制
color: rgb(255,0,0); //RGB值</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp; RGB与十六进制都用吸管工具复制，开发多用十六进制。</p>
<h3>&nbsp; 2.对齐文本</h3>
<p>&nbsp; text-align用于设置元素内文本内容的水平对齐方式，使用方式如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_47c3379c-def5-4b40-ab4d-c024bcbc3655" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_47c3379c-def5-4b40-ab4d-c024bcbc3655" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_47c3379c-def5-4b40-ab4d-c024bcbc3655" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">text-align: center;//或left,right</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<h3>&nbsp; 3.装饰文本</h3>
<p>&nbsp; text-decoration属性用于修饰文本，如添加下划线、删除线、上划线，使用方式如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_b02cf54f-473a-446b-adc7-21d4c6e8f659" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_b02cf54f-473a-446b-adc7-21d4c6e8f659" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_b02cf54f-473a-446b-adc7-21d4c6e8f659" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">text-decoration: underline;      //下划线
text-decoration: line-through; //删除线
text-decoration: overline;       //上划线
text-decoration: none;         //默认(没有线)</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp; none可用于去掉链接的下划线。下划线为重点，其他的较少使用。</p>
<h3>&nbsp; 4.文本缩进</h3>
<p>&nbsp; text-indent用于制定文本第一行的缩进距离，多用于首行缩进，使用方式如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_caafaada-148e-4bbc-b8ae-50a446305aac" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_caafaada-148e-4bbc-b8ae-50a446305aac" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_caafaada-148e-4bbc-b8ae-50a446305aac" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">text-indent: 20px;//首行缩进,负值也可以
text-indent: 2em;</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp; em是个相对单位，1em就是当前font-size一个文字的大小，若当前元素没有设置大小，则会按照父元素的一个文字大小。</p>
<h3>&nbsp; 5.行间距</h3>
<p>&nbsp; line-height用于设置行间距（行高），可以控制行与行之间的距离，使用方法如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_a9cbf9d2-3538-417d-a294-258f82e894e3" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_a9cbf9d2-3538-417d-a294-258f82e894e3" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_a9cbf9d2-3538-417d-a294-258f82e894e3" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">line-height: 26px;</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp; 行间距包括文本高度和上下间距，例如文本高度为16px，行间距为26px时，上下间距都为5px。</p>
<h2>css引入方式</h2>
<h3>&nbsp; 1.内部样式表（嵌入式引入）</h3>
<p>&nbsp; 此种方式是写到html页面内部，将css代码全部单独放入style标签里面中。</p>
<p>&nbsp; style标签理论可以放在html文档的任何地方，但一般放在head中。</p>
<p>&nbsp; 并没有完全实现结构与样式分离。</p>
<h3>&nbsp; 2.行内样式表</h3>
<p>&nbsp; 此种方式是在元素标签内部的style属性中设定css方式，适用于修改简单样式，方式如下：</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_bba0fbab-88b9-4bca-a5d8-e12501a604ac" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_bba0fbab-88b9-4bca-a5d8-e12501a604ac" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_bba0fbab-88b9-4bca-a5d8-e12501a604ac" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">&lt;div style="color: red; font-size: 12px;"&gt;我是kckv&lt;/div&gt;</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp; 只能控制当前标签。（个人感觉十分鸡肋）</p>
<h3>&nbsp; 3.外部样式表</h3>
<p>&nbsp; 实际开发都是此种方式，适合样式比较多的情况，样式单独写到css文件中，之后把css文件引入到html页面中使用。方式如下：</p>
<p>　　1.新建一个后缀名为.css的样式文件，将所有css代码放入（style不用放）。</p>
<p>　　2.在html文件中使用link标签引入这个文件。</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_1a2443ec-71be-4749-93b3-26ab4bb90b85" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_1a2443ec-71be-4749-93b3-26ab4bb90b85" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_1a2443ec-71be-4749-93b3-26ab4bb90b85" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">&lt;link rel="stylesheet" href="css文件路径"&gt;</span></pre>
</div>
<span class="cnblogs_code_collapse">link使用方式</span></div>
<p>&nbsp; 并且可以控制多个页面，重复利用。</p><br><br>
来源：https://www.cnblogs.com/kckv/p/14697027.html

查看完整版本: 我的css学习博客（一）