上回说到学HTML5得懂点儿CSS，HTML管网页布局，但好看的界面还得多靠CSS来打造。这次咱们就先复习下CSS2基础知识，再聊聊CSS3那些新鲜玩意儿和它跟CSS2有啥不一样。目标就是让你彻底搞明白CSS，设计出炫酷的网页！
1.CSS是什么？
大家都知道，CSS（CascadingStyleSheets，层叠样式表）是一种给HTML或者XML（比如SVG、MathML或者XHTML这些）文档打扮的语言。说白了，它就是让网页看起来更漂亮的工具。按照W3C的规定，网页其实可以分成三大部分：数据和结构（HTML）、样子（CSS）和动作（JavaScript）。这样分，代码就更好管理，也更容易理解。
2.CSS选择器
CSS选择器就像是给CSS定调子的家伙，用来搞清楚什么元素要接受我们的样式打扮。常见的有这么几个：
-标签字选器：就是看哪个地方最近，走得近就选上！标签就是每个元素的名字。
-找哪个类型：通过Class选择器，就能找出那些指定了特定类属性的元素。
-ID小技巧：跟类名选择器差不多，但ID选择器是独一无二哒！每页都得有自己专属的ID~
-选啥组堆：就是把好几个选择器放在一起，一块儿给它们用同个样子。
-派生选择器就是能利用元素在网页里的位置选出来！
3.样式的优先级
.s1{
属性名：属性
}
样式到底怎么看？简单来说就是，如果你给某个元素加了好几个样式规则，那哪个最后生效？这就涉及到多种类型的样式设定了
-外部样式：样式定义在单独的.css文件中。
-内部样式：样式定义在HTML文档的<head>部分。
div.s1{
font-size;120px;
}
-内联样式：样式直接写在HTML元素的style属性中。
有冲突时，内联样式排第一，接着就是内部样式，最后才轮到外部样式！
#d1{
font-size:italic;
font-weight:900;
}
4.CSS2与CSS3的区别
CSS3就是CS2的加强版！它带来很多新东西，比如圆角边框啦、阴影效果啦还有渐变背景什么的，这些都让网页设计变得更酷炫。而且，因为CSS3的兼容性能好，不管你用哪个设备或哪款浏览器看网页，都会看到一样的样子~
5.使用CSS3的新特性
CSS3的新功能能给网页设计添彩不少。比如，利用border-radius属性就能轻易给元素加上圆角效果；而box-shadow这个属性让你在元素上加点阴影，既有趣又有立体感。再说说渐变背景和动画效果，让你的网页更生动有趣！
h1,h2,h3{ //用逗号隔开
color:bllue;
}
6.浏览器兼容性问题
虽然CSS3有好多新功能，但是不同浏览器都不是那么买账，所以咱们做设计和开发时得留个心眼儿，特别关注下浏览器兼容性的问题。搞定这件事其实不难，咱们用一些工具和方法就行，比如检查特征、逐渐加强和换个玩法（优雅降级）之类的。
7.响应式设计与CSS3
#d2 p{
span style="white-space:pre"> color:red;
font-size:300;
}
响应式设计就是让网页根据你的设备和屏幕大小自动调整样子，比如CSS3就很厉害，它有个叫媒体查询的功能，能根据你的屏幕宽窄自动应用相应的样式！
8.CSS框架与预处理器
想快点做出好看的网页？那就用CSS框架(比如Bootstrap)和预处理程序(像Sass或Less吧)。它们有好多现成的样式和变量供你用，帮你轻松搞定网页布局。
/* */
9.最佳实践与技巧
网页设计中，有些方法能帮你提升CSS编程的速度和质量！比如，保持好看又好懂的代码，利用模块化和组件化的方式整理代码，甚至用工具简化繁琐工作。
总结
CSS是网页好看好用的秘诀！它让网页变得美美的，使用起来也更舒服了。学好了基本的CSS操作，还有更多高级特性等你挖掘。别担心，看完这篇文章，你就会对CSS有更深的了解。记住要好好利用这些技巧，打造出自己满意的网页最后问你们个小问题：你们最爱用CSS的哪个功能呀？快来评论区告诉大家，别忘了点个赞和分享给好友！
评论0