本篇内容

  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. shell编程中的vim命令说明

    vim命令模式:  1.一般命令模式 2.编辑模式 3.底行命令行命令模式 一般命令模式 直接用字符操作编辑模式 可以写文档(跟txt有点像)底行命令模式 先按'ESC',在按下“:”,之后在输出命令 ...

  2. 读取hdfs目录，并在web页面上展示文件里的内容

    最终效果图 目录树实体类: /** * @Author: DaleyZou * @Description: hdfs 目录结构的实体类,用于展示目录树的支撑操作 * @Date: Created in ...

  3. 第34-1题：LeetCode112. Path Sum I

    题目 给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和. 说明: 叶子节点是指没有子节点的节点. 示例:  给定如下二叉树,以及目标和 sum ...

  4. js、jquery初始化加载顺序

    // ready 这个方法只是在页面所有的DOM加载完毕后就会触发 // 方式1 $(function(){ // do something }); // 方式2 $(document).ready( ...

  5. Java基础-方法区以及static的内存分配图

    转载自: https://blog.csdn.net/Wang_1997/article/details/52267688 前面的几篇都没有太明确地指出 方法区 是什么?现在通过一些资料的收集和学习, ...

  6. python 获取项目的根路径

    root_path = os.path.abspath(os.path.dirname(__file__)).split('shippingSchedule')[0] shippingSchedule ...

  7. 微信小程序本地缓存

  8. 005--Django2.0的路由层

    URL配置就像Django所支撑的网站目录,它的本质是每条URL调用的视图函数的映射表,每一个请求执行对应的视图函数. 1.简单的路由配置  from django.contrib import ad ...

  9. pyplot基础图表函数概述

    pyplot饼图的绘制 pyplot直方图的绘制 极坐标图的绘制

  10. IOS多网卡抓包

    linux下libpcap支持从多网卡抓包,设置为any即可 在IOS或者mac上就无法通过次方法抓取所有网卡报文 1.通过设置libevent事件回调,每个网卡注册读事件, fd通过 pd = pc ...