Unit02： CSS 概述、 CSS 語法、 CSS 選擇器、 CSS聲明-css教學-PHP中文網

　　　　Unit02： CSS 概述、 CSS 語法、 CSS 選擇器、 CSS聲明

首頁

web前端

css教學

Unit02： CSS 概述、 CSS 語法、 CSS 選擇器、 CSS聲明

高洛峰

Feb 11, 2017 am 11:49 AM

css

　　　　Unit02： CSS 概述、 CSS 語法、 CSS 選擇器、 CSS聲明

my.css

2.html

p {
    color: yellow;
}

登入後複製

demo3.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>

登入後複製

demo4.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>

登入後複製

demo1.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>

登入後複製

rrrereee

demo1.html

demo3.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>
    p {
        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>
    <p id="d0">d0</p>
    <p id="d1">d1</p>
    <p id="d2">d2</p>
    <p id="d3">d3</p>
    <p id="d4">d4</p>
    <p id="d5">d5</p></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;
    }
    p {
        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>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="enemy"></p>
    <p class="hero"></p>
    <p class="hero"></p></body></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>

登入後複製

go_to_top.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>
    <p class="d0">
        <p class="d1"></p>
        <p class="d2"></p>
        <p class="d3"></p>
        <!-- 仅仅是用来消除浮动影响的 -->
        <p class="d4"></p>
    </p>
    <p>浮动时看看我的位置</p></body></html>

登入後複製

demo3.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>

登入後複製

更多Unit02： CSS 概述、 CSS 語法、 CSS 選擇器、中文陳述 CSS相關文章請追蹤PHP網！