CSS
在 HTML 中使用 CSS
1.内联样式
内联样式是在元素属性中设置样式。此种方式很适合用于测试样式和快速查看样式效果,但是不推荐在整个文档上使用此方法。
在使用此方法时,必须在每一个元素上重复设置各个样式,这样既增加文档大小,又增加文档 的更新和维护难度。例如,所有的
- 元素 都设置了宽度大小,如果需要修改,就需要反复更改多处样式定义内容。
-
<nav> <ul> <li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">首页</li> <li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">Web前端开发</li> <li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">Linux操作系统</li> <li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">计算机网络</li> <li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">MySQL数据库管理</li> </ul> </nav>
注意:nav 作用效果和 div 相同,仅表示导航专用标签。
2.嵌入样式
嵌入样式是通过在 HTML 文档头定义样式单部分来实现的。通常不建议使用嵌入样式,因为此方式必须在 HTML 文档内部定义样式,如果此文档的 Css 样 式需要被其他 HTML 文档使用,那么就必须重新定义。大量 CSS 嵌套在 HTML 文档中,也会导致 HTML 文档过大,造成网络负担过重。如果需要修改整站风格时,必须对网站的每一个网页进行修改, 不利于更新和管理。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> li { float: left; padding: 4px 5px 0px 5px; list-style: none; } </style> </head> <body> <nav> <ul> <li>首页</li> <li>Web前端开发</li> <li>Linux操作系统</li> <li>计算机网络</li> <li>MySQL数据库管理</li> </ul> </nav> </body> </html>
3.外部样式
外部样式是将所有样式写在一个外部文件中, 在 HTML 文档中使用 元素,将文件链接到 需要设置样式的文档上。使用这种方法,只需要修改链接的文件,就可以完全改变网页的整体风格。 此外,也可以使用这种方法修改或调整文档,使之适应不同环境或设备的显示要求。 此种方法是推荐使用的方式。 如果使用外部样式,修改样式是刷新浏览器可能看不到修改的效果,因为浏览器为了节省网速,缓存了先前的 css 文件,可以使用 ctrl + f5 强制刷新。
响应式(了解)
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query 的使用等。无论用户正在使用笔记本还是 iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
案例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>响应式</title> <style> body { background-color: white; } @media screen and (min-width: 768px) { /*分辨率宽度为768px以上*/ body { background-color: red; } } @media screen and (min-width: 992px) { /*分辨率宽度为992px以上*/ body { background-color: purple; } } @media screen and (min-width: 1200px) { /*分辨率宽度为1200px以上*/ body { background-color: yellow; } } </style> </head> <body> <ul> <li>浏览器宽度小于768px时,背景颜色为白色。</li> <li>浏览器宽度在768px至992px之间时,背景颜色为红色。</li> <li>浏览器宽度在992px至1200px之间时,背景颜色为紫色。</li> <li>浏览器宽度大于1200px时,背景颜色为黄色。</li> <li>此案例仅为演示,实际应用要复杂的多。</li> </ul> </body> </html>
基础选择器
基础选择器是 CSS 中最基础、最常用的选择器,从 CSS 诞生开始就一直存在, 供 Web 前端开发者快速地进行 DOM 元素的查找与定位。基本语法如下:
选择器名字{ 属性:值; 属性:值; }
一个简单的选择器代码如下
li { float: left; padding: 4px 5px 0px 5px; list-style: none; }
在该例中,“li”就是选择器(类型选择器),“float"是属性,“left" 是取值。该 Css 定义表示:对页面
- 标签向左浮动。 基础选择器包含通配符选择器、元素选择器、类选择器和 ID 选择器,通过这些基础的选择器可 以为 HTML 元素添加很多的附加信息,如指定 div 元素的 widh 属性以实现对 div 元素的宽度控制。 如下为几个常用的基础选择器
-
* 通用元素选择器,匹配任何元素 E 标签选择器,匹配所有使用E标签的元素 .info和E.info class选择器,匹配所有class属性中包含info的元素 #info和E#info ID选择器,匹配所有ID属性等于footer的元素
案例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { color: yellow; } div { color: aqua; } .pink { color: pink; } #green</