这是我参与「第五届青训营 」笔记创作活动的第4天
CSS 概述
CSS 代码构成
Cascading Style Sheets
- 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
CSS 使用方法
在页面中使用CSS
//外链
<link rel = "stylesheet" href = "/assets/style.css">
//嵌入
<style>
li{margin:0;list-style:none;}
p{ margin:lem 0;}
</style>
//内联
<p style = "margin:lem 0">Example Content</p>
CSS 流程之选择器组、文本渲染
CSS是如何工作的
CSS 选择器
选择器Selector
-
找出页面中的元素，以便给他们样式
-
使用多种方式选择元素 按照标签名、类名或者id
按照属性
按照DOM树中的位置
-
通配选择器
-
标签选择器
-
id选择器
-
类选择器
-
属性选择器
伪类
1 不基于标签和属性定位元素
2 几种伪类
状态伪类
结构性伪类
设置文本样式
组合
颜色-HSL
Hue Saturation Lightness
-
alpha透明度
-
字体 font-family
-
通用字体族
-
font-family使用建议
字体列表最后写上通用字体族
英文字体放在中文字体前面
-
使用Web Fonts
-
font-size
关键字：small medium large
长度：px em
百分数：相对于父元素字体大小
调试CSS
-
右键点击页面，选择【检查】
-
使用快捷键
Ctrl+Shift+I(windows)
Cmd+Opt+I(Mac)
CSS 工作原理
CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。
CSS 布局
-
text-align
-
spacing
-
text-indent
-
text-decoration
-
white-space
