阶段性总结（CSS）一

1. CSS格式

格式：选择器（选定标签）+样式（设置样式）

 <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>

     2.CSS选择器

选择器：用于选择指定标签，通过选择器选定你想要设置样式的标签

基础选择器：标签选择器、类选择器、id选择器和通配符选择器

<style>
div{
    /* 标签选择器 */
}
.box{
    /* 类选择器,将class="box"的标签选出（可以同时存在多个类名相同的标签） */
}
#no1{
    /* id选择器,id唯一标识一个标签,选出唯一的一个id="no1"的标签 */
}
*{
    /* 通配符选择器,将所有的标签统一修改样式 */
    margin:0;
    padding: 0;

</style>

     3.CSS字体属性

指定在一个声明的所有字体属性

<style>
p.ex1
{
    font:15px arial,sans-serif;
    font-weight:normal;
}
/*
font-style	规定字体样式
font-weight	规定字体粗细
font-size/line-height	规定字体尺寸和行高
font-family	规定字体系列
也可以简写（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"
*/
</style>

         4.CSS文本属性

<style>
p.ex2{
    color: red;
    /* color: rgb(255,255,255) */
    /* color: #ccc; */
    text-align: center;
    /* 设置文本水平对齐方式  属性值：left,right,center */
    text-decoration: none;
    /* 设置文本装饰线  属性值：none underline(下划线) overline(上划线) line-through(删除线)*/
    text-indent:20px;
    /* 设置文本缩进 属性值：20px (固定缩进20像素)  2em(缩进2个文字大小) */
    line-height: 20px;
    /* 行间距 */
}
</style>

        5.CSS引入方式

行内样式表：直接在目标标签内设定样式

内部样式表：将CSS样式代码放入<style>标签中

外部样式表：从外部CSS文件引入

<div style="color:red;">
行内样式表
<style>
    div{
        color:red;
    }
</style>
内部样式表

<link rel="stylesheet" href="index.css">
外部样式表

         6.伪类选择器

a:link 选择未被访问过的链接

a:visited 选择已被访问过的链接

a:hover 鼠标指针悬停的链接

a:acrtive 鼠标按下未弹起的链接

input:focus 选取获得光标的表单元素

        7.其他选择器

后代选择器：.nav a     //将.nav子代中的所有a标签选出

子元素选择器：.nav >a  //选出.nav子代中最近的一代a标签选出（直系a，只选出亲儿子a）

并集选择器： .nav,.header //同时选择class="nav"的和class="header"的标签

<div class="nav">
        <a href="#">我是亲儿子a</a>
        <a href="#">我是亲儿子a</a>
    </div>
    <div class="nav">
        <span><a href="">我不是亲儿子a</a></span>
    </div>
/* 在上面的例子中第一个div.nav的a会被子元素选择器选中，而第二个div.nav中的a不会被选中*/