了解 CSS | 青训营笔记

Bosky
123 阅读3分钟

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

1、CSS 是什么？

  • Cascading Style Sheets
  • 用来定义页面元素的样式
    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果

2、在页面中使用 CSS

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">

<!-- 嵌入 -->
<style>
  li { margin: 0; list-style: none; }
  p { margin: 1em 0; }
</style>

<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>

<!-- 导入(不建议开发使用) -->
<style>
    @import"style.css"
</style>

3、CSS 是如何工作的

image.png

4、选择器Selector

  • 找出页面中的元素，以便给他们设置样式
  • 使用多种方式选择元素
    • 按照标签名、类名或id
    • 按照属性
    • 按照 DOM树中的位置

① 通配选择器

<style>
* {
    margin: 0;
    padding: 0;
}
</style>

② 标签选择器

<style>
h1 {
    color: blue;
}
span {
    display: block;
    font-size: 20px;
}
......
</style>

③ Id选择器

<div id="box"></div>

<style>
#box {
    width:200px;
    height: 200px;
    border: 1px solid #ccc;
}
</style>

④ 类选择器

<ul>
    <li class="done"> Learn HTML </li>
    <li class="done"> Learn CSS </li>
    <li> Learn JavaScript </li>
</ul>

<style>
.done {
    color: gray;
    text-decoration: line-through;
}
</style>

⑤ 属性选择器（CSS 3 新增）

文本框1： <input type="text" value="这是文本框1" />
文本框2： <input type="text" value="这是文本框2" />
密码框：  <input type="password" />

<style>
<!-- 选取含有属性type的input标签（全部标签） -->
input[type] {  
    color: red;
}
<!-- 选取type属性为text的input标签（部分标签） -->
input[type="text"]{
    color: hotpink;
}
</style>

⑥ 复合选择器

选择器名称示例示例的意义
后代选择器.box .demo选择类名为box的标签内部的类名为box1的标签
交集选择器li.demo选择既是li标签，也属于demo类的标签
并集选择器ul, ol选择所有ul和ol标签

⑦ 伪类

  • 伪类是添加到选择器的描述性词语。指定要选择的元素的特殊状态，超级链接（a 标签）拥有四个特殊状态：
伪类意义
a:link没有被访问的超级链接
a:visited已经被访问过的超级链接
a:hover正被鼠标悬停的超级链接
a:active正被激活的超级链接（按下鼠标按键但是还没有松开按键）
  • “爱恒准则”

    a 标签的伪类书写，要按照 “爱恨准则” 的顺序， 否则会有伪类不生效

    LOVE HATE

    :link :visited :hover :active

5、 CSS 3 新增选择器

① 元素关系选择器

选择器名称示例示例的意义
子选择器div>pdiv的子标签p
相邻兄弟选择器div+pdiv标签后面紧跟着的段落将被选中
通用兄弟选择器p~spanp元素之后的所有同层级的span元素

② 序号选择器

示例意义
:first-child第一个子元素
:last-child最后一个子元素
:nth-child(3)第3个子元素
:nth-of-type(3)第3个某类型子元素
:nth-last-child(3)倒数第3个子元素
:nth-last-of-type(3)倒数第3个某类型子元素

③ 属性选择器

示例意义
img[alt]选择有alt属性的img标签
img[alt ="故宫"]选择alt属性是故宫的img标签
img[alt ^="北京"]选择alt属性以北京开头的img标签
img[alt $="夜景"]选择alt属性以夜景结尾的img标签
img[alt *="美"]选择有alt属性中含有美字的img标签
img[alt ~="手机拍摄"]选择有alt属性中有空格隔开的手机拍摄字样的img标签
img[alt |="作品"]选择有alt属性以“作品-”开头的img标签

④ CSS 3 新增伪类

伪类意义
:empty选择空标签
:focus选择当前获得焦点的表单元素
:enabled选择当前有效的表单元素
:disabled选择当前无效的表单元素
:checked选择当前已经勾选的单选按钮或者复选框
:root选择根元素，即<html>标签

最后

了解完这么多css属性，想必能够对css有一个全新的认知。加油少年，每一天都有新的挑战在等着我们，不要气馁，勇往直前！

avatar
文章
阅读
粉丝