HTML5的重要内容-1
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的更多相关文章
- 取消chrome浏览器下input和textarea的默认样式；html5默认input内容清除“×”按钮去除办法
取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...
- 将HTML5 Canvas的内容保存为图片借助toDataURL实现
将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 <html> ...
- HTML5+CSS3新增内容总结！！！！！绝对干货
说到H5C3会不会觉得东西好多啊,今天就整理了一份总结性的内容: CSS3选择器有哪些?答:属性选择器.伪类选择器.伪元素选择器.CSS3新特性有哪些?答:1.颜色:新增RGBA,HSLA模式 文字阴 ...
- HTML5的核心内容
开发者可以放心地使用html5的理由 兼容性.HTML5在老版本的浏览器可以正常运行,同时支持HTML5的新浏览器也能正常运行HTML4,用HTML4创建出来的网站不是必须全部重建的. 实用性.HTM ...
- 将HTML5 Canvas的内容保存为图片
主要思想是借助Canvas自己的API - toDataURL()来实现,整个实现 HTML + JavaScript的代码很简单. 代码如下: <html> <meta http- ...
- 学习笔记之html5相关内容
写一下昨天学习的html5的相关内容,首先谈下初次接触html5的感受.以前总是听说html5是如何的强大,如何的将要改变世界.总是充满了神秘感.首先来谈一下我接触的第一个属性是 input的里面的 ...
- HTML5 介绍
本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...
- HTML最新标准HTML5小结
写在前面 HTML5出来已经很久了,然而由于本人不是专业搞前端的,只知道有这个东西,具体概念有点模糊(其实就是一系列标准规范啦):因此去年(2015.11.09),专门对HTML5做了个简单的小结,今 ...
- HTML5和CSS3基础教程(第8版）-读书笔记
第1章 网页的构造块 一个网页主要包括以下三个部分: n 文本内容(text content):在页面上让访问者了解页面内容的纯文字. n 对其他文件的引用(referen ...
- 深入理解HTML5：语义、标准与样式（勇猛精进早登大师殿堂创最优品质交互）
深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著 高京译 ISBN 978-7-121-20552 ...
随机推荐
- jdbc-plus是一款基于JdbcTemplate增强工具包，基于JdbcTemplate已实现分页、多租户、动态表名等插件，可与mybatis、mybatis-plus等混合使用
jdbc-plus简介 jdbc-plus是一款基于JdbcTemplate增强工具包,基于JdbcTemplate已实现分页.多租户.动态表名等插件,可与mybatis.mybatis-plus等混 ...
- python 打包模块:nuitka
该模块可以将python编译成C++级的可执行文件,是解决python图形化界面启动慢的神器. 1.环境配置 配置c/c++编译器:MinGW64 ,最低使用8.1版本,该资源自行下载. 百度网盘链接 ...
- Java程序员的MacBookPro(14寸M1)配置备忘录
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 欣宸的月俸虽然很低,但还是咬着牙攒够银子,入 ...
- Go 如何正确关闭通道
序言 Go 在通道这一块,没有内置函数判断通道是否已经关闭,也没有可以直接获取当前通道数量的方法.所以对于通道,Go 显示的不是那么优雅.另外,如果对通道进行了错误的使用,将会直接引发系统 panic ...
- 京东获得JD商品详情 API 返回值说明
item_get-获得JD商品详情 API测试 onebound.jd.item_get 公共参数 名称 类型 必须 描述 key String 是 调用key(必须以GET方式拼接在URL中) ...
- Xshell7 / Xftp7 永久免费，官网直连下载地址
主要目的是让大家随时随地从官网下载Xshell和Xftp免费版(个人/家庭/学校免费) 最新变动:官方目前仅提供最新版以及上一个版本的软件下载!其他版本不提供下载 免费版5版本(最后一个版本,无任何限 ...
- java中有哪些并发的List?只知道一种的就太逊了
java中有很多list,但是原生支持并发的并不多,我们在多线程的环境中如果想同时操作同一个list的时候,就涉及到了一个并发的过程,这时候我们就需要选择自带有并发属性的list,那么java中的并发 ...
- IDEA 22.2.3 创建web项目及Tomcat部署与服务器初始界面修改（保姆版)
开始前请确认自己的Tomcat.JDK已经安装配置完毕 不同版本的IDEA创建配置流程可能不同,演示中的IDEA版本号为22.2.3 本教程创作时间为2023/09/14 1.创建项目 通过下图路径进 ...
- 万字长文深度解读Java线程池，硬核源码分析
前言 本文将深入分析Java线程池的源码,包括线程池的创建.任务提交.工作线程的执行和线程池的关闭等过程.通过对线程池源码的解析,我们能够更好地理解线程池的原理和机制,为我们在实际开发中合理使用线程池 ...
- Vue-入门vue，及第一个vue程序
一.初始Vue 什么是vue Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架.它基于标准 HTML.CSS 和 JavaScript 构建,并提 ...