《图解CSS》CSS简介
在学习一门新的知识之前，我们需要先知道，它是什么，为什么使用，和怎样使用，也就是常说的3W（what， why，how）。
CSS是什么？
CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表，是一种用来体现HTML或者XML等文件样式的计算机语言，是一种标准的样式表语言，用于形容网页的表示，即布局和格式。
因为网页是由HTML结构组成的，所有通过”是什么”我们可以猜测到”为什么”，即CSS与HTML的关系。
为什么使用CSS？
在《图解HTML》的学习中让我们知道，HTML可以搭建出网页的骨架，尽管也具备少量样式的属性，但都是极其简单的。假如我们想画出一张漂亮的网页，那么我们就离不开CSS的配合。它具备对网页的布局、颜色、背景、宽度、高度、字体进行控制，让网页按您的美工设计布局的更加美观漂亮。
比照如下：
CSS如何使用
在使用前，我们需要理解下CSS使用的使用规则，即语法。
选择器 { 属性1：属性值； 属性2：属性值}既然已经知道了CSS的基础语法，我们看看它的如何配合HTML或者者说HTML是如何使用CSS让自身变得更加美丽动人的。
CSS可以通过四种方式增加到HTML中
- 内联样式：在HTML元素中使用
style属性 - 内部样式表： 在HTML文档头部
<head>区域使用<style>元从来包含CSS - 外部引用：使用外部CSS文件
- @import url():使用@import指令（一种at规则）（要注意的是，@import指令必需出现在样式表中其余样式之前，否则@import引用的样式表不会被加载）
示例：
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @import url("./import.css"); </style> <link rel="stylesheet" href="./index.css"> <style> .internal-style { font-style: italic; color:burlywood; } </style></head><body> <div style="font-style: italic; color: blueviolet;">内联样式- 在HTML元素中使用"style" 属性</div> <div class="internal-style">内部样式表 -在HTML文档头部</div> <div class="external-style">外部引用 - 使用外部 CSS 文件</div> <div class="import">测试import方法引入</div></body></html>import.css
.import{ color: blue; }index.css
.external-style { font-style: italic; color: red;}
学习之前
在正式学习css知识之前，需要理解CSS的少量基本概念，例如，继承、层叠、数字值、颜色值。这里详情下简单的概念，方便之后的学习了解，并不做深层次的讲解。
继承
CSS中的祖先元素会把CSS属性的值传递给子元素，例如body设置了字体为‘宋体’，那么便会将该CSS属性应用的body的所有子孙元素。
CSS有很多可继承的属性：例如文本相关的颜色、字体、字号等
CSS也有很多不可继承属性，比方边框、外边距、内边距、等。
层叠
层叠就是层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用哪个值。
层叠优先级：
行内样式 > 嵌入样式 > 链接样式 > 默认样式
数字值
数字值主要分两类：绝对值和相对值
绝对值及示例
| 绝对值 | 单位缩写 | 示例 |
|---|---|---|
| 英寸 | in | height:6in |
| 厘米 | cm | height:6cm |
| 毫米 | mm | height:6mm |
| 点 | pt | height:6ipt |
| 皮卡 | pc | height:6pc |
| 像素 | px | height:6px |
相对值及示例
| 相对对值 | 单位缩写 | 示例 |
|---|---|---|
| Em | em | height:1.2em |
| Ex | ex | height:6ex |
| 百分比 | % | height:10% |
em和ex都是字体大小的单位，em表示一种字体中字母M的宽度；ex等于给定字体中字母x的高度。
常用：px，em，%
颜色值
- 颜色名：如red
- 十六进制颜色：如#RRGGBB或者#RGB
- RGB颜色的值（R，G，B）：如rgb(25,25,25)
- RGB百分比值（R%,G%,B%）:如rgb(1%，2%，80%)
- HSL（色相，饱和度%，亮度）：格式：HSL(0,0%,0%)
- Alpha通道：RGB和HSL都支持Alpha，相应的格式分别叫RGBA和HSLA
由上，我们已经对CSS的3w有了一个简单的认知。显然，CSS并不仅此，接下来，文章会从选择器、字体、框模型、背景与边框、定位等逐渐理解CSS的工作原理及提供的API。
假如我的博客对你有帮助、假如你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！
听说 ? 点赞 ? 的人运气不会太差，每一天都会元气满满哦 嘿嘿!!! ❤️ ❤️ ❤️
大家的支持就是我坚持下去的动力。点赞后不要忘了? 关注 ?我哦！
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 《图解CSS》CSS简介
