社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
　　　　Unit02：  CSS 概述 、   CSS 语法 、   CSS 选择器 、   CSS声明　　　　
首页 web前端 css教程 Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

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

高洛峰
高洛峰
Feb 11, 2017 am 11:49 AM
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>
    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>

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>
    <p class="d0">
        <p class="d1"></p>
        <p class="d2"></p>
        <p class="d3"></p>
        <!-- 仅仅是用来消除浮动影响的 -->
        <p class="d4"></p>
    </p>
    <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>
    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></head><body>
    <p>
        <img src="../images/3.jpg"/>
        <p>苍老师到此一游</p>
    </p></body></html>

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

<!DOCTYPE html><html><head><meta charset="UTF-8"><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></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>
    <p>
        <a href="#">顶部</a>
    </p></body></html>

go_to_top.html

 demo1.html  设置图片选中悬浮

<!DOCTYPE html><html><head><meta charset="UTF-8"><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></head><body>
    <p>
        <img src="../images/1.jpg" class="i1"/>
        <img src="../images/2.jpg" class="i2"/>
        <img src="../images/3.jpg" class="i3"/>
    </p></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;
    }
    p {
        display: none;
    }</style></head><body>
    <p>
        <p>aaa</p>
        <p>bbb</p>
        <p>ccc</p>
    </p>
    <p>
        <span>111</span>
        <span>222</span>
        <span>333</span>
    </p>
    <p>
        <img src="../images/01.jpg"/>
        <img src="../images/02.jpg"/>
        <img src="../images/03.jpg"/>
    </p></body></html>

 更多Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明相关文章请关注PHP中文网！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

Agnes Tachyon Build Guide |漂亮的德比志
1 个月前 By Jack chen
Grass Wonder Build Guide |乌玛妈妈漂亮的德比
3 周前 By Jack chen
<🎜>：在森林里99夜 - 所有徽章以及如何解锁
3 周前 By DDD
乌玛的粉丝漂亮的德比横幅日程（2025年7月）
3 周前 By Jack chen
NYT'连接”提示7月2日，星期三：今天游戏的线索和答案
1 个月前 By DDD
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Laravel 教程
1597
29
PHP教程
1487
72
NYT迷你填字游戏答案
268
587
NYT连接提示和答案
129
836
显示更多
Related knowledge
如何用PHP搭建社交分享功能 PHP分享接口集成实战 如何用PHP搭建社交分享功能 PHP分享接口集成实战 Jul 25, 2025 pm 08:51 PM

在PHP中搭建社交分享功能的核心方法是通过动态生成符合各平台要求的分享链接。1.首先获取当前页面或指定的URL及文章信息；2.使用urlencode对参数进行编码；3.根据各平台协议拼接生成分享链接；4.在前端展示链接供用户点击分享；5.动态生成页面OG标签优化分享内容展示；6.务必对用户输入进行转义以防止XSS攻击。该方法无需复杂认证，维护成本低，适用于大多数内容分享需求。

PHP打造博客评论系统变现 PHP评论审核与防刷策略 PHP打造博客评论系统变现 PHP评论审核与防刷策略 Jul 25, 2025 pm 08:27 PM

1.评论系统商业价值最大化需结合原生广告精准投放、用户付费增值服务（如上传图片、评论置顶）、基于评论质量的影响力激励机制及合规匿名数据洞察变现；2.审核策略应采用前置审核 动态关键词过滤 用户举报机制组合，辅以评论质量评分实现内容分级曝光；3.防刷需构建多层防御：reCAPTCHAv3无感验证、Honeypot蜜罐字段识别机器人、IP与时间戳频率限制阻止灌水、内容模式识别标记可疑评论，持续迭代应对攻击。

如何用Mac搭建PHP Nginx环境 MacOS配置Nginx与PHP服务组合 如何用Mac搭建PHP Nginx环境 MacOS配置Nginx与PHP服务组合 Jul 25, 2025 pm 08:24 PM

Homebrew在Mac环境搭建中的核心作用是简化软件安装与管理。1.Homebrew自动处理依赖关系，将复杂的编译安装流程封装为简单命令；2.提供统一的软件包生态，确保软件安装位置与配置标准化；3.集成服务管理功能，通过brewservices可便捷启动、停止服务；4.便于软件升级与维护，提升系统安全性与功能性。

什么是常见的CSS浏览器不一致？ 什么是常见的CSS浏览器不一致？ Jul 26, 2025 am 07:04 AM

不同浏览器对CSS解析存在差异，导致显示效果不一致，主要包括默认样式差异、盒模型计算方式、Flexbox和Grid布局支持程度及某些CSS属性行为不一致。1.默认样式处理不一致，解决方法是使用CSSReset或Normalize.css统一初始样式；2.旧版IE的盒模型计算方式不同，建议统一使用box-sizing:border-box；3.Flexbox和Grid在边缘情况或旧版本中表现有差异，应多测试并使用Autoprefixer；4.某些CSS属性行为不一致，需查阅CanIuse并提供降级

如何将SCSS编译到CSS？ 如何将SCSS编译到CSS？ Jul 27, 2025 am 01:58 AM

installdartsassvianpmafterinstallingnode.jsusingnpminstall-gsass.2.compilescsstocssssusingthecommandSassInput.scsssoutput.css.3。 useass - watchinput.scssoutput.csstoauto-compileonsave.4.watchentirefolderswithsass-watchscss：css.5.usepartialswith_prefixfo

描述'垂直align”属性及其典型用例 描述'垂直align”属性及其典型用例 Jul 26, 2025 am 07:35 AM

1.ItAdjustSelementsLikeImagesRikeImagesOrformInputswithIntExtLineSustLineSlineSlineSlineSlikeLikeLikeBaseline，中间，Super，Super，Super和Sub.2.intablebecells，ItControlScontentalStalteNtalmscontentalMedwithThtop，Middle，Middle，Midder，Midder，经常

什么是口音色的物业？ 什么是口音色的物业？ Jul 26, 2025 am 09:25 AM

accent-color是CSS中用于自定义复选框、单选按钮和滑块等表单元素高亮颜色的属性；1.它直接改变表单控件选中状态的默认颜色，如将复选框的蓝色勾选标记改为红色；2.支持的元素包括type="checkbox"、type="radio"和type="range"的输入框；3.使用accent-color可避免复杂的自定义样式和额外DOM结构，保持原生可访问性；4.现代浏览器普遍支持，旧浏览器需降级处理；5.设置accent-col

CSS过渡教程 CSS过渡教程 Jul 26, 2025 am 09:30 AM

csStransitionSenablesMoothPropertyChangesWithMinimalCode，ifealforHoverForpectSandInteractiveFeedback.1.usethesyntaxtransition：propertyDurationTimingTiming-functionDelayDelay; TodefineTrysitions; TodefinEtrys;

See all articles