0614 HTML-day3

最新推荐文章于 2024-10-07 17:45:00 发布

青柠味的脉动1

最新推荐文章于 2024-10-07 17:45:00 发布

阅读量382

点赞数 3

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/zxt20020625/article/details/139770558

版权

01.复合选择器

(1)并集选择器

并集选择器主要是能够把两个类中相同的属性合并到一起来完成,这样就显得简洁规划

<style>
        .con1 {
            color: blue;
        }
        
        .con2 {
            color: blueviolet;
        }
        
        .con1,
        .con2 {
            font-size: 30px;
            font-weight: 600;
        }
    </style>
<body>
    <div class="con1">你们好</div>
    <span class="con2">大家好</span>
</body>

(2)后代选择器

后代选择器->用来选择元素或元素组的子孙后代->精准选择中间用空格隔开

<style>
      
        ul li span {
            color: aqua;
        }
    </style>
<body>
    <ul>
        <li>
            <span>李笑原</span>
        </li>
        <span>张锡童</span>
    </ul>
</body>

(3)子代选择器

某元素**子元素()亲儿子**的元素使用>来表示子元素选择器

 <style>
        ul li>span {
            color: aqua;
        }
    </style>
<body>
    <ul>
        <li>
            <div>
                <span>大家好</span>
            </div>
        </li>
        <li>
            <span>你们好</span>
        </li>
    </ul>
</body>

2.标签的显示模式

div块级元素 1.独占一整行 2.可以设置宽和高

span 行内元素 1.不独占一行,不可以设置宽和高,宽高由内容撑开

img display属性为:inline行内块元素 1.不独占一行,可以设置宽高

块级元素:p div h1-h6 li ul ol hr

行内元素 span a strong b i em ins u s del ...

行内块元素 input img button

3.显示模式的转化

块级 block

行内 inline

行内块 inline-block

标签的嵌套关系: 块级元素内可以放任何元素. 行内元素只能放文本和其他行内元素

4.背景样式

background 背景

background-color背景颜色

background-image背景图片

background-repeat 背景重复

background-position背景定位

<style>
        div {
            width: 1528x;
            height: 980px;
            border: 1px solid red;
            /* 背景颜色 */
           background-color: transparent;
            /* 背景图片 */
            background-image: url(img/xiaozhou.jpg);
            /* 背景重复 repeat-x repeat-y*/
            background-repeat: no-repeat;
            /* 背景定位  */
            background-position: center center;
        }
    </style>
<body>
    <div></div>
</body>

5.精灵图思想

精灵图的原理是将多个小图标或图片合并到一张大图中，然后通过background-position属性来定位并显示需要显示的图片部分。

<style>
        div {
            /* 1.使用选择工具直接框大小 */
            width: 25px;
            height: 25px;
            /* 背景图片 */
            background-image: url(img/index.webp);
            /* 背景重复 */
            background-repeat: no-repeat;
            background-position: 0 -106px;
        }
    </style>
<body>
    <div></div>
</body>

6.背景

(1)背景的简写

用一个背景background里面添加颜色\图片还有各种格式

<style>
        .con {
            width: 1728px;
            height: 1080px;
            background: red url(img/xiaozhou.jpg) no-repeat center;
        }
    </style>
<body>
    <div class="con"></div>
</body>

(2)背景的尺寸

背景的尺寸的属性:

1.使用像素

设置为contain会自动调整缩放比例,保证图片完整显示在背景区域但是可能会留白

设置为cover时,会自动调整缩放比例,保证图片填满背景区域,如有溢出部分则会被隐藏.我们平时用的cover最多

<style>
        .con {
            width: 300px;
            height: 200px;
            background: red url(img/xiaozhou.jpg) no-repeat center;
            border: 1px solid red
            background-size: cover;
        }
    </style>

7.字体图标

(1)iconfont

1.引入css文件

<link rel="stylesheet" href="fonts/iconfont.css">

2.设置标签和class名 iconfont一定要加上!

 <style>
        .icon-qichepeijian {
            color: blue;
            font-size: 60px;
        }
    </style>
<body>
    <span class="iconfont icon-qichepeijian"></span>
</body>

(2)Uniconde方法

1.拷贝font-face

 @font-face {
            font-family: "iconfont";
            /* Project id  */
            src: url('fonts/iconfont.ttf?t=1718595727310') format('truetype');
        }

2.定义使用 inconfont 的样式

.iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

3.拷贝 span的标签并且把Unicode特殊字符作为文本设置到span的内容当中