前端基础：CSS（一） | 青训营笔记

来自小星星的你
88 阅读1分钟

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

1 CSS

1.1 CSS是什么

  • CSS：Cascading Style Sheets 层叠样式表
  • 用来定义页面的样式
    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果
    • ……

1.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">😳</p>

1.3 CSS是如何工作的

image.png

1.4 选择器

  • 通配符选择器：*{}
  • 标签选择器：p{}、div{}
  • id选择器（须唯一）：#logo{}
  • 类选择器：.done{}
  • 属性选择器：同一个属性的标签被选中
    • <input value="zhao" disabled>
      style样式：[disabled]{} //所有disabled属性被选中
    • <input type="password" value="123456">
      style样式：input[type="password"]{}
  • 模糊选择：
    • a[href^="#"] //以#开头的href值所在的标签
    • a[href$=".jpg"] //以.jpg结尾的href值所在的标签
  • 伪类
    • 状态伪类：不是具体某一个元素，需要处于某种状态
      • a标签的：a:link、a:visited、a:hover、a:active
    • 结构性伪类：标签在DOM树中的位置
      • li标签的：li:first-child、li:last-child
  • 组合选择

image.png

  • 选择器组

image.png

1.5 颜色

  • rgb()：三个取值范围0-255
  • hsl()：第一个值0-360，第二个值和第三个值0-100%

1.6 字体

  • 通用字体族

image.png

  • web Font字体
    • 语法 @font-face{font-family:"Megrim";src:url(字体地址)format("woff2")}
  • 字重

image.png

  • 行高
    • 基本概念
    • lineheight:1.6 字体大小乘1.6倍

image.png

  • 复合写法 font:style weight size/height family
  • 字体其他的一些属性
    • text-align 对齐方向
    • spacing 包括letter-spacing字母间距和word-spacing单词间距
    • text-indent 首行缩进
    • text-decoration 文本修饰包括下划线、中划线和上划线
    • white-space 空白间距 在HTML中书写的空格换行等
avatar
文章
阅读
粉丝