Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

　　　　Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明　　　　

my.css

p {
    color: yellow;
}

demo1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 2.内部样式:在head元素内部的style标签内
    写样式,这种样式可以在当前网页上复用. -->
<style>
    /*CSS的注释是这样的*/
    h2 {
        color: blue;
    }
</style>
<!-- 3.外部样式:在单独的css文件中写样式,
    需要通过link标签将其引入到网页上才有效.
    这种样式可以在任意的网页上复用. -->
<link rel="stylesheet" href="my.css"/>
</head>
<body>
    <!-- 1.内联样式:在元素的style属性里写样式,
        这种样式只对这一个元素有效,无法复用. -->
    <h1 style="color:red;">CSS是层叠样式表</h1>
    <h2>CSS有3种使用方式</h2>
    <p>1.内联样式</p>
    <p>2.内部样式</p>
    <p>3.外部样式</p>
</body>
</html>

demo2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    /*1.继承性:在父元素上写的样式,可以被子元素
        继承,注意只有字体、颜色可以继承。*/
    body {
        font-family: 
            "微软雅黑","文泉驿正黑","黑体";
    }
    /*2.层叠性:先后给一个元素设置不同的样式,
        其效果会叠加在一起. */
    h1 {
        color: red;
        font-size: 50px;
    }
    /*3.优先级:先后给一个元素设置相同的样式,
        其效果是以后者为准,也叫就近原则.*/
    h2 {
        color: blue;
    }
    /*...*/
    h2 {
        color: green;
    }
</style>
</head>
<body>
    <h1>苍老师</h1>
    <h2>范传奇</h2>
</body>
</html>

demo3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    /*1.元素选择器:略*/
    /*2.类选择器:选择一类(class="某值")
        具有共性的元素*/
    .girl {
        color: pink;
    }
    /*3.id选择器:根据id选择唯一的元素*/
    #p4 {
        color: red;
    }
    /*4.选择器组:写出一组选择器,会选中每个
        选择器所对应的目标的并集(合计).*/
    .girl,#p4 {
        /*字体加粗*/
        font-weight: bold;
    }
    /*5.派生选择器:
        选择某元素满足条件的后代 */
    /*5.1选择子孙*/
    #p5 b {
        color: red;
    }
    /*5.2选择儿子*/
    #p5>b {
        font-size: 30px;
    }
    /*6.伪类选择器:根据元素的状态选择元素*/
    /*6.1选择未访问过的超链接*/
    a:link {
        color: green;
    }
    /*6.2选择已访问过的超链接*/
    a:visited {
        color: red;
    }
    /*6.3选择激活态(正在点)的按钮*/
    #b1:active {
        background-color: green;
    }
    /*6.4选择有焦点(光标闪烁)的文本框*/
    #t1:focus {
        background-color: yellow;
    }
    /*6.5选择悬停态的图片*/
    img:hover {
        width: 250px;
        height: 250px;
    }
</style>
</head>
<body>
    <p class="girl">苍老师呀苍老师</p>
    <p>范传奇呀范传奇</p>
    <p class="girl">王克晶呀王克晶</p>
    <p id="p4">瞧你们那点破事</p>
    <p id="p5">北京市<u>海淀区<b>北三环</b>西路</u>甲18号<b>中鼎大厦</b>B座8层</p>
    <p>
        <a href="http://www.tmooc.cn">达内</a>
        <a href="http://www.sb.com">随便</a>
    </p>
    <p><input type="button" value="按钮1" id="b1"/></p>
    <p><input type="text" id="t1"/></p>
    <p>
        <img src="../images/01.jpg"/>
        <img src="../images/02.jpg"/>
        <img src="../images/03.jpg"/>
    </p>
</body>
</html>

demo4.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    /*1.单个边设置边框(left/right/top/bottom)*/
    h1 {
        border-left: 10px solid blue;
    }
    /*2.四个边设置相同的边框*/
    p {
        border: 1px dashed red;
    }
</style>
</head>
<body>
    <h1>苍老师</h1>
    <p>
        刘苍松,系达内Java教学总监.
        是Java教学改革的先驱.
        同时他也是一名摄影爱好者,
        他拍的片都很么么哒!
        他最擅长捕捉肉体和灵魂的契合点,
        能够折射出对人性的思考与鞭挞!
    </p>
</body>
</html>

 demo1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    div {
        border: 1px solid red;
        width: 100px;
        height: 100px;
    }
    /*1.四个边一起设置相同的边距*/
    #d1 {
        padding: 20px;
        margin: 30px;
    }
    /*2.四个边一起设置不同的边距(上右下左)*/
    #d2 {
        padding: 10px 20px 30px 40px;
        margin: 40px 30px 20px 10px;
    }
    /*3.单个边设置边距(left/right/top/bottom)*/
    #d3 {
        padding-left: 30px;
        margin-bottom: 20px;
    }
    /*4.对边设置边距(上下   左右)*/
    #d4 {
        padding: 20px 30px;
        margin: 20px 30px;
    }
    /*5.外边距的特殊用法:
        当采用对边设置外边距的时候,若
        第二个值为auto,则该元素水平居中. */
    #d5 {
        margin: 50px auto;
    }
</style>
</head>
<body>
    <div id="d0">d0</div>
    <div id="d1">d1</div>
    <div id="d2">d2</div>
    <div id="d3">d3</div>
    <div id="d4">d4</div>
    <div id="d5">d5</div>
</body>
</html>

demo2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    /*1.设置背景图*/
    body {
        background-image: 
            url(../images/background.png);
        background-repeat: repeat-y;
        background-position: center;
    }
    div {
        border: 1px solid red;
        width: 125px;
        height: 125px;
        margin: 10px auto;
    }
    /*2.采用简化的方式设置背景(色和图)
        background:颜色  图片  平铺  位置;
        上述4个值可以酌情省略,但至少要保留
        颜色或图片之一  */
    .enemy {
        background: 
            url(../images/airplane.png)
            no-repeat center;
    }
    .hero {
        background: 
            url(../images/hero0.png)
            no-repeat center;
    }
    /*3.固定背景图*/
    body {
        background-attachment: fixed;
    }
</style>
</head>
<body>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="hero"></div>
    <div class="hero"></div>
</body>
</html>

demo3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    h1,p {
        border: 1px solid red;
        width: 300px;
    }
    h1 {
        text-align: center;
        text-decoration: underline;
    }
    p {
        text-indent: 2em;
        line-height: 2em;
    }
    h1 {
        height: 100px;
        /*当行高=元素的高时,文字垂直居中*/
        line-height: 100px;
    }
</style>
</head>
<body>
    <h1>范传奇</h1>
    <p>
        华灯轻抚蚕丝被,
        锦墙呢喃诉床帏.
        情郎翘首索芳心,
        佳人回眸送秋水.
        丹心不畏相思苦,
        浓情何惧岁月催.
        万水千山终有路,
        几度良宵几轮回.
    </p>
</body>
</html>

 demo1.html  演示浮动定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    .d0,p {
        width: 400px;
        border: 1px solid red;
    }
    .d1,.d2,.d3 {
        width: 100px;
        height: 100px;
        margin: 10px;
    }
    .d1 {
        background-color: red;
    }
    .d2 {
        background-color: green;
    }
    .d3 {
        background-color: blue;
    }
    /*浮动*/
    .d1,.d2,.d3 {
        float: left;
    }
    /*消除浮动影响*/
    p {
        /*clear: left;*/
    }
    .d4 {
        clear: left;
    }
</style>
</head>
<body>
    <div class="d0">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
        <!-- 仅仅是用来消除浮动影响的 -->
        <div class="d4"></div>
    </div>
    <p>浮动时看看我的位置</p>
</body>
</html>

demo2.html   照片墙案例，演示浮动定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    body {
        background-color: #066;
    }
    ul {
        width: 780px;
        margin: 20px auto;
        /*border: 1px solid red;*/
        /*去掉列表左侧的符号*/
        list-style-type: none;
        /*将列表自带的内边距去掉*/
        padding: 0;
    }
    li {
        border: 1px solid #ccc;
        width: 218px;
        padding: 10px;
        margin: 10px;
        /*为了保证诗的顺序必须左浮动*/
        float: left;
        background-color: #FFF;
    }
    p {
        text-align: center;
    }
    /*鼠标悬停时,让li偏移2px的位置,
        从而实现一个抖动的特效. */
    li:hover {
        position: relative;
        left: 2px;
        top: -2px;
    }
</style>
</head>
<body>
    <ul>
        <li>
            <img src="../images/01.jpg"/>
            <p>啊,Teacher苍!</p>
        </li>
        <li>
            <img src="../images/02.jpg"/>
            <p>你在何方?</p>
        </li>
        <li>
            <img src="../images/03.jpg"/>
            <p>难道是去了东洋?</p>
        </li>
        <li>
            <img src="../images/04.jpg"/>
            <p>那边的痴汉很多很多,</p>
        </li>
        <li>
            <img src="../images/05.jpg"/>
            <p>你一定要穿好衣裳,</p>
        </li>
        <li>
            <img src="../images/06.jpg"/>
            <p>别走光!</p>
        </li>
    </ul>
</body>
</html>

demo3.html  演示绝对定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    div {
        border: 1px solid red;
        width: 318px;
        /*只声明定位,不设置偏移量,
          其位置不动,不受任何影响.
          这样做仅仅是为了将该元素
          作为绝对定位的目标而已.*/
        position: relative;
    }
    p {
        position: absolute;
        bottom: 50px;
        width: 318px;
        background-color: #FFF;
        text-align: center;
    }
    div {
        height: 318px;
    }
</style>
</head>
<body>
    <div>
        <img src="../images/3.jpg"/>
        <p>苍老师到此一游</p>
    </div>
</body>
</html>

demo4.html  演示固定定位(回到顶部)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    div {
        border: 1px solid #ccc;
        width: 40px;
        line-height: 30px;
        position: fixed;
        right: 10px;
        bottom: 30px;
        text-align: center;
    }
</style>
</head>
<body>
    <h1>iPhone7 Plus</h1>
    <p>这是一个新款手机</p>
    <p>它可以防火</p>
    <p>它可以防盗</p>
    <p>它可以防闺蜜</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <p>......</p>
    <div>
        <a href="#">顶部</a>
    </div>
</body>
</html>
go_to_top.html

 demo1.html  设置图片选中悬浮

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    div {
        width: 800px;
        height: 500px;
        margin: 20px auto;
        background-color: #066;
        position: relative;
    }
    img {
        position: absolute;
    }
    .i1 {
        left: 150px;
        top: 100px;
    }
    .i2 {
        left: 200px;
        top: 150px;
    }
    .i3 {
        left: 250px;
        top: 50px;
    }
    img:hover {
        z-index: 999;
    }
</style>
</head>
<body>
    <div>
        <img src="../images/1.jpg" class="i1"/>
        <img src="../images/2.jpg" class="i2"/>
        <img src="../images/3.jpg" class="i3"/>
    </div>
</body>
</html>

demo2.html  设置列表序列样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    ol {
        list-style-type: upper-roman;
    }
    ul {
        list-style-type: square;
    }
    .south {
        list-style-image: 
            url(../images/add.png);
    }
</style>
</head>
<body>
    <ol>
        <li>河北省</li>
        <li>黑龙江</li>
        <li>山东省</li>
    </ol>
    <ul>
        <li>北京</li>
        <li class="south">上海</li>
        <li class="south">广州</li>
        <li class="south">深圳</li>
        <li class="south">杭州</li>
    </ul>
</body>
</html>

demo3.html 

行内元素转成块元素

块元素转换成行内元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    p {
        display: inline;
    }
    span {
        display: block;
    }
    img {
        display: block;
    }
    div {
        display: none;
    }
</style>
</head>
<body>
    <div>
        <p>aaa</p>
        <p>bbb</p>
        <p>ccc</p>
    </div>
    <div>
        <span>111</span>
        <span>222</span>
        <span>333</span>
    </div>
    <div>
        <img src="../images/01.jpg"/>
        <img src="../images/02.jpg"/>
        <img src="../images/03.jpg"/>
    </div>
</body>
</html>

 

posted @ 2017-02-05 14:52  唐胜伟  阅读(590)  评论(0)  编辑  收藏  举报