[CSS | 青训营笔记]

73 阅读2分钟

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

学习的是关于CSS的内容。

三件套中CSS用于美化页面,它可以渲染几乎你任何想要的画面。

CSS的大概的编写方式

h1{  /* 选择器 */
    color: #ff0000; /* 声明 */
    font-size/* 属性名 */        :       14px; /* 属性值 */
}

我们用选择器选中DOM中的某个或某些标签,对他们的样式进行声明,没有声明的样式会用浏览器默认的样式。

使用CSS

可以在三个地方嵌入CSS

  • 外联
<link rel="stylesheet" href="./index.css" />
  • 内联
<head>
    <style>
        h1{
            color:#ff0000;
            font-size:14px;
        }
    </style>
</head>
  • 行内
<span style="color:#fff;">123123</span>

选择器

  • id
  • class
  • 伪类
  • 标签
  • 通配符
  • 伪元素
  • 等等...

选择器权重

id > 类/伪类选择器 > 标签选择器

!important 可以覆盖你的其他样式,慎用,不然会影响代码的可读性和可扩展性。

选择器组合

名称语法说明示例
直接组合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

颜色

  • #ff0000 十六进制表达 红绿蓝色占比
  • rgb(255,0,0)RGB表达 红绿蓝色占比
  • hsl(0,100,100) HSL表达 色相纯度明度比例

透明度

  • #ff000055
  • rgb(255,0,0,0.5)
  • hsl(0,100,100,0.5)

文字

  • font-family 字体族
    • 通用字体族:
      • Serif 衬线体
      • Sans-Serif 无村线体
      • Cursive 手写体
      • Fantasy
      • Monospace等宽字体
  • font-size 字号
  • color 字体颜色
  • line-height 行高
  • letter-spaceing 字间距
  • word-spaceing 词间距

white-space

  • normal 换行
  • nowrap 不换行
  • pre 保留代码的换行和空格
  • pre-wrap 超行换行,保留空格
  • pre-line 保留换行,超行换行,合并空格