自学前端第十二天~

最新推荐文章于 2024-07-19 14:40:55 发布

弹走鱼尾纹~

最新推荐文章于 2024-07-19 14:40:55 发布

阅读量480

点赞数

文章标签：前端 css3 html html5 css

本文链接：https://blog.csdn.net/qq_41575188/article/details/123802979

版权

还是css3的一些新增的内容。接上次没有学完的伪类选择器，以及一些阴影和圆角的设置。

结构伪类选择器

用来在设置了相同标签时方便选择区分。

<style>
        /* 选中第一个孩子 */
        li:first-child{
            background-color: yellow;
        }
        /* 选中最后一个孩子 */
        li:last-child{
            background-color: red;
        }
        /* 第几个 */
        li:nth-child(2){
            font-weight: 700;
        }
        /* 第几个，偶数2n（even）奇数（2n+1）（2n-1）（odd） */
        li:nth-child(2n){
            font-weight: 700;
        }
        div{
            width: 100px;
            height: 100px;
        }
        /* 找只有一个孩子的（独生子女） */
        div p:only-child{
            background-color: green;
        }
        /* 选中没有孩子的标签 */
        div:empty{
            background-color: pink;
        }
        /* 匹配文档根元素，根元素永远是HTML */
        :root,body{
            background-color: pink;
        }
    </style>

目标伪类选择器

/* 给目标加上样式 */

div:target{

background-color: yellow;

}

一个手风琴案例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div .content{
            display: none;
        }
        div.content:target{
            display: block;
        }

    </style>
</head>
<body>
    <div>
        <a href="#aaa">aaa</a>
        <div id="aaa" class="content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum vitae qui possimus ea dicta iure perferendis nam deserunt, beatae aliquid rem, eius et illo iste nemo veritatis hic explicabo maiores?</div>
    </div>
    <div>
        <a href="#bbb">bbb</a>
        <div id="bbb" class="content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum vitae qui possimus ea dicta iure perferendis nam deserunt, beatae aliquid rem, eius et illo iste nemo veritatis hic explicabo maiores?</div>
    </div>
    <div>
        <a href="#ccc">ccc</a>
        <div id="ccc" class="content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum vitae qui possimus ea dicta iure perferendis nam deserunt, beatae aliquid rem, eius et illo iste nemo veritatis hic explicabo maiores?</div>
    </div>
</body>

配合之前的锚点使用。开始设置display:none，使下面的内容不展示，然后选择内容作为目标伪类，点击目标链接时，就会出现内容。

UI状态伪类选择器

 <style>
        /* 非禁用状态样式 */
        input:enabled{
            background-color: red;
        }
        /* 禁用状态的样式 */
        input:disabled{
            background-color: yellow;
        }
        /* 聚焦焦点，被选中就有样式 */
        input:focus{
            background-color: blue;
        }
      
        input[type=checkbox]{
            appearance: none;  /* 去掉checkbox默认的样式 */
            width: 20px;
            height: 20px;
            border: 1px solid black;
        }
        /* 勾选上的样式 */
        input:checked{
            background-color: red;
        }
        /* 选中之后样式的改变 */
        div::selection{
            background-color: yellow;
            color: red;

        }
    </style>

<body>
    <form action="">
        用户名:<input type="text"><br>
        密码： <input type="password"><br>

        记住用户名<input type="checkbox"><br>
        <input type="submit" disabled>
    </form>


    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat autem voluptate expedita nesciunt exercitationem rerum, ipsa doloremque consectetur inventore ad aut tenetur earum alias nemo voluptas ipsum nostrum tempora quae.
    </div>
</body>

首先可以看到基本上启用状态下的都设置了红色背景，提交按钮因为被禁用，背景是黄色，而用户名的文本框因为被聚焦，所以背景色变成了蓝色，记住用户名这里的checkbox因为浏览器默认会加样式，所以需要设置appearance: none;去除本身自带的效果，然后我们设置的这些ui伪类选择器的效果才会起作用。

否定伪类选择器

<style>
        li:not(:first-child){
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</body>

就是在之前选择器的前面加上：not，用括号括起来，表示对之前伪类选择器的否定，会对相反的标签的样式起作用。

文本阴影

文本阴影就是给文本设置阴影，使其在特定ui界面上看起来效果更好。text-shadow有四个值，分别是水平上的阴影的偏移、竖直方向上阴影的偏移、模糊程度以及阴影的颜色，必须按照顺序设置。

 <style>
        div{
            text-shadow: 10px 10px 1px red;
        }

        /* 
        可以设置多个阴影用逗号分隔开
        10px:水平方向的位移，可以设置负值
        10px：垂直方向的位移，可以设置负值
        1px：模糊程度，越大越模糊
        red：阴影颜色
        */

    </style>
</head>
<body>
    <div>大家好</div>
</body>

盒子阴影

盒子阴影和文本阴影差不多，多了阴影大小和内外阴影的设置。默认是外阴影，加上inset就是设置内阴影。

圆角边框

主要是border-radius属性的设置，border-radius支持px或者百分比，大于等于正方形盒子的一半就是圆。

支持设置1~4个值，分别代表下面不同方向：

v1 四个角一样
v1,v2 左上右下，左下右上 一致
v1,v2,v3左上 ，左下右上，右下
v1,v2,v3,v4顺时针 -->

几个特殊的图形通过border-radius设置：

<style>
        /* 圆形 */
        /* div{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 0 auto;
            border-radius: 50%;
        } */
        /* 椭圆形 */
        /* div{
            width: 200px;
            height: 100px;
            background-color: green;
            margin: 0 auto;
            border-radius: 50%;
        } */
        /* 半圆形 */
        /* div{
            width: 200px;
            height: 100px;
            background-color: green;
            margin: 0 auto;
            border-radius: 100px 100px 0px 0px;
        } */
        /* 扇形 */
        /* div{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 0 auto;
            border-radius: 200px 0px 0px 0px;
        } */

    </style>

圆角案例

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            outline: none;
        }
        div{
            width: 935px;
            height: 120px;
            border: 1px solid #dedede;
            margin: 10px auto;
            background-color: #eceaeb;
            border-radius: 15px;
            box-shadow: 4px 10px 6px  #bfbfbf,-4px 10px 6px  #bfbfbf;
        }
        input[type=text]{
            width: 683px;
            height: 86px;
            margin: 17px;
            border: 3px solid #cccccc;   
            border-radius: 5px;
            font-size: 25px;  
            text-indent: 11px; 
        }
        input[type=button]{
            width: 200px;
            height: 83px;
            background-image:url(img/1.png);
            border-radius: 5px;
            border: 1px solid #5ca3b4;
            color: white;
            font-size: 23px;
            font-weight: 700;
        }

    </style>
</head>
<body>
    <div>
        <input type="text" placeholder="Search for CSS3,HTML5,jQuery...">
        <input type="button" value="GO">
    </div>
</body>

字体引入

加上@font-face{},可以定义自己想要的字体。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face{
          font-family: kerwin;
          src:url(font/ygyxsziti2.0.ttf);
        }
        div{
            font-family:kerwin ;
            font-size: 50px;
            color: red;
            text-shadow: 5px 0px 1px green;
        }
    </style>
</head>
<body>
    <div>赵钱孙李</div>
</body>

弹走鱼尾纹~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自学前端第十二天~

还是css3的一些新增的内容。接上次没有学完的伪类选择器，以及一些阴影和圆角的设置。结构伪类选择器用来在设置了相同标签时方便选择区分。<style> /* 选中第一个孩子 */ li:first-child{ background-color: yellow; } /* 选中最后一个孩子 */ li:last-child{ background-color
复制链接

扫一扫