CSS3基础入门
CSS3简介
CSS（cascading style sheet，层叠式样式表）是用来给HTML标签添加样式的语言
CSS3是CSS的最新版本，增加了大量的样式、动画、3D特效和移动端特性等
前端三层
| 语言 | 功能 | |
|---|---|---|
| 结构层 | HTML | 搭建结构、放置部件、描述语义 |
| 样式层 | CSS | 美化页面、实现布局 |
| 行为层 | JavaScript | 实现交互效果、数据收发、表单验证等 |
CSS使样式和结构分离
CSS使样式和结构分离，样式和结构不用“杂糅着写”，而是彼此分开：HTML就负责结构，CSS负责样式
HTML和CSS怎么结合呢？“\textcolor{red}{选择器}”就是两者的纽带
CSS的本质
CSS就是样式的“\textcolor{red}{清单}”，要书写合适的选择器，然后把指定元素的样式“\textcolor{red}{一条一条罗列}”出来
.spec { color: green; font-weight: bold; font-style: italic; } .warn { font-size: 20px; background-color: orange; }CSS没有加减乘除、与或非、循环、选择、判断，\textcolor{red}{CSS不是 “编程”，就是简单直接的罗列样式}
\textcolor{red}{背诵CSS属性是非常重要的}，属性背诵熟练程度决定了做网页的速度
CSS3的书写位置
内嵌式
在学习CSS时，最常使用内嵌式，顾名思义，内嵌在.html文件中
在<head></head>标签对中，书写<style></style>标签对，里面书写CSS语句
外链式
可以将CSS单独存为.css文件，然后使用<link>标签引入它
<link rel="stylesheet" href="css/css.css"> 关系 样式表 路径和文件名
外链式的优点：多个html网页，可以共用一个css样式表文件
导入式
导入式是最不常见的样式表导入方法
<style> @import url(css/css.css); </style>
使用导入式引入的样式表，不会等待css文件加载完毕，而是会立即渲染HTML结构，所以页面会有\textcolor{red}{几秒中的“素面朝天”的时间}
@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）。
行内式
样式可以直接通过style属性写在标签身上
<h2 style="color: red;">我是一个二级标题</h2>
行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用
后台工程师经常使用行内式
CSS3的基本语法
最后一条样式可以不书写分号
.spec { color: green; font-weight: bold; font-style: italic } .warn { font-size: 20px; background-color: orange }可以没有换行
h1 {color: green; font-weight: bold; font-style: italic} p {font-size: 20px;background-color: orange}CSS3的注释是/* */ ,按ctrl+/可以快速输入
p { /* 设置文字字号 */ font-size: 40px; }
共同学习，写下你的评论
评论加载中...
作者其他优质文章
