初识CSS|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天

一、什么是CSS

定义：CSS即层叠样式表(英文全称：Cascading Style Sheets)，是一种用来表现HTML或XML等文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

同时CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二、选择器

通配选择器

<style>
    * {
        color : red;
        font-size : 20px;
    }
</style>
复制代码

这种写法能匹配到所有HTML的元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，*.warning 和.warning 的效果完全相同。

属性选择器

• 示例一：

<label>用户名：</label>
<input value="zhangsan" disabled />
<label>密码：</label>
<input type="password" />

<style>
 [disabled] {
   background: #eee;
   color: #999;
 }

</style>

这里根据有没有disabled这个属性，来选择元素，而对于input[type="password"]这种，是在input标签里，需要有type这个属性，并且属性值为password才会被选中

• 示例二：

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
<style>
  *{
    padding-left: 1.1em;
  }
  a[href^="#"] {
    color: red;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    
  }
  a[href$=".jpg"] {
    color: blue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
  }
</style>

href^="#"代表着匹配href以#号开头的，而href$=".jpg"代表匹配所有以.jpg结尾的href，可以设置所有jpg图片的样式。另外，a标签中href="#"表示回到最顶部，如果当前页面中需要滚动的话，那么用这种方式就可以直接回到顶部<ahref="#"> 回到最顶端 </a>

伪类

伪类用于定义元素的特殊状态。

例如，它可以用于：

• 设置鼠标悬停在元素上时的样式
• 为已访问和未访问链接设置不同的样式
• 设置元素获得焦点时的样式

/* 未访问的链接， 默认状态 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

/* 聚焦状态，比如点击输入框，div:blur 与focus一对使用,失去焦点 */
:focus {
  outline: 2px solid orange;
}
复制代码

• 注意： a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！