本篇内容

  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中有些属性的前面会加上“*”或“_”，请问分别表示什么意思？

    给不同的浏览器识别 例如: color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-color: #FF0000\9; /*IE6. ...

  2. 使用ansible安装配置zabbix客户端

    ansible角色简介: 目录名 说明 defaults 默认变量存放目录 handlers 处理程序(当发生改变时需要执行的操作) meta 角色依赖关系处理 tasks 具体执行的任务操作定义 t ...

  3. Windows Subsystem for Linux(WSL)安装记录

    什么是WSL Windows Subsystem for Linux(简称WSL)是一个为在Windows 10上能够原生运行Linux二进制可执行文件(ELF格式)的兼容层.它是由微软与Canoni ...

  4. python代码实现截图识字

    有次网上down了个截图实识的软件,发现一天只能用10次要钱才能解锁免费,很气,作为一个菜鸡怎么能忍受 于是自己用python写了个简单的小工具,分享给大家 代码如下: 先安装库 from PIL i ...

  5. java 基础面试

    1. &和&&的区别 答: &是位运算符,表示按位与运算,&&是逻辑运算符,表示逻辑与(and) 2.int 和 Integer 有什么区别 答: Ja ...

  6. nginx配置安装

    先安装pcrepcre作用是让Nginx支持Rewrite功能下载地址:https://sourceforge.net/projects/pcre/files/pcre/,选择最新版本进行下载下载之后 ...

  7. html5中的progress兼容ie，制作进度条样式

    html5新增的progress标签用处很大,它可以制作进度条,不用像以前那样用css来制作进度条! 一.progress使用方法 progress标签很好使用,他有两个属性,value和max,va ...

  8. Linux编译移植Qt4的环境_在OMAPL138平台

    Linux编译Qt4的环境_OMAPL138 手里有一块创龙OMAPL138的板子,我要在上面成功移植Qt环境和触摸屏幕,这是我第二次进行Linux的Qt环境移植,发现了很多问题,需要重新整理. 我编 ...

  9. python 初学函数

    #len # s = '金老板小护士' # len(s) # def my_len(): #自定义函数 # i = 0 # for k in s: # i += 1 # print(i) # # le ...

  10. P1282

    题目描述 多米诺骨牌有上下2个方块组成,每个方块中有1~6个点.现有排成行的 上方块中点数之和记为S1,下方块中点数之和记为S2,它们的差为|S1-S2|.例如在图8-1中,S1=6+1+1+1=9, ...