HTML 知识(三)：CSS

1、什么是CSS

css是指层叠样式表（Cascading Style Sheets）。样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。

2、CSS实例

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

3、id 和 class 选择器

要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器

3.1 id选择器

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

  #myform{
            background-color: yellow;
        }


<form id="myform">
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname"><br>
    Password: <input type="password" name="pwd">
</form>

3.2 class选择器

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

        .myclass
        {
            background: red;
        }


<p class="myclass">我是谁</p>

4、如何插入CSS

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

4.1 外部样式表

 <link rel="stylesheet" type="text/css" href="css/firsty.css">

4.2 内部样式表

    <style>
        #myform{
            background-color: yellow;
        }
        .myclass
        {
            background: red;
        }
    </style>

4.3 内联样式

<h2 style="color: green">我是h2</h2>

5. background属性

CSS 背景属性

Property	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

5.1 background-color：

body {background-color:#b0c4de;}

5.2 background-image：

5.2.2 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

    body{
        background-image: url("images/du.jpg");
    }

效果：

5.2.3 在水平方向进行平铺：

    body{
        background-image: url("images/du.jpg");
        background-repeat: repeat-x;
    }

效果：

5.2.4 改变图像的位置

    body{
        background-image: url("images/du.jpg");
        background-repeat: no-repeat;
        background-position: left,center;
    }

效果：

6. 文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

7. 字体

7.1 字体大小

font-size 属性设置文本的大小。如果不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em。

8. Display(显示) 与 Visibility（可见性）

8.1 Display

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

8.2 Visibility

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

9. Float(浮动)

元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

10. 导航栏

    <style>
        ul{
            list-style-type: none;
            width: 200px;
            background-color: #f1f1f1;
            margin: 0;
            padding: 0;
        }
        li a:hover {
            background-color: #555;
            color: white;
        }
        li a{
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
    </style>


<body>
<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>
</body>

效果: