CSS基础 | 青训营笔记

看着掘金找手机
96 阅读5分钟

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

什么是CSS?(Cascading Style Sheets)

  • 一种定义页面元素样式的语言
    • 设置字体&颜色
    • 设置位置&大小
    • 设置动画的效果

基本的语法

选择器 {
属性: 属性值;
}

h1 {
    color: white;
    font-size: 14px; // 这一行就是一个声明
}

如何在页面中使用css

外链 (相对推荐)

  • 一般写在<head>标签中
    <link rel="stylesheet" herf="/assets/style.css>

嵌入

  • 直接写在<html>标签中
<style>
li {
    margin: 0;
    list-style: none;
}
p {
    margin: 1em 0;
}
</style>

内联

  • 每个标签都有一个属性style,这个方法直接将样式给到对应的标签上(不需要写选择器) <p style="margin:1em 0">Example Content</p>

CSS是如何工作的

image.png

选择器

  • 选出页面中的元素, 然后方便为其设置样式
  • 我们能够使用多种方式选择元素
    • 标签名, 类名, id
    • 属性
    • 其在DOM树中的相对位置
  • 点我进入mdn学习选择器

通配选择器*

  • 能够选择到所有的元素(通常用于重设浏览器的样式)
* {
  color: red;
  font-size: 20px;
}

元素选择器

  • 通过 node 节点名称匹配元素。因此，在单独使用时，寻找特定类型的元素时，元素选择器都会匹配该文档中所有此类型的元素。
span {
  background-color: DodgerBlue;
  color: #ffffff;
}

上面这段会选择到 所有的span标签

类选择器.

  • 根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。
<body>
    <span class="classy class1">Here's a span with some text.</span>
    <span class="classy">Here's another.</span>
</body>
<style>
class1 {
  background-color: DodgerBlue;
  color: #ffffff;
}
</style>

上面这段css只会选择到第一句话

id选择器#

  • 根据该元素的 ID 属性中的内容匹配元素，元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。
  • id选择器突出唯一性, 一个id一般只用于一个元素上
/* The element with id="demo" */
#demo {
  border: red 2px solid;
}

类选择器 与 id选择器 区别

stackoverflow.com/questions/1…

  1. 一个HTML标签只能应用于一个ID选择器
  2. 一个HTML标签可以应用多个class选择器
  3. ID选择器是以“#”开头，并且只能在单个元素使用
  4. Class选择器是以“.”开头，可以多个元素应用，中间用“ ”隔开

为什么id选择器只能用于一个元素, 而不是多个(像class那样)

  • Because each ID should represent a unique (single) element on a page. This is important for non-CSS functionality when you need to identify something specific and unambiguous: the link I posted above has #answer-15356814 at the end of it, which means go to the URL, then find an element with ID answer-15356814 and scroll down to it. If there were several, which should be scrolled to? This is also important for form inputs to communicate to servers, among other things.

属性选择器[]

  • 通过已经存在的属性名或属性值匹配元素
/* 存在 title 属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在 href 属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在 href 属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在 href 属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在 class 属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

伪类(pseudo-classes)

  • 不基于标签和属性定位元素
  • 几种伪类
    • 状态伪类
    • 结构性伪类

状态伪类

<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
/* 表示默认状态下的链接 */
a:link {
  color: black;
}
/* 表示被点击过的链接 */
a:visited {
  color: gray;
}
/* 用户使用指示设备虚指一个元素（没有激活它）的情况。  */
a:hover {
  color: orange;
}
/* 当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。*/
a:active {
  color: red;
}
/* 表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的“tab”键选择它时会被触发。 */
:focus {
  outline: 2px solid orange;
}
</style>

结构伪类

组合(Combinators)

image.png

颜色

RGB(red green blue)

  • 指定颜色中 红色 绿色 蓝色 的占比
  • 其中可以用 10进制表示 0~255
  • 也可以用 16进制表示 00~ff

HSL

image.png

直接指定颜色

不透明度 alpha(0~1) (1为完全不透明)

字体

这个文章总结得很全（font相关）

font-family

  • 不可能所有的设备都拥有你指定的字体,所以font-family中应该存在多种字体，以应对多种情况
  • 用户的浏览器会从第一个从左往右开始寻找, 直至找到此设备拥有的字体并使用这种字体
  • 语法:
 h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }

使用建议

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

使用 Webfonts

使用中文字体时会有开销, 建议使用相关工具进行裁切

font-size

  1. 关键字
    • small
    • meduim
    • big
  2. 长度
    • px 固定大小
    • em 可以自动适应用户的字体 响应式
  3. 百分数
    • 相较于父元素的字体大小

font-weight

  • 取值：100~900
  • 不过某些字体可能不支持所有的粗细
  • normal=400 bold=700

image.png

font-style

line-height

  • 两行文字的基准线之间的距离 image.png

font 简写

text-align

spacing

  1. letter-spacing 调整 每个字母之间的距离
  2. word-spacing 调整 每个单词之间的距离

text-indent

  • 调整 段落的 首行缩进

text-decoration

white-space

可选属性换行符空格和制表符文字换行行尾空格
normal合并合并换行删除
nowrap合并合并不换行删除
pre保留保留不换行保留
pre-wrap保留保留换行挂起
pre-line保留合并换行删除
break-spaces保留保留换行换行

mdn

如何调试CSS？

image.png

avatar
文章
阅读
粉丝