前端——CSS新手基础篇2

祎2祎

于 2024-06-14 17:15:13 发布

阅读量1k

点赞数 25

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.csdn.net/wmy030921/article/details/139674016

一，文字阴影：text-shadow

可以给文字添加阴影效果

text-shadow:水平位置垂直位置模糊距离阴影颜色;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

<style>

.con {

font-size: 60px;

/* text-shadow:水平位置垂直位置模糊距离阴影颜色 */

/* 水平正值往右平移，负值往左平移模糊 */

/* text-shadow: 10px 0 5px red; */

/* 垂直正值往下平移，负值往上平移模糊*/

text-shadow: 0 10px 5px red;

}

</style>

</head>

<body>

<div class="con">今天又是元气满满的一天</div>

</body>

<style>

body {

background-color: #000;

}

.con {

/* 字体大小 */

font-size: 60px;

/* 文字阴影双重色用逗号隔开 */

text-shadow: -5px 0 0 cyan, 5px 0 0 red;

/* 字体颜色 */

color: #fff;

/* 字体风格 */

font-family: 黑体;

}

<style>

body {

background-color: #000;

}

.con {

/* 字体大小 */

font-size: 60px;

/* 文字阴影双重色用逗号隔开 */

text-shadow: -5px 0 0 cyan, 5px 0 0 red;

/* 字体颜色 */

color: #fff;

/* 字体风格 */

font-family: 黑体;

}

</style>

</head>

<body>

<div class="con">十个勤天只能是十个勤天</div>

</body>

</html>

二，复合选择器

1.并集选择器

<style>
        .con1 {
            color: red;
            font-weight: 700;
            font-size: 32px;
        }
        
        .con2 {
            color: pink;
            font-weight: 700;
            font-size: 32px;
        }
        /* 还有两个需求是两个名字都加粗，字体大小都是32px */
        /* 并集选择器 */
        /* 第1种方法，优先选择 */
        
        .con1,
        .con2 {
            font-size: 32px;
            font-weight: 700;
        }
        /* 第2种方法 可以不用写，class也不用写*/
        /* .common{
            font-size: 32px;
            font-weight: 700;
        } */
    </style>
</head>

<body>
    <div class="con1 common">赵小童</div>
    <span class="con2 common">陈少熙</span>

</body>

2. 后代选择器和子元素选择器

<style>
        /* 只让王一珩变成粉色 */
        /* 后代选择器 是所有的->用来选择元素或元素组的子孙后代->精准选择 中间用空格隔开 */
        
        ul li div span {
            color: pink;
        }
        /* 都变粉色 */
        
        ul li span {
            color: pink;
        }
        /* 只让何浩楠变粉色 */
        /* 子元素选择器->只选亲儿子，最近一级 用>来表示 */
        
        ul li>span {
            color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div>
                <span>王一珩</span>
            </div>
        </li>
        <li>
            <span>何浩楠</span>
        </li>
    </ul>

</body>

三，标签显示模式

<style>
        div {
            width: 200px;
            height: 200px;
        }
        /*不能设置宽和高，没有用  */
        
        span {
            width: 200px;
            height: 200px;
        }
        
        img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <!-- p div span ul li ol dl dt dd a input img hr br b strong i em s del u ins h1-h6-->
    <!-- div 块元素  -->
    <!-- 独占一行 可以设置宽和高 -->
    <div>hello world</div>
    <div>hello world</div>

    <!-- span 行内元素 -->
    <!-- 不独占一行 不能设置宽和高，宽和高由内容撑开 -->
    <span>今天周五，明天干点啥？</span>
    <span>在宿舍睡觉</span>

    <!-- 行内块元素 -->
    <!-- 不独占一行 可以设置宽高 -->
    <img src="img/zhaoxiaotong.jpg" alt="">

    <!-- 块级元素 p div h1-h6 ul li ol hr ... -->
    <!-- 行内元素 span a b strong i em s del u ins ... -->
    <!-- 行内块 img input  button... -->
</body>

四，标签模式的转换

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 显示模式转换 */
            /* 转换成行内，宽高失效 */
            display: inline;
            display: inline-block;
        }
        
        span {
            /* 显示转换模式 */
            display: block;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        
        div {
            display: inline;
            background-color: red;
        }
        
        span {
            display: block;
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <!-- 块级 block -->
    <!-- 行内 inline -->
    <!-- 行内块元素 inline-block -->
    <div>内容1</div>
    <div>内容2</div>

    <span>行内元素</span>

    <!-- 标签的嵌套关系 -->
    <!-- 块级元素内可以放任何元素 -->
    <!-- 行内元素内只能放文本或其他行内元素，不能是div -->

    <!-- p不能嵌套 h1也不能-->
    <!-- 这种不对 -->
    <p>段落1
        <p>段落2</p>
    </p>
    <!-- a 可以嵌套图片 -->
    <a href="">
        <img src="img/zhaoxiaotong.jpg" alt="">
    </a>

    <!-- 测试 -->
    <div>十个勤天只能是十个勤天</div>
    <span>十个勤天做大做强</span>
</body>

五，背景样式

<style>
        div {
            /* 宽高大于背景图大小时会重复 */
            width: 900px;
            height: 1100px;
            /* 背景元素 */
            /* background-color: purple; */
            /* 透明色 */
            /* background-color: transparent; */
            /* 背景图片 url路径*/
            background-image: url(img/zhaoxiaotong.jpg);
            /* 背景重复 repeat no-repeat repeat-x repeat-y*/
            background-repeat: no-repeat;
            /* 水平方向平铺 */
            background-repeat: repeat-y;
            /* 背景定位  水平 垂直 正值往下往右*/
            background-position: 50px 100px;
            /* 右下 */
            background-position: right bottom;
            /* 居中 */
            background-position: center center;
        }
    </style>
</head>

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