HTML之文本样式、伪类选择器、高级选择器等

补充：block

默认宽高：

　　1.没有设置宽，宽自适应父级的宽（子级的border+padding+width=父级的width）

　　2.没有设置高，高由内容撑开

设置了宽高一定采用设置的宽高

显示宽高：border+padding+content

自身布局：margin-top |  margin-left

兄弟布局：margin-bottom  |  margin-right

父级水平居中：margin：0 auto;

与inline相关的盒子：vertical-aline

一：字体设置

text-aline：center;水平居中的方式
color：red;字体颜色
font:900 30px/120px "STSong"；字重 大小/行高  字族

了解：
em(自身->父->HTML) rem(HTML)
text-indent：2em

字划线
underline | line-through | overline
text-decoration：overline;
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文本操作</title>
    <style>
        .p1 {
            width: 500px;
            height: 200px;
            background-color: orange;
        }
        .p1 {
            /*颜色 大小 字重 字族 行高 水平居中方式*/
            color: red;
            font-size: 50px;
            /*100~900| normal | lighter | bold*/
            font-weight: bold;
            /*字族可以设置备用字体*/
            font-family: "STSong", "微软雅黑";
            /*将行高值以盒子高度一致*/
            line-height: 200px;

            /*left | center | right*/
            /*text-align: center;*/
        }
        .p1 {
            /*简写*/
            /*text-align: center;*/
            color: red;
            font: normal 30px/200px "STSong", "微软雅黑";
        }
        .p1 {
            font-size: 50px;
            /*em就是一个字的大小*/
            text-indent: 2em;
            /*underline | line-through | overline*/
            text-decoration: overline;
        }
        html {
            /*rem: r => root 只和html字体大小关联*/
            font-size: 50px;
        }

        body {
            font-size: 20px;
        }
        .sup {
            /*最小字体只能到达12px*/
            font-size: 12px;
        }
        .sub {
            /*inherit: 继承*/
            font-size: inherit;
        }
    </style>
</head>
<body>
    <p class="p1">
        一二三四五
    </p>
    <div class="sup">
        <div class="sub">呵呵</div>
    </div>
</body>
</html>
文本属性操作
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>字体案例</title>
    <style>
        /* 清除系统默认样式 => reset操作 */
        /*h2, p, h3 {*/
            /*margin: 0;*/
        /*}*/

        .box {
            width: 800px;
            border-bottom: 1px solid #999;
            margin: 0 auto;
            text-align: center;
            padding: 20px 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>领先的 Web 技术教程 - 全部免费</h2>
        <p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p>
        <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
        <h3>从左侧的菜单选择你需要的教程！</h3>
    </div>
</body>
</html>
字体案例

二：reset操作

what/why:大多系统预定义标签，由默认样式，不满足实际开发需求，反倒影响布局，通常在开发前，将需要用到的预定义标签的默认样式清除，高操作就称之为reset操作
body,h1,h6,p{
    margin:0;}
ul{
  margin:0px;
  padding:0;
  list-style:none;      
}
a{
  text-decoration:none;
  color:black;    
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>reset</title>
    <style>
        body, h1, h6, p {
            margin: 0;
        }
        ul {
            margin: 0px;
            padding: 0;
            list-style: none;
        }
        a {
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

<a href="https://www.baidu.com">前往百度</a>

</body>
</html>
reset操作

三：高级选择器

1.群组
div,a,p{}

2.后代
body div{}

3.兄弟
.div1~.div2{}

4.位置
li:nth-child(2n){}

5.多类
.d.dd{}

高级选择器的优先级：
优先级和个数（权重）相关
基础选择器优先级占主导：id 无限大于 class 无线大于 标签
选择器优先级相同时，和顺序有关
高级选择器类型不会影响优先级
伪类选择器相当于class
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>高级选择器</title>
    <style>
        /*1.群组选择器:
        同时控制多个
        选择器之间用逗号隔开
        每一个选择器位均可以替换为任意基础选择器或高级选择器
        */
        .div1, .p1 {
            color: red;
        }

        /*2.后代子代选择器
        通过关系层次控制一个目标选择器
        >代表父子关系 | 空格代表后代关系
        */
        .sup1 > .sub {
            color: orange;
        }
        /*sub是body的后代,但不是子代*/
        body .sub {
            color: pink;
        }

        /*3.兄弟选择器
        通过关系层次控制一个目标选择器
        */
        /* + 相邻 */
        .b2 + .b3 {
            color: blueviolet;
        }
        /* ~ 兄弟 */
        .b1 ~ .b3 {
            color: brown;
        }


        /*4.伪类选择器 - 位置*/
        ul:nth-child(10) > li:nth-child(2n) {
            color: green;
        }

    </style>
</head>
<body>
    <div class="div1">123</div>
    <p class="p1">456</p>
    <div>3333</div>
    <div class="sup1">
        <div class="sub">sub</div>
    </div>
    <div class="sup2">
        <div class="sub">sub</div>
    </div>

    <div class="b3">b3 333</div>
    <div class="b1">001</div>
    <div class="b2">002</div>
    <div class="b3">b3 003</div>

    <ul>
        <h3>标题</h3>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    <ul>
        <h3>标题</h3>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    <div>
        <p>0001</p>
        <p>0002</p>
        <p>0003</p>
    </div>

</body>
</html>
高级选择器
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>高级选择器优先级</title>
    <style>
        /* 优先级和个数(权重)相关
        基础选择器优先级占主导: id 无限大于 class 无限大于 标签
        选择器优先级相同时, 和顺序有关
        高级选择器类型不会影响优先级
        伪类选择器相当于class
        */
        .div {
            font-size: 100px;
            color: red;
        }

        div > .div {
            color: orange;
        }
        div ~ div ~ .div {
            color: brown;
        }
        div .div {
            color: pink;
        }

        .div:nth-child(3) {
            color: yellowgreen;
        }
        .sup .div {
            color: darkgreen;
        }
    </style>
    <style>
        /*多类名*/
        .div.div1 {
            color: black;
        }
        /* div.div#dd.div1 */
    </style>
</head>
<body>
<div>
    <div class="sup">
        <div>
            <div>
                <div></div>
                <div></div>
                <div class="div div1" id="dd">123</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
高级选择器优先级

四：边界圆角

左上角为第一个角，顺时针赋值，不足找对角
border-radius：30px 60px;

border-radius：150px;最大也就是150，是个圆

border-radius:50%;圆

横向第一个角50px,第二个角10px，不足找对角
纵向均是150px
border-radius:50px 10px/150px;
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>边界圆角</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        div {
            /*左上为第一个角, 顺时针赋值, 不足找对角*/
            /*border-radius: 30px 60px;*/

            /*border-radius: 150px;*/
            /*border-radius: 50%;*/

            /*横向第一个角50px, 第二个角10px, 不足找对角*/
            /*纵向均是150px*/
            border-radius: 50px 10px / 150px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
边界圆角

五：a的四大伪类

:link 链接初始状态
:hover 鼠标悬浮状态
:visited 链接访问后的状态
:active 鼠标按下时的状态
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a的四大伪类</title>
    <style>
        /*链接初始状态 | 鼠标悬浮状态 | 链接访问后的状态 | 鼠标按下时的状态*/
        /*a:link {*/
            /*color: black;*/
        /*}*/

        /*a:hover {*/
            /*cursor: pointer;*/
        /*}*/

        /*a:visited {*/
            /*color: yellow;*/
        /*}*/

        /*a:active {*/
            /*color: green;*/
        /*}*/
        /*鼠标悬浮状态 | 鼠标按下时的状态*/
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        div:hover {
            background-color: yellowgreen;
            cursor: pointer;
        }

        div:active {
            background-color: red;
        }

    </style>

    <style>
        body {
            margin: 0;
            user-select: none;
        }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a {
            color: black;
            text-decoration: none;
        }
        h3 {
            margin: 0;
        }

        .ul1 {
            /*border: 1px solid black;*/
            padding: 20px 0 15px 10px;
            width: 180px;
        }
        .ul1 h3 {
            font-size: 16px;
        }
        .ul1 li {
            text-indent: 10px;
            font-size: 14px;
        }
        .ul1 li:hover {
            background-color: #666;
        }
        .ul1 li:hover > a {
            color: white;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">标签a</a>
<div></div>


<ul class="ul1">
    <h3>HTML 教程</h3>
    <li><a href="">HTML</a></li>
    <li><a href="">HTML5</a></li>
    <li><a href="">XHTML</a></li>
    <li><a href="">CSS</a></li>
    <li><a href="">CSS3</a></li>
    <li><a href="">TCP/IP</a></li>
</ul>
<ul class="ul1">
    <h3>HTML 教程</h3>
    <li><a href="">HTML</a></li>
    <li><a href="">HTML5</a></li>
    <li><a href="">XHTML</a></li>
    <li><a href="">CSS</a></li>
    <li><a href="">CSS3</a></li>
    <li><a href="">TCP/IP</a></li>
</ul>

</body>
</html>
a的四大伪类

六：背景图片之精灵图

div{
background：url("img/bg.png") no-repeat 10px 20px;
图片地址     不平铺  x轴偏移  y轴偏移
}

精灵图操作本质：控制背景图片的位置
background-position-x
background-position-y
div:hover{
  background-position-y：20px;  
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景图片</title>
    <style>

        .div {
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
        .div {
            background-image: url("img/001.png");
            /*平铺: repeat-x | repeat-y | repeat | no-repeat*/
            background-repeat: no-repeat;
            /*背景图片位置*/
            /*水平: left|center|right  垂直:top|center|bottom*/
            background-position: -200px 50px;
        }
        .div:hover {
            transition: 2s;
            background-position-x: center;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>
背景图片操作
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liuxiaolu/p/10284014.html