CSS(四)

1.CSS 导航栏

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。
导航栏=链接列表导航条基本上是一个链接列表，所以使用

• 和
• 元素非常有意义：

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

　１.1添加链接的样式和鼠标移动到选项上修改背景颜色：

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}
</style>

1.2激活/当前导航条实例

在点击了选项后，我们可以添加 active"类来表示哪个选项被选中：

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

2.CSS 下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>菜鸟教程</p>
    <p>www.runoob.com</p>
  </div>
</div>

3.CSS媒体类型

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。
一些CSS属性只设计了某些媒体。例如”voice-family”属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如，”font-size”属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans - serif字体比较适合在屏幕上阅读，而serif字体更容易在纸上阅读。

3.1@media 规则

@media 规则允许在相同样式表为不同媒体设置不同的样式。
在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印，将是10个像素的Times字体。请注意，font-weight在屏幕上和纸上设置为粗体：

<style>
@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}
</style>

3.2 其他媒体类型

注意：媒体类型名称不区分大小写。

媒体类型	描述
all	用于所有的媒体设备
aural	用于语音和音频合成器
braille	用于分页的盲人用点字法打印机
handheld	用于小的手持的设备
print	用于打印机
projection	用于方案展示，如打印机
screen	用于电脑显示器
tty	用于使用固定密度字母栅格的媒体，比如电传打字机和终端
tv	用于电视类型的设备

4.CSS 属性 选择器

具有特定属性的HTML元素样式
具有特定属性的HTML元素样式不仅仅是class和id。

4.1 属性选择器

下面的例子是把包含标题（title）的所有元素变为蓝色：

[title]
{
    color:blue;
}

４.2 属性和值选择器

下面的实例改变了标题title=’runoob’元素的边框样式:

<style>
[title=runoob]
{
    border:5px solid green;
}
</style>
<!--适用-->
<img title="runoob" src="logo.png" width="270" height="50" />
<!--不适用-->
<a class="runoob" href="http://www.runoob.com/">runoob</a>

4.3 表单样式

属性选择器样式无需使用class或id的形式:

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

许多 HTML 开发者都不是程序员