css练习

1. css概念：

一句话概括：负责页面的美观（修饰）
html：负责页面的结构
css：负责页面的修饰

2)css的概述
css,cascading style sheet , 层叠样式表.

3)css如何使用：
css是在html的基础编写的。
css是浏览器解析的

2. 行内样式、内部样式、外部样式

1. 行内样式

特点：
在标签内使用style属性，引入css内容
只能在当前标签中起作用

2. 内部样式

特点：
在当前html页面中<head>内使用<style>标签引入css内容
控制多个标签
html代码和css代码混杂！！

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!--内部样式-->
    <style type="text/css">
    <!--内部样式的标签-->
    p{
        color: red;
    }
    </style>
</head>
<body>
<!--行内样式-->
<p style="color: red; font-size: 20px;">hello world1</p>
<p style="color: green; font-size: 20px;">hello world2</p>
<p style="color: blue; font-size: 20px;">hello world3</p>
<p style="color: black; font-size: 20px;">hello world4</p>
<p>hello world5</p>
<p>hello world6</p>
<p>hello world7</p>

</body>
</html>

3. 外部样式(推荐)

特点：
独立开发一个css文件，引入css内容。在html页面使用<link/>标签导入外部的css文件
控制多个标签
html代码和css代码分离！！！易于维护。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!--外部样式-->
    <link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>
<!--行内样式-->
<p style="color: red; font-size: 20px;">hello world1</p>
<p style="color: green; font-size: 20px;">hello world2</p>
<p style="color: blue; font-size: 20px;">hello world3</p>
<p style="color: black; font-size: 20px;">hello world4</p>
<p>hello world5</p>
<p>hello world6</p>
<p>hello world7</p>

</body>
</html>

优先级问题：行内样式 >(优先) 内部样式和外部样式（后面的生效）

3. css选择器（重点）

css语法组成部分：选择器 + css属性

a{ -- 选择器（selector）
font-size:20px; -- css属性(name:value形式出现)
color:red;
}

什么是选择器？使用选择器，选择到你希望添加样式的标签

1. 标签选择器
特点：
选择同名的标签

2. 类选择器
特点：
选择同类（同一个class属性值）的标签

3. id选择器
特点
只会选择一个特定id值的标签
注意： id选择器通常只会需要一个html页面中一个特定标签，如果一个html页面中出现多个同id的标签，这样使用js代码去获取某个标签( document.getElementById("id值") ) 的时候会出问题 !!

优先级问题； id选择器 > 类选择器 > 标签选择器

4. 并集选择器
交集选择器

5. 通用选择器

6. 伪类选择器
作用：用于控制标签在不同状态下的样式
四种状态：
:link: 标签的原始状态
:hover: 标签的鼠标经过状态
:active: 标签被按下但没有松开的状态
:vistied: 标签被访问过的状态（被点过）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!--标签选择器-->
    <style type="text/css">
        /*标签选择器*/
        div{
            color: red;
            font-size: 20px;
        }
        /*类选择器*/
        .c1{
            color: blue;
            font-size: 30px;
        }
        /*id选择器*/
        #d1{
            color: black;
            font-size: 40px;
        }
        /*并集选择器，需要的都写上*/
        .c2, #d4{
            color: yellow;
            font-size: 50px;
        }
        /*交集选择器*/
        .c3 span{
            color: grey;
            font-size: 60px;
        }
        /*通配选择器*/
        *{
            color: purple;
            font-size: 70px;
        }
        /*伪选择器*/
        /*伪类选择器*/
        /*:link: 标签的原始状态*/
        a:link{
           color: red;
           font-size:20px;
        }
        /*:vistied: 标签被访问过的状态（被点过）*/
        a:visited{
            color:gray;
            font-size:20px;
        }
        /*:hover: 标签的鼠标经过状态*/
        a:hover{
            color: blue;
            font-size:20px;
        }
        /*:active: 标签被按下但没有松开的状态*/
        a:active{
            color:green;
            font-size:20px;
        }        
        /*
        1)在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
        2)在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
        
         标准顺序： link  ->  visited - > hover  ->  active
        */
    </style>
</head>
<body>
    <div class="c1" id="d1">hello world1</div>
    <div class="c1" id="d2">hello world2</div>
    <div class="c2" id="d3">hello world3</div>
    <div class="c2" id="d4">hello world4</div>
    <div class="c3" id="d5">
        <span>span1</span>
    </div>
    <div class="c3">hello world6</div>
    <a href="">jump</a>
</body>
</html>