Unit02: CSS overview, CSS syntax, CSS selectors, CSS declarations-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Unit02: CSS overview, CSS syntax, CSS selectors, CSS declarations

高洛峰

Feb 11, 2017 am 11:49 AM

css

Unit02: CSS overview, CSS syntax, CSS selectors, CSS declaration

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 overview, CSS syntax, CSS selectors, CSS declarations" >
        <img  src="/static/imghwm/default1.png" data-src="../images/02.jpg" class="lazy" alt="Unit02: CSS overview, CSS syntax, CSS selectors, CSS declarations" >
        <img  src="/static/imghwm/default1.png" data-src="../images/03.jpg" class="lazy" alt="Unit02: CSS overview, CSS syntax, CSS selectors, CSS declarations" >
    </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 of floating positioning

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 Photo wall case, demonstration of floating positioning

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 Demonstration of absolute positioning

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 overview, CSS syntax, CSS selectors, CSS declarations" >
        </p><p>苍老师到此一游</p>

demo4.html Demonstration of fixed positioning (back to top)

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 Set image selection to float

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 overview, CSS syntax, CSS selectors, CSS declarations" >
        <img  class="i2 lazy" src="/static/imghwm/default1.png" data-src="../images/2.jpg" alt="Unit02: CSS overview, CSS syntax, CSS selectors, CSS declarations" >
        <img  class="i3 lazy" src="/static/imghwm/default1.png" data-src="../images/3.jpg" alt="Unit02: CSS overview, CSS syntax, CSS selectors, CSS declarations" >
    </p>

demo2.html Set the list sequence style

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

Convert inline elements to block elements

Convert block elements to inline elements

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 overview, CSS syntax, CSS selectors, CSS declarations" >
        <img  src="/static/imghwm/default1.png" data-src="../images/02.jpg" class="lazy" alt="Unit02: CSS overview, CSS syntax, CSS selectors, CSS declarations" >
        <img  src="/static/imghwm/default1.png" data-src="../images/03.jpg" class="lazy" alt="Unit02: CSS overview, CSS syntax, CSS selectors, CSS declarations" >
    </p>

For more Unit02: CSS overview, CSS syntax, CSS selectors, CSS declarations, please pay attention to the PHP Chinese website for related articles !

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

What is CSS flexbox?Apr 30, 2025 pm 03:20 PM

Article discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.

How can we make our website responsive using CSS?Apr 30, 2025 pm 03:19 PM

The article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework

What does the CSS box-sizing property do?Apr 30, 2025 pm 03:18 PM

The article discusses the CSS box-sizing property, which controls how element dimensions are calculated. It explains values like content-box, border-box, and padding-box, and their impact on layout design and form alignment.

How can we animate using CSS?Apr 30, 2025 pm 03:17 PM

Article discusses creating animations using CSS, key properties, and combining with JavaScript. Main issue is browser compatibility.

Can we add 3D transformations to our project using CSS?Apr 30, 2025 pm 03:16 PM

Article discusses using CSS for 3D transformations, key properties, browser compatibility, and performance considerations for web projects.(Character count: 159)

How can we add gradients in CSS?Apr 30, 2025 pm 03:15 PM

The article discusses using CSS gradients (linear, radial, repeating) to enhance website visuals, adding depth, focus, and modern aesthetics.

What are pseudo-elements in CSS?Apr 30, 2025 pm 03:14 PM

Article discusses pseudo-elements in CSS, their use in enhancing HTML styling, and differences from pseudo-classes. Provides practical examples.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

4 weeks agoByDDD

How to fix KB5055523 fails to install in Windows 11?

3 weeks agoByDDD

InZoi: How To Apply To School And University

1 months agoByDDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks agoByDDD

Where to find the Site Office Key in Atomfall

4 weeks agoByDDD

Hot Tools

Zend Studio 13.0.1

Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 English version

Recommended: Win version, supports code prompts!

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Hot Topics

Where is the login entrance for gmail email?

7887

1649

1410

1301

1246