了解CSS

了解CSS

360前端星计划-第二课
主讲：赵文博老师

CSS 是什么

• Cascading Style Sheets
  用来定义页面元素的样式
  设置字体和颜色
  设置位置和大小
  添加动画效果

在页面中使用 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">Example Content</p>

CSS 是如何工作的

选择器

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

通配选择器

标签选择器

id 选择器

类选择器

属性选择器


伪类 (pseudo-classes)

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

组合器 (Combinators)


选择器组

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

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

CSS文字

颜色

• RGB
  
  
• HSL
  
  
• keyword
  
• alpha 透明度
  

字体 font-family

• 使用建议：
  字体列表最后写上通用字体族
  英文字体放在中文字体前面
• 使用 Web Fonts
  

font-size

• 关键字
  small、medium、large
• 长度
  px、em
• 百分数
  相对于父元素字体大小

font-weight

line-height

font: style weight size/height family

h1 {
  /* 斜体 粗细 大小/行高 字体族 */
  font: bold 14px/1.7 Helvetica, sans-serif;
}

p {
  font: 14px serif;
}

text-align

spacing

text-indent

text-decoration

white-space

调试 CSS