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：像素
原创文章 18
获赞 5
访问量 950