前端基础之CSS_html/css_WEB-ITnose
- WBOY原创
- 2016-06-21 08:58:451014浏览
在在学习css之前，我们需要对HTML的知识有基本的了解！
什么是CSS?
CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，我把它叫作“层叠样式表”，我感到这样顺口一 点，没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生，实际上无论你用Internet Explorer还是 Netscape Navigator在网上冲浪，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工 具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，为什么同样内容的网页，有的人做出来有 几十KB，而高手做出来只有十几KB，CSS在其中的作用是不言而喻的。
谈谈 css 页面优化的三种方式：
第一、二种 方式：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <!-- <h2> 第二种方式，和下面第二种方式结合使用，其中 .c1 中 “.” 代表class选择器</h2> --> <style> .c1{ background-color: red;border: 10px solid green; } </style></head><body> <h2>css 第一种存在方式</h2> <div style="background-color: red;border: 10px solid green;">css 第一种方式 div</div> <div style="background-color: red;border: 10px solid green;">css 第一种方式 div</div> <h2>css 第二种存在方式 class = "c1名字"</h2> <div class="c1">css 第二种方式 div</div> <div class="c1">css 第二种方式 div</div> <div class="c1">css 第二种方式 div</div></body></html> 第三种方式：(直接引用css文件)
可将重复代码写在一个".css" 文件中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <!-- <h2>css 第三种存在方式，下面直接引用</h2> --> <link rel="stylesheet" href="common.css" /></head><body> <h2>css 第三种存在方式</h2> <div class="c1">css 第三种方式 div</div> <div class="c1">css 第三种方式 div</div> <div class="c1">css 第三种方式 div</div></body></html>
common.css 中内容：
.c1{ background-color: red;border: 10px solid green;} 第三种方式，直接引用common.css 文件中的内容，截图如下
演示效果如下：
持续更新中...
更多链接： http://www.w3school.com.cn/css/
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn