Unit02: CSS-Übersicht, CSS-Syntax, CSS-Selektoren, CSS-Deklarationen-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Unit02: CSS-Übersicht, CSS-Syntax, CSS-Selektoren, CSS-Deklarationen

高洛峰

Feb 11, 2017 am 11:49 AM

css

Unit02: CSS-Übersicht, CSS-Syntax, CSS-Selektoren, CSS-Deklaration

my.css

p {
    color: yellow;
}

demo1.html

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

demo2.html

nbsp;html><meta><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>
    <h1 id="苍老师">苍老师</h1>
    <h2 id="范传奇">范传奇</h2>

demo3.html

nbsp;html><meta><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>
    <p>苍老师呀苍老师</p>
    <p>范传奇呀范传奇</p>
    <p>王克晶呀王克晶</p>
    <p>瞧你们那点破事</p>
    <p>北京市<u>海淀区<b>北三环</b>西路</u>甲18号<b>中鼎大厦</b>B座8层</p>
    <p>
        <a>达内</a>
        <a>随便</a>
    </p>
    <p><input></p>
    <p><input></p>
    <p>
        <img  src="/static/imghwm/default1.png" data-src="../images/01.jpg" class="lazy" alt="Unit02: CSS-Übersicht, CSS-Syntax, CSS-Selektoren, CSS-Deklarationen" >
        <img  src="/static/imghwm/default1.png" data-src="../images/02.jpg" class="lazy" alt="Unit02: CSS-Übersicht, CSS-Syntax, CSS-Selektoren, CSS-Deklarationen" >
        <img  src="/static/imghwm/default1.png" data-src="../images/03.jpg" class="lazy" alt="Unit02: CSS-Übersicht, CSS-Syntax, CSS-Selektoren, CSS-Deklarationen" >
    </p>

demo4.html

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

demo1.html

nbsp;html><meta><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>
    <p>d0</p>
    <p>d1</p>
    <p>d2</p>
    <p>d3</p>
    <p>d4</p>
    <p>d5</p>

demo2.html

nbsp;html><meta><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>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

demo3.html

nbsp;html><meta><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>
    <h1 id="范传奇">范传奇</h1>
    <p>
        华灯轻抚蚕丝被,
        锦墙呢喃诉床帏.
        情郎翘首索芳心,
        佳人回眸送秋水.
        丹心不畏相思苦,
        浓情何惧岁月催.
        万水千山终有路,
        几度良宵几轮回.    </p>

demo1.html Demonstration der schwebenden Positionierung

nbsp;html><meta><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>
    <p>
        </p><p></p>
        <p></p>
        <p></p>
        <!-- 仅仅是用来消除浮动影响的 -->
        <p></p>
    
    <p>浮动时看看我的位置</p>

demo2.html Fotowandgehäuse, Demonstration Gleitende Positionierung

nbsp;html><meta><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>

啊,Teacher苍!
你在何方?
难道是去了东洋?
那边的痴汉很多很多,
你一定要穿好衣裳,
别走光!

demo3.html Demo absolute Positionierung

nbsp;html><meta><title>Insert title here</title><style>
    p {
        border: 1px solid red;
        width: 318px;
        /*只声明定位,不设置偏移量,
          其位置不动,不受任何影响.
          这样做仅仅是为了将该元素
          作为绝对定位的目标而已.*/
        position: relative;
    }
    p {
        position: absolute;
        bottom: 50px;
        width: 318px;
        background-color: #FFF;
        text-align: center;
    }
    p {
        height: 318px;
    }</style>
    <p>
        <img  src="/static/imghwm/default1.png" data-src="../images/3.jpg" class="lazy" alt="Unit02: CSS-Übersicht, CSS-Syntax, CSS-Selektoren, CSS-Deklarationen" >
        </p><p>苍老师到此一游</p>

demo4.html Feste Positionierung demonstrieren (zurück nach oben)

nbsp;html><meta><title>Insert title here</title><style>
    p {
        border: 1px solid #ccc;
        width: 40px;
        line-height: 30px;
        position: fixed;
        right: 10px;
        bottom: 30px;
        text-align: center;
    }</style>
    <h1 id="iPhone-Plus">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>
    <p>
        <a>顶部</a>
    </p>

go_to_top.html

demo1.html Stellen Sie die Bildauswahl auf schwebend ein

nbsp;html><meta><title>Insert title here</title><style>
    p {
        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>
    <p>
        <img  class="i1 lazy" src="/static/imghwm/default1.png" data-src="../images/1.jpg" alt="Unit02: CSS-Übersicht, CSS-Syntax, CSS-Selektoren, CSS-Deklarationen" >
        <img  class="i2 lazy" src="/static/imghwm/default1.png" data-src="../images/2.jpg" alt="Unit02: CSS-Übersicht, CSS-Syntax, CSS-Selektoren, CSS-Deklarationen" >
        <img  class="i3 lazy" src="/static/imghwm/default1.png" data-src="../images/3.jpg" alt="Unit02: CSS-Übersicht, CSS-Syntax, CSS-Selektoren, CSS-Deklarationen" >
    </p>

demo2.html Legen Sie den Listensequenzstil fest

nbsp;html><meta><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>
    <ol>
        <li>河北省</li>
        <li>黑龙江</li>
        <li>山东省</li>
    </ol>

北京
上海
广州
深圳
杭州

demo3.html

Inline-Elemente in Blockelemente umwandeln

Blockelemente in Inline-Elemente umwandeln

nbsp;html><meta><title>Insert title here</title><style>
    p {
        display: inline;
    }
    span {
        display: block;
    }
    img {
        display: block;
    }
    p {
        display: none;
    }</style>
    <p>
        </p><p>aaa</p>
        <p>bbb</p>
        <p>ccc</p>
    
    <p>
        <span>111</span>
        <span>222</span>
        <span>333</span>
    </p>
    <p>
        <img  src="/static/imghwm/default1.png" data-src="../images/01.jpg" class="lazy" alt="Unit02: CSS-Übersicht, CSS-Syntax, CSS-Selektoren, CSS-Deklarationen" >
        <img  src="/static/imghwm/default1.png" data-src="../images/02.jpg" class="lazy" alt="Unit02: CSS-Übersicht, CSS-Syntax, CSS-Selektoren, CSS-Deklarationen" >
        <img  src="/static/imghwm/default1.png" data-src="../images/03.jpg" class="lazy" alt="Unit02: CSS-Übersicht, CSS-Syntax, CSS-Selektoren, CSS-Deklarationen" >
    </p>

Weitere Artikel zu Unit02: CSS-Übersicht, CSS-Syntax, CSS-Selektor, CSS-Deklaration finden Sie auf der chinesischen PHP-Website!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Nächstes Level CSS -Styling für CursorApr 23, 2025 am 11:04 AM

Benutzerdefinierte Cursoren mit CSS sind großartig, aber wir können die Dinge mit JavaScript auf die nächste Stufe bringen. Mit JavaScript können wir zwischen Cursorzuständen wechseln, dynamischen Text in den Cursor platzieren, komplexe Animationen anwenden und Filter anwenden.

Worlds Collide: Keyframe -Kollisionserkennung mit Style -AbfragenApr 23, 2025 am 10:42 AM

Interaktive CSS -Animationen mit Elementen, die sich gegenseitig abprallen, scheinen im Jahr 2025 plausibler zu sein. Obwohl es unnötig ist, eine Pong in CSS zu implementieren

Verwendung von CSS-Hintergrund-Filter für UI-EffekteApr 23, 2025 am 10:20 AM

Tipps und Tricks zur Verwendung der CSS Backdrop-Filter-Eigenschaft, um Benutzeroberflächen zu stylen. Sie lernen, wie Sie Hintergrundfilter zwischen mehreren Elementen schichten, und integrieren sie in andere grafische CSS -Effekte, um aufwändige Designs zu erstellen.

Lächeln?Apr 23, 2025 am 09:57 AM

Nun, es stellt sich heraus, dass die integrierten Animationsfunktionen von SVG nie wie geplant veraltet waren. Sicher, CSS und JavaScript sind mehr als in der Lage, die Ladung zu tragen, aber es ist gut zu wissen, dass Smil nicht wie zuvor im Wasser tot ist

'Hübsch' ist im Auge des BetrachtersApr 23, 2025 am 09:40 AM

Yay, let ' S sprung für Textschreiber: Pretty Landing in Safari Technology Preview! Aber achten Sie darauf, dass es sich von der Art und Weise unterscheidet, wie es in Chrombrowsern funktioniert.

CSS-Tricks Chronicles xliiiApr 23, 2025 am 09:35 AM

Dieses CSS-Tricks-Update zeigt erhebliche Fortschritte im Almanac, den neuesten Podcast-Auftritten, einem neuen CSS-Leitfaden und der Hinzufügung mehrerer neuer Autoren, die wertvolle Inhalte beitragen.

Die @Apply -Funktion von Rückenwind ist besser als es klingtApr 23, 2025 am 09:23 AM

Meistens präsentieren die Leute die @Apply-Funktion mit einer der einzelnen Properschafts-Dienstprogramme von Rückenwind (die eine einzelne CSS-Deklaration ändert). Wenn @Apply auf diese Weise präsentiert wird, klingt er überhaupt nicht vielversprechend. Also obvio

Ich habe das Gefühl, dass ich keine Veröffentlichung habe: eine Reise in Richtung vernünftiger BereitstellungenApr 23, 2025 am 09:19 AM

Das Bereitstellen wie ein Idiot hängt von einer Missverhältnis zwischen den Tools, mit denen Sie zur Bereitstellung verwendet werden, und der Belohnung in der Komplexität im Vergleich zu Komplexität hinzu.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

4 Wochen vorByDDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

3 Wochen vorByDDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

4 Wochen vorByDDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

1 Monate vorByDDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

1 Monate vorByDDD

Heiße Werkzeuge

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.