第二天 CSS基础教程

CSS 指层叠样式表 (Cascading Style Sheets)
主要就是用来定义网页外观的。

---

CSS的引入

外部样式表：
就是定义一个css文件然后在html中引用它，复用性高，推荐使用这种方式

<link rel="stylesheet" href="css/style.css" />

内部样式表（位于 <head> 标签内部）：
直接在html里面写css

<style type="text/css">
        table{
            border: groove;
        }
</style>

内联样式（在 HTML 元素内部）：
直接在标签上写样式

<h3 align="center">欢迎来到xx导航</h3>

---

优先级：内联样式>内部样式>外部样式>浏览器默认样式

---

CSS格式

选择器 { 属性1:值1; 属性2:值2; ... 属性N:值N }

选择器：

选择器是用来指定要修改样式的元素的

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #id{
                /*这个id选择器为某个标签设置样式*/
            }
            .div2{
                /*这个类选择器为所有class为div2的标签设置样式*/
            }
            p{
                /*这个元素选择器为所有p标签设置样式*/
            }
        </style>
    </head>
    <body>

        <div id="div1">
            <!--id是唯一的-->
        </div>
        <div class="div2">
            <!--class是不唯一的，可以在多个标签中定义相同的class，这样方便为它们设置相同的样式-->
            <p>一些文字</p>
        </div>
    </body>
</html>

优先级： id选择器>类选择器>元素选择器
这里只讲了三种基本的选择器，更多选择器移步W3School CSS教程

属性：

border边框
margin外边距
padding内边距
align对齐
background背景
font字体

---

CSS定位

通过使用position属性确定元素的定位方式。
position属性值有以下几种：
static
静态定位，正常生成元素框。
relative
相对定位，元素框偏移某个距离。
absolute
绝对定位，元素框从文档流完全删除，并相对于其包含块定位。
fixed
固定定位，类似于 absolute，不过其包含块是窗口。

---

CSS浮动

浮动主要用于产生文字环绕图像的效果，对需要浮动的图像使用float属性即可。例如：

.myimg{
    float:right;
    /*靠右浮动*/
}