程序开发

H5学习之裁剪标签、样式继承、相对字号em和rem、超链接选择器

裁剪标签裁剪标签:

HTML:

<body>
    <section>
        <div></div>
    </section>
</body>

CSS:

        section{
            width: 416px;
            height: 105px;
            background-color: #444;
            border-radius: 30px;
            margin: 100px auto;
            position: relative;
            /*overflow: hidden; 
            可以切掉超出边界的子元素 方法简单 适用广泛 
            但对于绝对定位的元素 如果移到了父元素的外面 
            方法就没用了 这时需要使用clip*/
        }
        div{
            width: 180px;
            height: 180px;
            background-color: yellow;
            border-radius: 50%;
            position: absolute;
            top: -30px;
            left: 40px;
            opacity: 0.7;
            clip: rect(30px,180px,135px,0);
            /*裁剪:第一个值 上方切掉的范围
                   第二个值 从左到右保留的范围
                   第三个值 从上到下保留的位置
                   第四个值 左侧切掉的范围*/

        }

样式继承:

HTML:

<body>
    <main>
        <article>
            <header>
                <h1>大标题</h1>
                <h3>副标题</h3>
                <address>作者,联系方式和继承</address>
            </header>
            <section>
                <h2>小标题1</h2>
                <p>正文段落1</p>
                <p>正文段落2</p>
                <p>正文段落3</p>                
            </section>
            <section>
                <h2>小标题2</h2>
                <p>正文段落1</p>
                <p>正文段落2</p>
                <p>正文段落3</p>                
            </section><section>
                <h2>小标题3</h2>
                <p>正文段落1</p>
                <p>正文段落2</p>
                <p>正文段落3</p>                
            </section><section>
                <h2>小标题4</h2>
                <p>正文段落1</p>
                <p>正文段落2</p>
                <p>正文段落3</p>                
            </section><section>
                <h2>小标题5</h2>
                <p>正文段落1</p>
                <p>正文段落2</p>
                <p>正文段落3</p>                
            </section>
        </article>
    </main>
</body>

CSS:

        body{
            color: red;
            /*将color应该body上 
            会使body内部所有的标签都加上颜色 这就是继承*/
            background-color: blanchedalmond;
            font-size: 25px;
            font-family: 楷体;
            font-style: italic;
            text-decoration: underline;
            line-height: 30px;
            border: 1px solid blue;
            /*能够继承的样式多是与文字相关的样式
            盒模型相关的样式和其它更多样式是不继承的*/
        }

相对字号em和rem:

HTML:

<body>
    <section>
        <h2>小标题</h2>
        <p>正文段落1</p>
        <p>正文段落2</p>
        <p style="font-size:1em;">正文段落3</p>
        <p style="font-size:1.2em;">正文段落4</p>
        <p style="font-size:1.5em;">正文段落5</p>
        <p style="font-size:2em;">正文段落6
            <span style="font-size:0.5em;">内部文字
                <span style="font-size:0.5em;">内部的内部
                </span>
            </span>
        </p>
    </section>
    <section>
        <h2>小标题</h2>
        <p>正文段落1</p>
        <p>正文段落2</p>
        <p>正文段落3</p>
        <p style="font-size:1.2rem;">正文段落4</p>
        <p style="font-size:1.5rem;">正文段落5</p>
        <p style="font-size:2rem;">正文段落6
            <span style="font-size:0.5rem;">内部文字
                <span style="font-size:0.5rem;">内部的内部
                </span>
            </span>
        </p>
    </section>
</body>

CSS:

        html{
            font-size: 20px;
        }
        body{
            /*font-size: 24px;*/
            /*em以父标签的字号作为标准进行计算
              如果父元素也是em字号则可以逐级相乘
              页面默认字号是16px
              在第一个section中最深的span标签的字号为
              16*2*0.5*0.5 = 8  */
        }
        /*rem以文档根标签(html)的字号作为标准进行计算
          rem字号不受上级标签影响 因此计算起来更方便*/

超链接选择器:

HTML:

<body>
    <a href="https://www.baidu.con" target="_blank">百度一下</a>
    <a href="https://www.so.com11" target="_blank">360搜索</a>
    <a href="https://www.taobao.com" target="_blank">淘宝网</a>
</body>

CSS:

        a{
            font-size: 3rem;
        }
        a:link{
            /*没有成功打开的超链接样式*/
            color: red;
        }
        a:visited{
            /*成功打开的超链接样式 这个样式放置位置很重要
              放在后面会影响 hover 和 active 的样式*/
            color: yellow;
        }
        a:hover{
            /*鼠标指针放上去的样式*/
            color: green;
        }
        a:active{
            /*鼠标指针按下去的样式*/
            color: rebeccapurple;
        }
        a:focus{
            /*获取焦点时的样式 此样式会覆盖 active */
            color: lawngreen;
        }

演示:

裁剪标签

样式继承

相对字号em和rem

超链接选择器

黄良钵
博客站长,前端开发工程师
查看“黄良钵”的所有文章 →

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关推荐