理解CSS|青训营笔记

Iris_23
120 阅读2分钟

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

CSS是什么

  • Cascading Style Sheets，层叠样式表。用来定义页面元素的样式（设置字体和颜色，位置和大小，动画效果等）。

CSS的组成部分

  • 组成部分：选择器——选中元素给定样式；声明：选择器+属性值。

在页面中的使用方法

  • 外链，将css标签写在单独的文件里，用链接引入。（推荐）
  • 嵌入，直接嵌入html标签中。
  • 内联，把属性写在标签的style里。

CSS是如何工作的

image.png

选择器

选出页面中的元素，给他们设置样式。

  • 通配选择器，*{}，匹配所有。
  • 标签选择器
  • id选择器，设置对应属性值为对应id的样式。
  • 类选择器
<input class="error" value="aa">
<span class="error">
最少三个字符
</span>
.error{
  color:red;
  }
  • 属性选择器

伪类

  • 状态性伪类，给元素的不同状态进行设置。
  • 结构性伪类，根据DOM结点在树中的位置决定设置样式。

组合

image.png 例子

<article>
    <h1>...</h1>
    <p>...</p>         //第一行p标签
    <section>
        <h2>...</h2>
        <p>...</p>     //第二行p标签
        <p>...</p>     //第三行p标签
    </section>
</article>

<style>
    article p{
        color:black;
    }                  //选中article标签下所有p标签
    article > p{
        color:blue;    //选中article下的直属p标签，即第一行p标签
    }
    h2 + p{
        color:red;     //选中与h2相邻的p标签，即第二行p标签
    }
  • 对于选择器，可以使用选择器组。

颜色的表示

RGB，所有颜色都可以由红，绿，蓝三种颜色组成。

  • rgb(143,172,32)，数字范围是0~255。
  • #8fac87，每两位按顺序表示红绿蓝，十六进制表示，范围是0~ff。

HSL，色相hue，饱和度saturation，亮度lightness。

  • hsl(332,100%,50%)，分别对应色相，饱和度，亮度。

关键字表示

  • color:black;类似这样

透明度

是针对颜色的另一个维度的表示。范围是0~1，值越低越透明。

  • rgba(255,0,0,0.47)，在括号内加上这个属性即可。
  • hsla(0,100%,50%,0.47)，同上。
  • #ff000078，转成16进制赋值即可。

字体

font-family:指定多个字体，因为不能保证每个设备都有指定好的字体，需要多个字体迎合设备需要。

  • 通用字体族：serif：衬线体；Sans-Serif：非衬线体；Cursive：手写体；Fantasy：英文字体；Monospace：等宽字体。
  • Web-font：把字体文件放在服务器上，利用url下载文件再渲染。
  • font-weight:定义字粗细程度（需要字体本身支持）。也可以用normal/bold设置。
  • font-size:字体大小。small/medium/large;长度单位px,em;百分数（相对于父元素字体大小）。
  • line-height:行高，数字表示是字体大小的多少倍。如1.6就是字体大小的1.6倍。

调试CSS

右键点击页面，选择检查；

avatar
文章
阅读
粉丝