拉森火山国家公园
拉森火山国家公园是位于...
气候
因为拉森火山国家公园...
第六届360前端星计划_了解CSS
主讲人
- 赵文博
- 360前端技术专家
- 奇舞团
一、CSS是什么
- Cascading Style Sheets
- 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
h1 { /*选择器*/
color: white; /*color：属性 white：属性值*/
font-size: 14px; /*font-size: 14px; 声明（Declaration）*/
}
二、在页面中使用 CSS
- 外链（推荐）：利于维护。
- 嵌入
- 内联（不推荐）
"margin:1em 0"
>Example Content
完整的CSS例子：
Blog
Web框架的架构模式探讨
在写干货之前，我想先探讨两个问题，
模式的局限性？模式有什么用？
运行效果：
三、CSS是如何工作的
四、选择器 Selector
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素
- 按照标签名、类名或 id
- 按照属性
- 按照 DOM 树中的位置
- 通配选择器 ：*
This is heading
this is some paragraph.
运行效果：
2. 标签选择器：通过标签名选择元素。
This is heading
this is some paragraph.
运行效果：
3. id 选择器：通过id属性选择元素，id值必须是唯一的，#id。
HTML5 文档
运行效果：
4. 类选择器：通过class属性选择元素，可出现多次，.类名。
Todo List
- Learn HTML
- Learn CSS
- Learn JavaScript
运行效果：
5. 属性选择器：通过属性选择元素，[属性]。
属性值选择器
通过属性选择元素，标签[属性=“属性名”]。
运行效果：
高级用法
限制属性值以什么开头（a[href^="#"]），以什么结尾（a[href$=".jpg"] ）
运行效果：
6. 伪类 (pseudo-classes)选择器
- 不基于标签和属性定位元素
- 几种伪类：状态伪类、结构性伪类
1）状态伪类（动态）
根据元素所处的状态选择元素。
a标签：link 、visited、hover、active
a:link { /*正常状态*/
color: black;
}
a:visited { /*已经访问过*/
color: gray;
}
a:hover { /* 鼠标放上去*/
color: orange;
}
a:active { /* 鼠标放上去，并点击*/
color: red;
}
:focus { /*鼠标点击后，输入文字时*/
outline: 2px solid orange;
}
"http://example.com">
example.com
2）结构性伪类
通过元素在DOM树中的位置选择元素。
电影票房排行
- 阿凡达
- 泰坦尼克号
- 星球大战：原力觉醒
- 复仇者联盟 3
- 侏罗纪世界
li {
list-style-position: inside;
border-bottom: 1px solid;
padding: 0.5em
}
li:first-child {
color: coral
}
li:last-child {
border-bottom: none;
}
运行效果：
组合器 (Combinators)
简单的选择器组合起来
例：标签和class组合
最少3个字符
运行效果：
组合器 (Combinators)的组合方式
例子：
article p {
color: coral;
}
article > p {
color: limegreen;
}
article section h2 {
border-bottom: 1px dashed #999;
}
运行效果：
选择器组
多个选择器可以放到一个组中，统一设置样式：
body, h1, h2, h3, h4, h5, h6, ul, ol, li {
margin: 0;
padding: 0;
}
[type="checkbox"], [type="radio"] {
box-sizing: border-box;
padding: 0;
}
五、文字样式
- color
1）颜色 - RGB
- rgb(155,158,118) （0-255）
- 16进制：#9b9e76 （6位）
2）颜色 - HSL：hsl(213, 100%, 23%)
3）keyword：关键字表示
blue：蓝色
red：红色
4）alpha 透明度（0-1）
- #ff00003b
- rgba(255, 0, 0, 0.23)
- hsla(0, 100%, 50%, 0.23)
- 字体 font-family（可设置多个值）
1）通用字体族
- Serif 衬线体：Georgia、宋体 （字体线条不一致）
- Sans-Serif 无衬线体：Arial、Helvetica、黑体、微软雅黑 （字体线条一致）
- Cursive 手写体：Caflisch Script、楷体
- Fantasy：Comic Sans MS, Papyrus, Zapfino （设计感强，较夸张）
- Monospace 等宽字体：Consolas、Courier、中文字体
2）font-family 使用建议
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前面
使用 Web Fonts：把字体文件放在服务器上，用URL去访问。
中文 Web Fonts：中文字体文件较大，会使用字体处理工具，把用到的字体提取出来，变成小的字体文件使用。
3）font-size
- 关键字：small、medium、large
- 长度：px（像素）、em（相对于父元素字体大小）
- 百分数：相对于父元素字体大小
4）font-style
- 默认：normal
- 斜体：italic
5）font-weight（字重：100-900）
- normal：表示400
- bold：表示700
6）line-height（行间距：两行文字基线间的距离）
组合使用：
font: style weight size/height family
h1 {
/* 斜体 粗细 大小/行高 字体族 */
font: bold 14px/1.7 Helvetica, sans-serif;
}
p {
font: 14px serif;
}
7）text-align （文字对齐）
- left ：左对齐
- center ：居中对齐
- right ：右对齐
- justify：分散对齐
8）spacing（间距）
- 字母间距：letter-spacing：0-10px
- 单词间距：word-spacing：0-10px
- 文字首行缩进：text-indent：0-200px
9）text-decoration（文字修饰）
- none ：默认值
- underline： 下划线
- line-through ：中划线/删除线
- overline：文字上边加线
10）white-space：控制空格换行的行为
- normal ：默认值
- nowrap ：永远不换行
- pre ：保留HTML中原始代码中写的空格和换行，不进行任何的合并
- pre-wrap ：当行内显示不下时换行，否则还是保持原样
- pre-line：合并空格，保留换行
- 调试 CSS
- 右键点击页面，选择检查
- 使用 快捷键
1）Ctrl+Shift+I (Windows)
2）Cmd+Opt+I (Mac)