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. 【JavaScript】你真的熟悉bind吗

    引言 内容速递 看了本文您能了解到的知识! 在本篇文章中,将带你了解什么是bind,bind的用途.如何手写bind以及工作中实际使用bind的场景. 在JavaScript中,bind()方法是用来 ...

  2. ChatGPT在工业领域的研究与应用探索-产品化部署及应用

    <ChatGPT在工业领域的研究与应用探索-数据与工况认知> <ChatGPT在工业领域的研究与应用探索-AI助手实验应用> ChatGPT在工业领域的应用需要解决两个问题:( ...

  3. Java通用返回工具类Result

    通用返回类Result 前言:Java项目搭建时,常常需要去封装一个通用型的Result工具类,下面就是我自己封装的常用的返回类,可以直接使用.(有部分Swagger注解,使用时可忽略) 第一步.创建 ...

  4. 【MAUI Blazor踩坑日记】4.只在特定平台上引用包

    其实这个并不是MAUI特有的问题,只是在MAUI中可能会遇到. 例如某个包只在Windows上有用,但打包的时候,安卓.ios也会把这个包计算在内 所以需要在不是特定平台时把它排除. 万幸从微软文档找 ...

  5. 关于reids免安装的使用与注意事项

    redis是我们现在常用的缓存数据库.可是redis官方网站只提供linux版本,而我们又习惯在windows系统上使用开发工具,这又怎么办呢? 幸好微软官方也提供了windows版本,方便根据实际需 ...

  6. Cesium 概述 (二) 空间数据可视化

    https://blog.csdn.net/happyduoduo1/article/details/51865811/

  7. [golang]使用tail追踪文件变更

    简介 借助 github.com/hpcloud/tail ,可以实时追踪文件变更,达到类似shell命令tail -f的效果. 示例代码 以下示例代码用于实时读取nginx的access.log日志 ...

  8. redis数据持久化之RDB和AOF

    前言 redis虽然是内存缓存程序,但是可以将内存中的数据保存到硬盘上,从而实现数据保存.目前有两种redis数据持久化方式,分别是RDB和AOF. RDB模式 RDB之简介 RDB(redis da ...

  9. WPF-封装自定义雷达图控件

    源码地址:https://gitee.com/LiuShuiRuoBing/code_blog 雷达图用于表示不同内容的占比关系,在项目中有广泛的应用,但是目前未曾有封装良好的雷达图控件,鉴于最近项目 ...

  10. QA|Pycharm:allure : 无法将“allure”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。|Allure

    Pycharm中生成allure测试报告时报错如图: 单独执行allure --version也不行,cmd这样执行也报同样的错 网上查了 说是环境变量问题,加一下cmd可以了,重启pycharm也可 ...