CSS学习（2）
<h1 id="css学习2">CSS学习（2）</h1><h2 id="emmet语法">Emmet语法</h2>
<p>emmet语法可以通过缩写的形式来提高html/css的编写速度</p>
<ol>
<li>生成标签：输入标签名按下tab键</li>
<li>生成多个相同标签：如div*3</li>
<li>生成父子级关系：如ul>li</li>
<li>生成兄弟级关系：如div+p</li>
<li>生成带有类名或id名字的标签：标签名称.demo或#two按下tab键就可以了</li>
<li>生成div类名有序：用自增符号$</li>
<li>标签生成中带有默认文字：{}</li>
<li>css中的属性都可以首字母缩写</li>
</ol>
<h2 id="css的元素显示模式">CSS的元素显示模式</h2>
<p>元素的显示就是元素（标签）以什么方式进行显示，比如div自己占一行，比如一行可以放多个span。</p>
<p>HTML元素一般分为块元素和行内元素两种类型。</p>
<h3 id="块元素">块元素</h3>
<p>h1～h6，p，div，ul，ol，li等为最常见的块元素，特点为：</p>
<ol>
<li>独占一行</li>
<li>高度，宽度，外距和内距都可以控制</li>
<li>宽度默认为父级的100%</li>
<li>是一个容器及盒子，内部可以是块元素或者行内元素（文字类的元素内不能使用块级元素）</li>
</ol>
<h3 id="行内元素内联元素">行内元素（内联元素）</h3>
<p>a，strong，b，em，span等为最常见的行内元素，特点为：</p>
<ol>
<li>一行内可以有多个行内元素</li>
<li>宽度和高度直接设置是无效的</li>
<li>默认宽度是本身内容的宽度</li>
<li>行内元素只能容纳文本或其他行内元素（a里面不能再放a元素，a中可以包含块级元素）</li>
</ol>
<h3 id="行内块元素">行内块元素</h3>
<p>img，input，td等为最常见的行内块元素，特点为：</p>
<ol>
<li>一行内可以有多个行内块元素，两个行内块元素中间会有空白的缝隙</li>
<li>高度，宽度，外距和内距都可以控制</li>
<li>默认宽度是本身内容的宽度</li>
</ol>
<h3 id="元素显示模式转换">元素显示模式转换</h3>
<h4 id="行内元素转换为块级元素">行内元素转换为块级元素</h4>
<p>display:block</p>
<pre><code class="language-css">a {
width: 150px;
height: 50px;
background: pink;
display: block;
}
</code></pre>
<h4 id="块级元素转换为行内元素">块级元素转换为行内元素</h4>
<p>display:inline</p>
<pre><code class="language-css">div {
width: 300px;
height: 100px;
background-color: #fff;
display: inline;
}
</code></pre>
<h4 id="转换为行内块">转换为行内块</h4>
<p>display:inline-block</p>
<h2 id="css的背景">CSS的背景</h2>
<h3 id="背景颜色">背景颜色</h3>
<p>background-color：颜色（默认：transparent（透明的）</p>
<h3 id="背景图片">背景图片</h3>
<p>背景图片在背景颜色的上层。</p>
<p>background-image：url（）（默认：none）</p>
<h3 id="背景平铺">背景平铺</h3>
<p>background-repect：no-repect（不平铺）默认：repect（平铺）repeat-x（沿着x轴平铺）repeat-y（沿着y轴平铺）</p>
<h3 id="背景图片位置">背景图片位置</h3>
<p>background-position：xy；</p>
<h4 id="x和y为方位名词">x和y为方位名词</h4>
<p>left，right，top，down，center前后两个值与顺序无关，如果只指定一个，则另一个默认为居中对齐。</p>
<h4 id="x和y为精确单位">x和y为精确单位</h4>
<p>x和y分别为离左侧和离上侧的距离，如果只指定了一个值，那该值必定是x坐标，另一个值为center。</p>
<h3 id="背景图像固定">背景图像固定</h3>
<p>background-attachment：默认：scroll（滚动）fixed（固定）</p>
<p>设置背景图像是否固定或者随着页面其余部分滚动</p>
<h3 id="背景复合写法">背景复合写法</h3>
<p>background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；</p>
<h3 id="背景色半透明">背景色半透明</h3>
<p>background：rgba（0，0，0，alpha），alpha为0-1之间，0为全透明，1为不透明</p>
<h2 id="css的三大特性">CSS的三大特性</h2>
<p>层叠性、继承性、优先级。</p>
<h3 id="层叠性">层叠性</h3>
<p>按顺序覆盖重复的样式。</p>
<pre><code class="language-css">div {
color: red;
font-size: 12px
}
div {
color: pink;
}
/* 12px，粉色 */
<div>层叠性</div>
</code></pre>
<h3 id="继承性">继承性</h3>
<p>父亲标签的的某些样式（text-，font-，line-，color等元素）可以被子标签继承。</p>
<h4 id="行高的继承">行高的继承</h4>
<p>一般使用当前文字大小的几倍的写法，当前文字的大小的几倍。</p>
<pre><code class="language-css">div {
font: 14px/1.5;
}
</code></pre>
<h3 id="优先级">优先级</h3>
<ul>
<li>选择器相同，则执行层叠性</li>
<li>选择器不同，根据选择器权重执行（通配/继承0,0,0,0<元素选择器0,0,0,1<类选择器/伪类选择器0,0,1,0<ID选择器0,1,0,0<行内样式style=“”1,0,0,0<!important)</li>
</ul>
<p>注意a链接有一个默认的颜色，会顶掉继承下来的颜色。</p>
<p>复合选择器会有权重叠加的问题，复合选择器会把权重累加</p><br><br>
来源：https://www.cnblogs.com/boniii/p/14928488.html
頁:
[1]