HTML5的重要内容-1

HTML学习笔记-1

• （一）:first-child和：first-of-type
• • • :first-child第一个元素
    • :first-of-type第一个某种类型元素
• （二）：only-child和:only-of-type
• • • :only-child只有一个孩子才会变
    • :only-of-type一种类型只有一个的时候才会变
    • • 在第一个div中h2有三个h1有一个所以h1会变
      • 在第二个div中h1/h2都是一个
  • 表单的伪类
  • • (一）input:required
    • (三）input:valid
    • (四）input:invalid
  • 类元素
  • • （一）:before和:after
  • 权重
  • 文本-初步-字体
  • • （一）设置字体名称
    • • font-family属性，定义文本的字体
    • （二）设置字体倾斜
    • • font-style属性，最常用于倾斜文本
      • 三个属性值
      • 例子
    • （三）设置字体加粗
    • • font-weight属性，设置粗细
      • 例子
    • （四）设置字体大小
    • • font-size，所有css单位都可以作为值
      • font属性，设置组合字体样式，必须设置字体与大小
      • 字体必须放在最后，因为字体是可以设置多个的
  • html颜色
  • html单位

（一）: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：像素