第十三篇：HTML

时间：2022-09-12 18:14:25

本篇内容

  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开发【第二十三篇】：持续更新中&period;&period;&period;

    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 &vert; 第十三篇：Spring Cloud Gateway服务化和过滤器

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

  10. Egret入门学习日记 --- 第十三篇（书中 5&period;2~5&period;3节 内容）

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

随机推荐

  1. leetcode 165

    才一周没刷leetcode,手就生了,这个题目不难,但是完全AC还是挺费劲的. 题目描述: Compare two version numbers version1 and version2.If v ...

  2. dfs序 &plus; RMQ &equals; LCA

    dfs序是指你用dfs遍历一棵树时,每个节点会按照遍历到的先后顺序得到一个序号.然后你用这些序号,可以把整个遍历过程表示出来. 如上图所示,则整个遍历过程为1 2 3 2 4 5 4 6 4 2 1 ...

  3. WEBrick&sol;Rack Puppet Master

    Puppet's Services: The WEBrick Puppet Master Puppet master is the application that compiles configur ...

  4. wpa&lowbar;supplicant 使用

    (1)通过adb命令行,可以直接打开supplicant,从而运行wpa_cli,可以解决客户没有显示屏而无法操作WIFI的问题,还可以避免UI的问题带到driver.进一步来说,可以用在很多没有键盘 ...

  5. 前端制作篇之meta标签篇

    移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移动端. 附上 ...

  6. Loadrunner 中时间戳函数 web&lowbar;save&lowbar;timestamp&lowbar;param（时间返回数值）

    web_save_timestamp_param("tStamp", LAST); lr_output_message("Moon1:%s",lr_eval_s ...

  7. Bootstrap File Input的简单使用

    安装引入 使用前需要引入其css和js文件, 注意引入路径的问题 <link rel="stylesheet" href="/__PUB__/fileinput/c ...

  8. redux中间件的原理

    前言react已经出来很久了,其生态圈之庞大,一锅炖不下!各种react-xx,已让我们不堪重负,github上随便一个demo,引入的模块至少都是五指之数+.看着头疼,嚼之无味…….在此建议新学者, ...

  9. Codeforces340 E&period; Iahub and Permutations

    Codeforces题号:#340E 出处: Codeforces 主要算法:思维+DP 难度:4.8 题意: 有一个长度为$n$的排列(即各元素互不相同),其中有一些为-1.现要求将数填到这些-1上 ...

  10. hex文件格式

    hex文件格式是可以烧写到单片机中,被单片机执行的一种文件格式,生成Hex文件的方式有很多种,可以通过不同的编译器将C程序或者汇编程序编译生成hex.   Hex文件格式解析 Hex文件如果用特殊的程 ...

相关文章