css学习一
<h2 id="css-学习一">CSS 学习一</h2><p>从涉及前端开发到现在，差不多有四年了，框架有<code>Vue</code>、<code>Angular</code>，组件库用了<code>ElementUI</code>、<code>NG-Zorro</code>、<code>Ant-Design</code>。<br>
而对于<code>CSS</code>，可谓东一榔头，西一棒子，用时查找，不用忘掉。这次决定花点时间，系统的学习一下<code>CSS</code>，毕竟上一次学，还是大二的时候。（我逝去的青春啊！！😭😭）</p>
<h3 id="定义">定义</h3>
<p>层叠样式表，用于设计<code>HTML</code>的风格和布局，字体、颜色、大小、间距等等。</p>
<h3 id="语法">语法</h3>
<p><code>CSS</code>由两部分组成：选择器，以及声明。<br>
一个熟悉与值的键值被称为声明，而将一个或者多个声明用<code>{}</code>括起来，就是声明块。<br>
声明作用到对应的<code>HTML</code>元素，就要加上选择器。</p>
<h3 id="选择器">选择器</h3>
<h4 id="基础选择器">基础选择器</h4>
<ul>
<li>标签选择器：<code>h1</code></li>
<li>类选择器：<code>.checked</code></li>
<li>ID 选择器：<code>#picker</code></li>
<li>通配选择器：<code>*</code></li>
</ul>
<h4 id="属性选择器">属性选择器</h4>
<ul>
<li>：指定属性的元素</li>
<li>：属性等于指定值的元素</li>
<li>：属性包含指定值的元素</li>
<li>：属性以指定值开头的元素</li>
<li>：属性以指定值结尾的元素</li>
<li>：属性包含指定值（完整单词）的元素（不推荐使用）</li>
<li>：属性以指定（完整单词）开头的元素（不推荐使用）</li>
</ul>
<h4 id="组合选择器">组合选择器</h4>
<ul>
<li>相邻兄弟选择器：<code>A+B</code></li>
<li>普通兄弟选择器：<code>A~B</code></li>
<li>子选择器：<code>A>B</code></li>
<li>后代选择器：<code>AB</code></li>
</ul>
<h4 id="伪类">伪类</h4>
<h5 id="条件伪类">条件伪类</h5>
<ul>
<li><code>:lang()</code>：基于元素语言来匹配页面元素</li>
<li><code>:dir()</code>：匹配特定文字书写方向的元素</li>
<li><code>:has()</code>：匹配包含指定元素的元素</li>
<li><code>:is()</code>：匹配指定选择器列表里的元素</li>
<li><code>:not()</code>：用来匹配不符合一组选择器的元素</li>
</ul>
<h5 id="行为伪类">行为伪类</h5>
<p>-<code>:active</code>：鼠标激活的元素 -<code>:hover</code>：鼠标悬浮的元素 -<code>::selection</code>：鼠标选中的元素</p>
<h5 id="状态伪类">状态伪类</h5>
<ul>
<li><code>:target</code>：当前锚点的元素</li>
<li><code>:link</code>：未访问的链接元素</li>
<li><code>:visited</code>：已访问的链接元素</li>
<li><code>:focus</code>：输入聚焦的表单元素</li>
<li><code>:required</code>：输入必填的表单元素</li>
<li><code>:valid</code>：输入合法的表单元素</li>
<li><code>：invalid</code>：输入非法的表单元素</li>
<li><code>:in-range</code>：输入范围以内的表单元素</li>
<li><code>out-of-range</code>：输入范围以外的表单元素</li>
<li><code>checked</code>：选项选中的表单元素</li>
<li><code>optional</code>：选项可选的表单元素</li>
<li><code>enabled</code>：事件启用的表单元素</li>
<li><code>disabled</code>：事件禁用的表单元素</li>
<li><code>read-only</code>：只读的表单元素</li>
<li><code>read-write</code>：可读可写的表单元素</li>
<li><code>blank</code>：输入为空的表单元素</li>
<li><code>current()</code>：浏览中的元素</li>
<li><code>past()</code>：已浏览的元素</li>
<li><code>future</code>：未浏览的元素</li>
</ul>
<h5 id="结构伪类">结构伪类</h5>
<ul>
<li><code>：root</code>：文档的根元素</li>
<li><code>:empty</code>： 无子元素的元素</li>
<li><code>:first-letter</code>：元素的首字母</li>
<li><code>:first-line</code>：元素的首行</li>
<li><code>:nth-child(n)</code>：元素中指定书序索引的元素</li>
<li><code>:nth-last-child(n)</code>：元素中指定逆序索引的元素</li>
<li><code>:first-child</code>：元素中为首的元素</li>
<li><code>:last-child</code>：元素中为尾的元素</li>
<li><code>:only-child</code>：父元素仅有该元素的元素</li>
<li><code>:nth-of-type(n)</code>：标签中指定顺序索引的标签</li>
<li><code>:nth-last-of-type(n)</code>：标签中指定逆序索引的标签</li>
<li><code>:first-of-type</code>：标签中为首的标签</li>
<li><code>:last-of-type</code>：标签中为尾标签</li>
<li><code>:only-of-type</code>：父元素仅有该标签的标签</li>
</ul>
<h5 id="伪元素">伪元素</h5>
<ul>
<li><code>::before</code>：在元素前插入内容</li>
<li><code>::after</code>：在元素后插入内容</li>
</ul>
<h4 id="优先级">优先级</h4>
<ul>
<li>!important</li>
<li>内联样式</li>
<li>ID 选择器</li>
<li>类选择、伪类选择器、属性选择器</li>
<li>元素选择器、伪元素选择器</li>
<li>通配选择器、后代选择器、兄弟选择器</li>
</ul>
<h3 id="css-backgrounds">CSS Backgrounds</h3>
<ul>
<li><code>background</code>：将背景属性设置在一个声明中</li>
<li><code>background-attachment</code>：背景图像是否固定或者随着页面的其余部分滚动
<ul>
<li><code>scroll</code>：随着页面的滚动而滚动（默认值）</li>
<li><code>fixed</code>：不会随着页面的滚动而滚动</li>
<li><code>local</code>：随着元素的内容的滚动而滚动</li>
<li><code>initial</code>：使用默认值</li>
<li><code>inherit</code>：继承父元素的属性</li>
</ul>
</li>
<li><code>background-color</code>：设置元素的背景颜色
<ul>
<li><code>color</code>：背景颜色</li>
<li><code>transparent</code>：背景颜色透明</li>
<li><code>inherit</code>：继承父元素</li>
</ul>
</li>
<li><code>background-image</code>：把图像设置为背景
<ul>
<li><code>linear-gradient()</code>：创建一个线性渐变的"图像"（从上而下）</li>
<li><code>radial-gradient()</code>：用径向渐变创建"图像"</li>
<li><code>repeating-linear-gradient()</code>：创建重复的线性渐变"图像"</li>
<li><code>repeating-radial-gradient()</code>：创建重复的径向渐变"图像"</li>
<li><code>inherit</code>：继承父元素</li>
</ul>
</li>
<li><code>background-position</code>：设置起始位置
<ul>
<li><code>left/top/centet/bottom/right</code>：仅指定一个时，其他值会是center</li>
<li><code>x% y%</code>：水平位置% 垂直位置%，左上角是0%0%，右下角是100%100%，仅指定一个值，其他将是50%</li>
<li><code>xpos ypos</code>：水平位置 垂直位置，左上角是0，仅指定一个值，其他将是50%</li>
<li><code>inherit</code>：继承父元素</li>
</ul>
</li>
<li><code>background-repeat</code>：设置是否及如何重复
<ul>
<li><code>repeat</code>：垂直和水平方向重复（默认值）</li>
<li><code>repeat-x</code>：水平重复</li>
<li><code>repeat-y</code>：垂直重复</li>
<li><code>no-repeat</code>：不重复</li>
<li><code>inherit</code>：继承父元素的属性</li>
</ul>
</li>
</ul>
<h2 id="喟然叹息">喟然叹息😒😒</h2>
<p><strong><font size="4">凤栖梧</font></strong><font size="4"> </font><font size="2">柳永</font></p>
<p><strong>伫倚危楼风细细，</strong></p>
<p><em>望极春愁，</em></p>
<p><strong>黯黯生天际。</strong></p>
<p><em>草色烟光残照里，</em></p>
<p><strong>无言谁会凭栏意。</strong></p>
<p><em>拟把疏狂图一醉，</em></p>
<p><strong>对酒当歌，</strong></p>
<p><em>强乐还无味。</em></p>
<p><strong>衣带渐宽终不悔，</strong></p>
<p><em>为伊消得人憔悴。</em></p><br><br>
来源：https://www.cnblogs.com/GardenofEden/p/16095959.html
頁:
[1]