我的css学习博客（二）

对于饭圈人迷来说说事实就是黑 發表於 2021-4-25 16:02:00

<h2 id="hid-YpXWhc">起因</h2>
<p>        在学习html，css与SQL的时候，我经常性会忘记具体的语法语句，几乎每次写代码时都需要重新查阅资料来复习语法，因此我决定从0开始复习css，并将我的学习过程记录下来。</p>
<p style="margin-left: 30px">我的css学习博客应该会分为7~10节，本博客为第2节。</p>
<h2>Emmet语法</h2>
<p style="margin-left: 30px">Emmet语法用缩写来提高html/css的编写速度。</p>
<h3>  1.快速生成html结构语法</h3>
<p style="margin-left: 30px">①.生成标签时直接输入标签名按tab键即可。</p>
<p style="margin-left: 30px">②.生成多个相同标签加上*号即可，例如div*10再按tab键。</p>
<p style="margin-left: 30px">③.生成父子级标签可使用>，例如ul>li再按tab键。</p>
<p style="margin-left: 30px">④.生成兄弟级标签可使用+，例如div+p再按tab键。</p>
<p style="margin-left: 30px">⑤.如果生成带有类名或者id名，写p.类名或span#id名即可，.或#前为标签名（不加默认为div）。</p>
<p style="margin-left: 30px">⑥.如果生成的类名是有数字顺序的，可使用$，例如.demo$*5会生成demo1、demo2...demo5。</p>
<p style="margin-left: 30px">⑦.若想在生成的标签内部写内容可用{}，例如div{我是kckv}。</p>
<h3>  2.快速生成css样式语法</h3>
<p style="margin-left: 30px">属性首字母+属性值首字母+tab键可快速生成css代码。例如lh26px 为 line-height: 26px。</p>
<h2>css复合选择器</h2>
<h3>  1.后代选择器</h3>
<p style="margin-left: 30px">又称为包含选择器，可以选择父元素的子元素，写法如下：</p>
<div class="cnblogs_code" style="margin-left: 30px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_12222978-5f02-4453-a610-00d2777036fa" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_12222978-5f02-4453-a610-00d2777036fa" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_12222978-5f02-4453-a610-00d2777036fa" class="cnblogs_code_hide">
<pre><span style="color: rgba(0, 0, 0, 1)">ul li {
color: red;
}
</span><ul>
<li>我是kckv</li>
<li>我是kckv</li>
<li>我是kckv</li>
</ul></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p style="margin-left: 30px">元素1为父元素，元素2为子元素，最终选择的为子元素。</p>
<p style="margin-left: 30px">元素2之后还可以添加子元素，元素3为元素2的子元素，以此类推。</p>
<div class="cnblogs_code" style="margin-left: 30px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_3fb65162-402a-404f-8fd0-8645e08f6430" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_3fb65162-402a-404f-8fd0-8645e08f6430" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_3fb65162-402a-404f-8fd0-8645e08f6430" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">ul li a </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)">
<li>我是kckv<a href="#">我是kckvv</a></li></span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p style="margin-left: 30px">后代选择器对所有父元素中相同子元素都起作用。</p>
<div class="cnblogs_code" style="margin-left: 30px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_4dc10c5d-691d-4596-bd3d-12f63e9e7c43" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_4dc10c5d-691d-4596-bd3d-12f63e9e7c43" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_4dc10c5d-691d-4596-bd3d-12f63e9e7c43" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">ul a </span>{<span style="color: rgba(255, 0, 0, 1)">
color</span>:<span style="color: rgba(0, 0, 255, 1)"> pink</span>;
}<span style="color: rgba(128, 0, 0, 1)">
<li>我是kckv啊<a href="#">我是kckvv</a></li>
<a href="#">我是kckv</a>
不论是li中的a，还是li外的a都会变色。</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p style="margin-left: 30px">元素1，元素2可以是任意的基础选择器（类选择器等）。</p>
<div class="cnblogs_code" style="margin-left: 30px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_38a83425-0818-41ac-a23e-2da599f34d72" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_38a83425-0818-41ac-a23e-2da599f34d72" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_38a83425-0818-41ac-a23e-2da599f34d72" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">.nav li a </span>{<span style="color: rgba(255, 0, 0, 1)">
color</span>:<span style="color: rgba(0, 0, 255, 1)"> pink</span>;
}<span style="color: rgba(128, 0, 0, 1)">
<ul class="nav">
<li>我是kckv</li>
<li>我是kckv</li>
<li><a href="#">我是kckvv</a></li>
</ul></span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<h3>  2.子选择器</h3>
<p style="margin-left: 30px">只能选择作为某元素的最近一级子元素。使用方式如下：</p>
<div class="cnblogs_code" style="margin-left: 30px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_33d15459-c186-4184-8927-b4d2e25b710c" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_33d15459-c186-4184-8927-b4d2e25b710c" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_33d15459-c186-4184-8927-b4d2e25b710c" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">.nav > a </span>{<span style="color: rgba(255, 0, 0, 1)">
color</span>:<span style="color: rgba(0, 0, 255, 1)"> pink</span>;
}<span style="color: rgba(128, 0, 0, 1)">
<ul class="nav">
<li><a href="#">我是kckvv</a></li>
   <a href="#">我是kckv</a>
</ul>
只有第二个“我是kckv”会变为粉色。</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<h3>  3.并集选择器</h3>
<p>        可以选择多组标签，同时为他们定义同样的样式，通常用于集体声明。使用方式如下：</p>
<div class="cnblogs_code" style="margin-left: 30px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_527cfa6b-79c8-4b22-9769-b4c41fa909ef" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_527cfa6b-79c8-4b22-9769-b4c41fa909ef" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_527cfa6b-79c8-4b22-9769-b4c41fa909ef" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">div,
p,
.nav > li </span>{<span style="color: rgba(255, 0, 0, 1)">
color</span>:<span style="color: rgba(0, 0, 255, 1)"> pink</span>;
}<span style="color: rgba(128, 0, 0, 1)">
<div>我是div</div>
<p>我是p</p>
<ul class="nav">
<li>我是li一</li>
<li>我是li二</li>
<li>我是li三</li>
</ul></span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<h3>  4.伪类选择器</h3>
<p>　　用于给某些选择器添加特殊的效果，最大的特点是用：来表示</p>
<h4>　　①链接伪类选择器</h4>
<div class="cnblogs_code" style="margin-left: 60px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_edc10fa9-1abc-4841-946b-35c8a5493d7c" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_edc10fa9-1abc-4841-946b-35c8a5493d7c" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_edc10fa9-1abc-4841-946b-35c8a5493d7c" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">a:link    //选择所有未被访问的链接
a:visited //选择所有已被访问的链接
a:hover //选择鼠标指针位于其上的链接
a:active //选择活动链接（鼠标按下来未弹起的链接）</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>　　　　为了确保生效，应按照LVHA顺序，:link - :visited - :hover - :active   (love,hate)</p>
<p>　　　　因为a链接在浏览器中有默认样式，因此应专门设定样式（body标签修改样式对a链接不起作用）。</p>
<h4>　　②:focus伪类选择器</h4>
<p>　　　　用于选取获得焦点的表单元素。</p>
<p>　　　　焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素。使用方法如下：</p>
<div class="cnblogs_code" style="margin-left: 60px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_0e8c8de8-df9e-4ec3-b114-d5e7f184c6f9" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_0e8c8de8-df9e-4ec3-b114-d5e7f184c6f9" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_0e8c8de8-df9e-4ec3-b114-d5e7f184c6f9" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">input:focus </span>{<span style="color: rgba(255, 0, 0, 1)">
   background-color</span>:<span style="color: rgba(0, 0, 255, 1)"> pink</span>;
}</pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<h2>css的元素显示模式</h2>
<p>　　元素显示模式就是元素（标签）以什么方式进行显示，HTML元素一般分为块元素和行内元素两种类型。</p>
<h3>　　1.块元素</h3>
<p>　　　　<div>标签是最典型的块元素，块元素具有以下特点：</p>
<p>　　　　　　①、自己独占一行。</p>
<p>　　　　　　②、高度，宽度，外边距以及内边距都可以控制。</p>
<p>　　　　　　③、宽度默认是容器（父级宽度）的100%。</p>
<p>　　　　　　④、是一个容器及盒子，里面可以放行内或块级元素。</p>
<p>　　　　注意：文字类的元素内不可以再放块元素，例如<p>和<h1~6>内不能放块级元素，尤其是div。</p>
<h3>　　2.行内元素</h3>
<p>　　　　又称内联元素，<span>标签是最典型的行内元素，行内元素具有以下特点：</p>
<p>　　　　　　①、一行可以显示多个。</p>
<p>　　　　　　②、高、宽直接设置是无效的。</p>
<p>　　　　　　③、默认宽度就是他本身内容的宽度。</p>
<p>　　　　　　④、行内元素只能容纳文本或其他行内元素。</p>
<p>　　　　注意：链接里不能再放链接。</p>
<p>　　　　特殊情况下<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。</p>
<h3>　　3.行内块元素</h3>
<p>　　　　在行内元素中有几个特殊的元素如img、input、td，他们同时具有行内元素和块元素的特点。有些资料称他们为行内块元素。</p>
<p>　　　　行内块元素具有以下特点：</p>
<p>　　　　　　①、和相邻行内元素（行内块）在一行，但是他们之间会有空白间隙。一行可以显示多个。</p>
<p>　　　　　　②、默认宽度就是他本身内容的宽度。</p>
<p>　　　　　　③、高度，宽度，外边距以及内边距都可以控制。</p>
<h3>　　4.元素显示模式转换</h3>
<p>　　　　当一个模式的元素需要另一个模式的特性时，我们需要元素显示模式转换。</p>
<p>　　　　比如想要增加元素<a>链接的处罚范围。使用方式如下：</p>
<div class="cnblogs_code" style="margin-left: 30px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_021ecd17-e8c4-4cd4-812c-fced1ca60ba7" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_021ecd17-e8c4-4cd4-812c-fced1ca60ba7" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_021ecd17-e8c4-4cd4-812c-fced1ca60ba7" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)"><style>
a </span>{<span style="color: rgba(255, 0, 0, 1)">
   width</span>:<span style="color: rgba(0, 0, 255, 1)"> 150px</span>;<span style="color: rgba(255, 0, 0, 1)">
   height</span>:<span style="color: rgba(0, 0, 255, 1)"> 50px</span>;<span style="color: rgba(255, 0, 0, 1)">
   background-color</span>:<span style="color: rgba(0, 0, 255, 1)"> pink</span>;<span style="color: rgba(255, 0, 0, 1)">
   display</span>:<span style="color: rgba(0, 0, 255, 1)"> block</span>;
}<span style="color: rgba(128, 0, 0, 1)">
</style>
<a href="#">我是链接</a></span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<div class="cnblogs_code" style="margin-left: 30px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_e36c3bda-126f-484b-926d-1c77af5da498" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_e36c3bda-126f-484b-926d-1c77af5da498" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_e36c3bda-126f-484b-926d-1c77af5da498" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)"><style>
div </span>{<span style="color: rgba(255, 0, 0, 1)">
   width</span>:<span style="color: rgba(0, 0, 255, 1)"> 150px</span>;<span style="color: rgba(255, 0, 0, 1)">
   height</span>:<span style="color: rgba(0, 0, 255, 1)"> 50px</span>;<span style="color: rgba(255, 0, 0, 1)">
   background-color</span>:<span style="color: rgba(0, 0, 255, 1)"> pink</span>;<span style="color: rgba(255, 0, 0, 1)">
   display</span>:<span style="color: rgba(0, 0, 255, 1)"> inline</span>;
}<span style="color: rgba(128, 0, 0, 1)">
</style>
<div>我是kckv</div>
<div>我是kckv</div></span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<div class="cnblogs_code" style="margin-left: 30px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_14f482a0-c054-4cb7-a804-dd5fde82116a" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_14f482a0-c054-4cb7-a804-dd5fde82116a" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_14f482a0-c054-4cb7-a804-dd5fde82116a" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)"><style>
span </span>{<span style="color: rgba(255, 0, 0, 1)">
   width</span>:<span style="color: rgba(0, 0, 255, 1)"> 250px</span>;<span style="color: rgba(255, 0, 0, 1)">
   height</span>:<span style="color: rgba(0, 0, 255, 1)"> 150px</span>;<span style="color: rgba(255, 0, 0, 1)">
   background-color</span>:<span style="color: rgba(0, 0, 255, 1)"> pink</span>;<span style="color: rgba(255, 0, 0, 1)">
   display</span>:<span style="color: rgba(0, 0, 255, 1)"> inline-block</span>;
}<span style="color: rgba(128, 0, 0, 1)">
</style>
<span>我不是kckv</span><span>我不是kckv</span></span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<h3> 　　5.单行文字垂直居中的代码</h3>
<p>　　　　css并没有提供文字垂直居中的代码，但我们可以通过让文字的行高（line-height）等于盒子的高度（height）来实现。</p>
<h2>css的背景属性</h2>
<h3>　　1.背景颜色</h3>
<p>　　　　background-color设定了元素的背景颜色。</p>
<p>　　　　一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动设置为透明，使用方法如下：</p>
<div class="cnblogs_code" style="margin-left: 30px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_cc56476a-842c-4e26-906b-b3259a0c8966" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_cc56476a-842c-4e26-906b-b3259a0c8966" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_cc56476a-842c-4e26-906b-b3259a0c8966" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">background-color: transparent;
background-color: #ffffff;
background-color: red;
background-color: rgb(255,255,255);</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p> </p>
<h3>　　2.背景图片</h3>
<p>　　　　background-image属性描述了元素的背景图像，常用与logo或者装饰性小图片或者超大的背景图片。</p>
<p>　　　　优点是非常便于控制位置（精灵图）。使用方式如下：</p>
<div class="cnblogs_code" style="margin-left: 30px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_f38bc147-54c8-46fb-a2dc-55db21ad2ec3" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_f38bc147-54c8-46fb-a2dc-55db21ad2ec3" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_f38bc147-54c8-46fb-a2dc-55db21ad2ec3" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">background-image: none;
background-image: url(我是图片的地址链接啊);</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<h3>　　3.背景平铺</h3>
<p>　　　　在HTML页面上对背景图片进行平铺可以使用background-repeat。使用方法如下：</p>
<div class="cnblogs_code" style="margin-left: 30px"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_dd4e39f6-50fb-4567-8e29-2ad747796ebc" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_dd4e39f6-50fb-4567-8e29-2ad747796ebc" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_dd4e39f6-50fb-4567-8e29-2ad747796ebc" class="cnblogs_code_hide">
<pre><span style="color: rgba(128, 0, 0, 1)">background-repeat: no-repeat;//不平铺
background-repeat: repeat;    //默认属性，平铺
background-repeat: repeat-x; //横向平铺
background-repeat: repeat-y; //纵向平铺</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<h3>　　4.背景图片位置</h3>
<p>　　利用background-position属性可以改变图片在背景中的位置。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">background-position: x y;
参数值分为length和postion
length可以为百分数或由浮点数字和单位标识符（px等）组成的长度值。
position可以为top、center、bottom、left、right 方位名词。</span></pre>
</div>
<p>　　1.参数是方位名字</p>
<p>　　　　如果指定的两个值都是方位名词，则两个值前后顺序无关。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">background-position: left top;
background-position: top left;</span></pre>
</div>
<p>　　　　如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">background-position: left;
background-position: left center;</span></pre>
</div>
<p>　　2.参数是精确单位</p>
<p>　　　　如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标。</p>
<p>　　　　如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中。</p>
<p>　　3.参数是混合单位</p>
<p>　　　　如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。</p>
<h3>　　5.背景图像固定</h3>
<p>　　background-attachment属性可以设置背景图像是否固定或者随着页面的其余部分滚动。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">background-attachment: scroll;
background-attachment: fixed;
scroll 背景图像是随着对象内容滚动
fixed背景图像固定</span></pre>
</div>
<h3>　　6.背景复合写法</h3>
<p>　　为简化代码，实际开发多将背景属性合并简写在同一个属性background中。</p>
<p>　　没有特定的书写顺序，一般习惯约定顺序为：</p>
<p>　　background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">background: transparent url(地址) no-repeat fixed center center;</span></pre>
</div>
<h3>　　7.背景色半透明</h3>
<p>　　css3为我们提供了背景颜色半透明的效果。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">background: rgba(0,0,0,0.3);<br></span></pre>
</div>
<p>　　最后一个参数是alpha透明度，取值为0~1。</p>
<p>　　0.3的0可以省略，写作.3。</p>
<p>　　半透明指的是盒子背景半透明，盒子的内容不受影响。</p><br><br>
来源：https://www.cnblogs.com/kckv/p/14697452.html

頁: [1]

琼殿技术论坛's Archiver

我的css学习博客（二）