本篇内容

  1. 选择器
  2. 属性

一、 选择器

1.id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    #red{

        color:red;

    }

    #green{

        color:green;

    }

</style>

<body>

    <p id="red">这个段落是红色。</p>

    <p id="green">这个段落是绿色。</p>

</body>

</html>

2.类选择器

在 CSS 中，类选择器以一个点号显示。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    .center{

        text-align: center

    }

</style>

<body>

    <h1 class="center">

        This heading will be center-aligned

    </h1>

    <p class="center">

        This paragraph will also be center-aligned.

    </p>

</body>

</html>

3.派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    li strong{

        font-style: italic;

        font-weight: normal;

    }

</style>

<body>

    <p>

        <strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong>

    </p>

    <ol>

        <li>

            <strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong>

        </li>

        <li>我是正常的字体。</li>

    </ol>

</body>

</html>

4.伪类

CSS 伪类用于向某些选择器添加特殊的效果。

（1）link

向未被访问的链接添加样式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    a:link{

        color: #FF0000

    }

</style>

<body>

    <a href="http://www.baidu.com">百度一下</a>

</body>

</html>

（2）visited

向已被访问的链接添加样式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    a:visited{

        color: #00FF00

    }

</style>

<body>

    <a href="http://www.baidu.com">百度一下</a>

</body>

</html>

（3）hover

当鼠标悬浮在元素上方时，向元素添加样式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    a:hover{

        color: #FF00FF

    }

</style>

<body>

    <a href="http://www.baidu.com">百度一下</a>

</body>

</html>

（4）active

向被激活的元素添加样式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    a:active{

        color: #0000FF

    }

</style>

<body>

    <a href="http://www.baidu.com">百度一下</a>

</body>

</html>

二、 属性

1.position

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    .right{

    position:absolute;

    right:0px;

    width:300px;

    background-color:#b0e0e6;

    }

</style>

<body>

    <div class="right">

        <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>

        <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>

    </div>

</body>

</html>

（2）display

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    p{

        display: inline

    }

    div{

        display: none

    }

</style>

<body>

    <p>把段落元素设置为内联元素</p>

    <p>而 div 元素不会显示出来</p>

    <div>

        div 元素的内容不会显示出来

    </div>

</body>

</html>

第十三篇：HTML的更多相关文章

  1. 解剖SQLSERVER 第十三篇 Integers在行压缩和页压缩里的存储格式揭秘（译）

    解剖SQLSERVER 第十三篇    Integers在行压缩和页压缩里的存储格式揭秘(译) http://improve.dk/the-anatomy-of-row-amp-page-compre ...

  2. 第十三篇 Integration Services：SSIS变量

    本篇文章是Integration Services系列的第十三篇,详细内容请参考原文. 简介在前一篇我们结合了之前所学的冒泡.日志记录.父子模式创建一个自定义的SSIS包日志记录模式.在这一篇,我们将 ...

  3. Python之路【第十三篇】：jQuery -暂无内容-待更新

    Python之路[第十三篇]:jQuery -暂无内容-待更新

  4. Python开发【第二十三篇】：持续更新中...

    Python开发[第二十三篇]:持续更新中...

  5. Python开发【第十三篇】：jQuery（二）

    http://www.bubuko.com/infodetail-1438296.html 处理完毕需要整理贴进来 Python之路[第十三篇]jQuery案例-Form表单&插件及扩展   ...

  6. Python开发【第十三篇】：jQuery--无内容点击-不进去（一）

    Python开发[第十三篇]:jQuery--无内容点击-不进去(一)

  7. 十三篇系列：king转折点，wooga瓶颈，supercell营收结构

    转自:http://gamerboom.com/archives/95125 十三篇系列:king的历史转折点,wooga的瓶颈,supercell的营收结构 第一篇 这句话In other word ...

  8. 【译】第十三篇 Integration Services：SSIS变量

    本篇文章是Integration Services系列的第十三篇,详细内容请参考原文. 简介在前一篇我们结合了之前所学的冒泡.日志记录.父子模式创建一个自定义的SSIS包日志记录模式.在这一篇,我们将 ...

  9. 跟我学SpringCloud | 第十三篇：Spring Cloud Gateway服务化和过滤器

    SpringCloud系列教程 | 第十三篇:Spring Cloud Gateway服务化和过滤器 Springboot: 2.1.6.RELEASE SpringCloud: Greenwich. ...

  10. Egret入门学习日记 --- 第十三篇（书中 5.2~5.3节 内容）

    第十三篇(书中 5.2~5.3节 内容) 写日记已经十天多了,我发现越到后面,我书写的方式越来越程序化. 感觉渐渐失去了人类所谓的感情似的. 不过,没想到的是,书中的内容,很少出现了错误,我一路过来到 ...

随机推荐

  1. ajax模仿form上传图片

    <form id="iconForm"> <input class="js_upFile cover1" type="file&qu ...

  2. java后台导出pdf

    新页面打开wpf @RequestMapping("/showPdf") public String getpic( HttpServletRequest request, Htt ...

  3. mysql指定id默认第一

    有个需求 家庭创建人要默认排第一,刚开始用加入家庭的时间排序可以  好简单, 后来加了一个需求 家庭创建人可以转移,结果按时间排序就不行了,又不想去写循环重新排序 就各种百度, 等于就是指定ID排最后 ...

  4. 深入理解java虚拟机学习笔记（一）JVM内存模型

    上周末搬家后,家里的宽带一直没弄好,跟电信客服反映了N遍了终于约了个师傅明天早上来迁移宽带,可以结束一个多星期没网的痛苦日子了.这段时间也是各种忙,都一个星期没更新博客了,再不写之前那种状态和激情都要 ...

  5. js函数的默认参数

    function f(flag, start, end, msg){ flag = flag == false ? flag : true; start = start || null; start ...

  6. 内置函数系列之 filter

    filter 过滤 基本语法: s = filter(function,iterable) 将可迭代对象的每一个元素,传进函数中,根据函数中的判断条件,返回True或False 返回True的是保留的 ...

  7. 【转载】VS2015 + EF6连接MYSQL5.6

    引用文章:https://jingyan.baidu.com/article/ce09321b9cc43f2bff858fbf.html 安装包注意点说明: 1.程序名称:mysql-for-visu ...

  8. 腾讯首页分辨手机端与pc端代码

    腾讯首页分辨手机端与pc端代码 自己在做网页的时候在腾讯网首页借鉴的代码. 代码: <!-- 移动适配JS脚本 --> <script type="text/javascr ...

  9. Gson转Map时，Int会变成double解决方法

    package com.cdy.demo; import java.lang.reflect.Type; import java.util.HashMap; import java.util.Map; ...

  10. C语言进阶——注释符号12

    注释可能大认为非常简单,但是注释其实在C语言中很关键,来看下面一段对话. ---学生: 老师,我觉得注释没有必要深究,因为很简单,对程序功能也没有影响. ---老师: 注释是C语言最重要的工具,我们先 ...