HTML学习笔记-1

（一）:first-child和：first-of-type

:first-child第一个元素

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>选择器</title>

    <style type="text/css">

        p:first-child{

            color: red;

        }

    </style>

</head>

<body>

    <p>sssssssss</p>

    <p>ddddddddd</p>

</body>

</html>

:first-of-type第一个某种类型元素

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>选择器</title>

    <style type="text/css">

        /*.div1 :first-child{

            color: red;

        }*/

        .div1 :first-of-type{

            color: red;

        }

    </style>

</head>

<body>

    <div class="div1">

        <h2>我是班长</h2><!-- 在第一个div中h2中是第一次出现的类型 -->

        <h1>我是班长的朋友</h1><!-- 在第一个div中h1中是第一次出现的类型 -->

        <div class="div1">

            <h1>我是学位</h1><!-- 在第二个div中h1中是第一次出现的类型 -->

            <h2>woshiss</h2><!-- 在第二个div中h2中是第一次出现的类型 -->

        </div>

        <h2>s;a;dlkl;</h2><!-- 在第一个div中h2中是第二次出现的类型 -->

        <h1>dsdpppp</h1><!-- 在第一个div中h1中是第二次出现的类型 -->

    </div>

</body>

</html>

（二）：only-child和:only-of-type

:only-child只有一个孩子才会变

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>选择器</title>

    <style type="text/css">

        .div1 :only-child{

            color: red;

        }

        /*.div1 :first-of-type{

            color: red;

        }*/

    </style>

</head>

<body>

    <!-- div不是有一个孩子，不会变红 -->

    <div class="div1">

        <h2>我是班长</h2>

        <h1>我是班长的朋友</h1>

        <div class="div1">

            <h1>我是学位</h1>

            <h2>woshiss</h2>

        </div>

        <h2>s;a;dlkl;</h2>

        <h1>dsdpppp</h1>

    </div>

</body>

</html>

:only-of-type一种类型只有一个的时候才会变

在第一个div中h2有三个h1有一个所以h1会变

在第二个div中h1/h2都是一个

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>选择器</title>

    <style type="text/css">

        /*.div1 :only-child{

            color: red;

        }*/

        .div1 :only-of-type{

            color: red;

        }

    </style>

</head>

<body>

    <div class="div1">

        <h2>我是班长</h2>

        <h1>我是班长的朋友</h1>

        <div class="div1">

            <h1>我是学位</h1>

            <h2>woshiss</h2>

        </div>

        <h2>s;a;dlkl;</h2>

        <h2>dsdpppp</h2>

    </div>

</body>

</html>

表单的伪类

(一）input:required

input:require{

border:solid 1px red

}

###(二）input:optional###

input:optional{

border:solid 1px red

}

(三）input:valid

input:valid{

background-color：white;

border:solid 1px red;

outline:none;

}

(四）input:invalid

input:valid{

background-color：white;

border:solid 1px green;

outline:none;

}

类元素

（一）:before和:after

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>选择器</title>

    <style type="text/css">

        p{

            font-size: 2em;

        }

        p:before{

    content: "";

    display: inline-block;

    width: 1.5em;

    height: 1.5em;

    border-radius:50%;

    position: relative;

    top: 45px;

    left: 15px;

    background-color: #C39;

        }

        p:after{

    content: "";

    display: inline-block;

    width: 1.5em;

    height: 1.5em;

    border-radius:50%;

    position: relative;

    top: 45px;

    left: 15px;

    background-color: #C39;

        }

    </style>

</head>

<body>

<p>>-<</p>

</body>

</html>

权重

！important  权重：无穷

内联样式（style属性)  权重：1000

id   100

class/属性选择器/伪类  10

标签选择器/伪元素 1

通配符 0

文本-初步-字体

（一）设置字体名称

font-family属性，定义文本的字体

body{font-family:sans-serif;}

h1{font-family:Georgis,serif}

（二）设置字体倾斜

font-style属性，最常用于倾斜文本

三个属性值

  • normal：文本正常显示

  • italic：文本倾斜显示

  • oblique：文本倾斜显示

例子

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>选择器</title>

    <style type="text/css">

        p.normal{

            font-style: normal;

        }

        p.italic{

            font-style: italic;

        }

        p.oblique{

            font-style: oblique;

        }

    </style>

</head>

<body>

    <p class="normal">wewewew</p>

    <p class="italic">wewewew</p>

    <p class="oblique">wewewew</p>

</body>

</html>

（三）设置字体加粗

font-weight属性，设置粗细

  • 使用bold关键字可以设置粗体

  • 关键字100-900为字体指定9级加粗，100最细，900最粗，400相当于normal，700相当于bold

例子

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>选择器</title>

    <style type="text/css">

        p.normal{

            font-weight: bold;

        }

        p.italic{

            font-weight: normal;

        }

        p.oblique{

            font-style: 900;

        }

    </style>

</head>

<body>

    <p class="normal">wewewew</p>

    <p class="italic">wewewew</p>

    <p class="oblique">wewewew</p>

</body>

</html>

（四）设置字体大小

font-size，所有css单位都可以作为值

###（五）组合定义###

font属性，设置组合字体样式，必须设置字体与大小

字体必须放在最后，因为字体是可以设置多个的

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>选择器</title>

    <style type="text/css">

        p{

            font:bold italic 40px Georgia;

        }

    </style>

</head>

<body>

    <p class="normal">wewewew</p>

    <p class="italic">wewewew</p>

    <p class="oblique">wewewew</p>

</body>

</html>

html颜色

p{color:red}

p{color:#ffff}

p{color:rgb(0,0,255)}//红绿蓝

p{color:rgba(0,0,255,0.5)}//红绿蓝，透明度

p{color:transparent;}//完全透明

html单位

%：百分比

in：英寸

cm:厘米

mm：毫米

em：1em等于当前字体尺寸，2em等于当前字体的两倍

ex：一个ex是一个字体的x-height。（x-height通常是字体尺寸的一半)

pt:磅（1pt等于1/72英寸）

PC：12点活字

Px：像素

HTML5的重要内容-1的更多相关文章

  1. 取消chrome浏览器下input和textarea的默认样式；html5默认input内容清除“×”按钮去除办法

    取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...

  2. 将HTML5 Canvas的内容保存为图片借助toDataURL实现

    将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 <html> ...

  3. HTML5+CSS3新增内容总结！！！！！绝对干货

    说到H5C3会不会觉得东西好多啊,今天就整理了一份总结性的内容: CSS3选择器有哪些?答:属性选择器.伪类选择器.伪元素选择器.CSS3新特性有哪些?答:1.颜色:新增RGBA,HSLA模式 文字阴 ...

  4. HTML5的核心内容

    开发者可以放心地使用html5的理由 兼容性.HTML5在老版本的浏览器可以正常运行,同时支持HTML5的新浏览器也能正常运行HTML4,用HTML4创建出来的网站不是必须全部重建的. 实用性.HTM ...

  5. 将HTML5 Canvas的内容保存为图片

    主要思想是借助Canvas自己的API - toDataURL()来实现,整个实现 HTML + JavaScript的代码很简单. 代码如下: <html> <meta http- ...

  6. 学习笔记之html5相关内容

    写一下昨天学习的html5的相关内容,首先谈下初次接触html5的感受.以前总是听说html5是如何的强大,如何的将要改变世界.总是充满了神秘感.首先来谈一下我接触的第一个属性是  input的里面的 ...

  7. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  8. HTML最新标准HTML5小结

    写在前面 HTML5出来已经很久了,然而由于本人不是专业搞前端的,只知道有这个东西,具体概念有点模糊(其实就是一系列标准规范啦):因此去年(2015.11.09),专门对HTML5做了个简单的小结,今 ...

  9. HTML5和CSS3基础教程(第8版）-读书笔记

    第1章 网页的构造块 一个网页主要包括以下三个部分: n        文本内容(text content):在页面上让访问者了解页面内容的纯文字. n        对其他文件的引用(referen ...

  10. 深入理解HTML5：语义、标准与样式（勇猛精进早登大师殿堂创最优品质交互）

    深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著 高京译 ISBN 978-7-121-20552 ...

随机推荐

  1. 即构 SDK 6月迭代：新增拉流画面镜像等功能，为开发者提供更大便利

    即构SDK6月新版本已上线,本月SDK迭代主要新增了拉流画面镜像功能,媒体播放器新增支持缓存相关的设置,新增支持设置对焦模式和曝光模式等功能,多个功能模块的灵活设置,让开发者能更便利的自定义选择,为用 ...

  2. MD文本编辑工具推荐-matktext

    最开始是用vscode编辑markdown文档,左边写右边看效果的实时渲染模式,对于markdown编辑来说是多余的,多是文字类的内容,配以插图,复杂表格和脑图则更少.之后接触到Typora,所打即所 ...

  3. 推荐一款.NET开源的轻量级分布式服务框架

    前言 今天要给大家推荐一款由新生命开发团队开源的.NET轻量级分布式服务框架:星尘分布式平台(NewLife.Stardust). 项目介绍 星尘是一个轻量级分布式服务框架.它的功能包含配置中心.集群 ...

  4. 用字符串表达式执行引擎消除掉if else if

    背景 最近我搞了个微信机器人,@机器人 xxx 这样来发送命令 能拿到的信息有,消息内容,消息发送人,消息所在的群id等 需要根据消息内容或者消息发送群id等不同的条件组合来决定走哪个处理逻辑. 简单 ...

  5. OSS的使用(谷粒商城58-64)

    OSS的使用(谷粒商城58-64) 购买之类的就不在这里详述了,阿里云文档几乎都写了 创建bucket 学习阶段,相对独特的点在于我们需要选择公共读 项目开发阶段,不能选择公共读了,要尽量选择私有(代 ...

  6. 没有显示器可用的电脑找IP

    一台在手边没有显示器可用的电脑找IP记录 问题 老大给我一台服务器(在我前面的工位)让我自己玩,但是不知道IP地址,我本来想用自己的显示器连上,结果两个DHMI口试过都没反应,不知道ip地址就没法连上 ...

  7. Pandas: 获取dataframe中的值，并转换为列表

    解决方案 效果

  8. don't be shy to use reshape

    don't be shy to use reshape

  9. SpringBoot3集成ElasticSearch

    目录 一.简介 二.环境搭建 1.下载安装包 2.服务启动 三.工程搭建 1.工程结构 2.依赖管理 3.配置文件 四.基础用法 1.实体类 2.初始化索引 3.仓储接口 4.查询语法 五.参考源码 ...

  10. STM32中SWD下载不进去的解决方法

    这是我第一次写自己的博客,希望以后写博客可以当做自己的个人习惯并坚持下去,作为技术分享,也欢迎各位大佬前来指正.本人本科学习的机械电子工程,了解机械制图.嵌入式编程.目前刚好学习了PCB制板,正在向着 ...