本篇内容

  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. CSS 滤镜技巧与细节

    本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 注意:ie不兼容 本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,话不多说,直接开车,语法如下: { ...

  2. floyed dij spfa 模板

    /* SPFA模板 */ const int inf=0x3f3f3f3f; inline int SPFA(int s){ memset(dis,inf,sizeof(dis)); queue< ...

  3. 爬虫学习（十三）——xpath基础学习

    lxml的作用 lxml是HTML.xml的解析器,主要的功能是如何解析和提取HTML和xml数据 lxml和正则一样,也是使用C来实现的,是一款高性能的python HTML/xml解析器,我们可以 ...

  4. 7-4 python 接口开发（提供mock服务）

    1.登录接口开发(数据存在数据库中)  接口开发做mock(模拟功能) tools.py import pymysql def my_db(sql): conn = pymysql.connect(h ...

  5. JAVA / MySql 编程——第八章 DAO 模式

    1.        数据持久化:将程序中的数据在瞬时状态和持久状态间转换的机制即为数据持久化: 2.        持久化的实现方式:数据库.普通文件.XML文件: 3.        JDBC封装: ...

  6. 深入理解PHP7之zval

    PHP7已经发布, 如承诺, 我也要开始这个系列的文章的编写, 今天我想先和大家聊聊zval的变化. 在讲zval变化的之前我们先来看看zval在PHP5下面是什么样子 PHP5zval回顾在PHP5 ...

  7. Qt的QWebChannel和JS、HTML通信/交互驱动百度地图

    Qt的QWebChannel和JS.HTML通信/交互驱动百度地图 0 前言 我一个研究嵌入式的,不知道怎么就迷上了上位机,接了几个项目都是关于Qt,这个项目还是比较经典的,自己没事儿的时候也进行研究 ...

  8. awk命令例子详解

    awk -F: '{print "Number of dields: "NF}' passwd 字段分隔符设为冒号,所以每条记录的字段数变成7: awk  '{print &quo ...

  9. aspx页面 按钮不响应回车键

    aspx页面在IE浏览器中,页面上的按钮默认都响应回车键,但有的时候我们的文本框可能需要响应回车键,这时我们就不想让按钮再响应回车键,这时我们只需要设置按钮的属性即可. 按钮分为两种,一种是<b ...

  10. RHCE考试

    RHCSA_PDF版传送门:https://files.cnblogs.com/files/zhangjianghua/RHCSA%E8%AF%95%E9%A2%98.pdf RHCE_PDF版传送门 ...