社区
学习
工具库
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工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
3 周前 By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前 By DDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前 By DDD
节省R.E.P.O.解释（并保存文件）
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制
4 周前 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)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7569
15
CakePHP 教程
1386
52
steam的账户名称是什么格式
87
11
win11激活密钥永久
61
19
NYT连接提示和答案
28
107
显示更多
Related knowledge
vue中怎么用bootstrap vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

HTML，CSS和JavaScript的角色：核心职责 HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

bootstrap怎么写分割线 bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用 标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

了解HTML，CSS和JavaScript：初学者指南 了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎么调整大小 bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

bootstrap按钮怎么用 bootstrap按钮怎么用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

bootstrap怎么设置框架 bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

bootstrap怎么插入图片 bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

See all articles