前端基础知识-了解CSS【上】 | 青训营笔记

已注销
91 阅读2分钟

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

前端基础知识-了解CSS上 | 青训营笔记

  • Cascading Style Sheets
  • 用来定义页面元素的样式
    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果
h1 {
    color: white;
    font-size: 14px;
}
  • h1：选择器 Selector
  • color：选择器 Property
  • white：属性值 Value
  • 在css中，每条声明由“属性”和“属性值”组成，并用分号;来标识一个声明的结束，在一个样式中最后一个声明可以省略分号;。

使用CSS

<!-- 外链 -->
<link rel="stylesheet" href="my.css" >
<!-- 嵌入 -->
<style>
    h1 {
    color: white;
    font-size: 14px;
}
</style>
<!-- 内嵌 -->
<h1 style="color: white; font-size:14px"></h1>

推荐使用外链方式

CSS是如何工作的

image.png

选择器Selector

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

选择器分为：

  • 通配选择器 *
  • 标签选择器 h1
  • ID选择器 #id 唯一
  • 类选择器 .class
  • 属性选择器
    • input[type="password"]：指定对type属性值为password的input输入框做样式修改
    • a[href^="#"]：指定对以#开头的a链接做样式修改
    • a[href$=".jpg"]：指定对以$结尾的a链接做样式修改
  • 伪类选择器
    • 不基于标签和属性定位元素
    • 几种伪类
      • 状态伪类
      • 结构性伪类
    • a:link a:visted a:hover a:active
    • :focus
    • li:first-child li:last-child li:nth-child(2)
  • 伪元素选择器 ::
    • 和伪类选择器的区别：
    • 伪类选择器可以有多个，而伪元素选择器只能有一个
    • 伪类选择器是基于DOM的选择器，不会创建新的元素；而伪元素选择器会创建新的元素

选择器有优先级，优先级从高到低的排序为：ID选择器>类选择器>标签选择器>通配选择器>属性选择器。

提示：可以通过组合或者选择器组来更方便我们拿到想拿到的DOM节点。

通配符选择器

标签选择器

ID选择器

类选择器

属性选择器

伪类选择器

伪元素选择器

选择器组合方式

名称语法说明示例
直接组合AB满足A同时满足Binput:focus
后代组合A B选中B，如果它是A的子孙nav a
亲子组合A > B选中B，如果它是A的子元素section > p
兄弟选择器A ~ B选中B，如果它在A后且和A同级h2 ~ p
相邻选择器A + B选中B，如果它紧跟在A后面h2 + p

选择器组

body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
ol {
    margin: 0;
    padding: 0;
}

通用字体族

image.png

font-family使用建议

  • 字体列表最后写上通用字体族
  • 英文字体放在中文字体前面

如何简洁地设置字体？

p {
    /* 斜体 粗细 大小/行高 字体族 */
    font: bold 14px/1.7 Helvetica, sans-serif;
}
avatar
文章
阅读
粉丝