css引入

前端学习@

已于 2022-12-29 11:02:04 修改

阅读量64

点赞数 1

文章标签： html css 前端 javascript 开发语言

于 2022-12-23 21:58:15 首次发布

本文链接：https://blog.csdn.net/weixin_52504437/article/details/128258770

版权

文章目录

案例文章图

css引入方式

css写在style标签里面，在title下面
css属性：（属性名）color：（属性值）red；
在这里插入图片描述

内嵌式：在style标签
外联式：.css文件里面
重新建一个css文件里面，直接写代码，然后再title下面
在这里插入图片描述
内行式：style属性里面
基础

选择器

标签选择器
p{ }选中所有的标签生效，有好有坏
类选择器
.类名{ } 在标签上加class=“类名”
id选择器
#id属性值配合js来用
在这里插入图片描述 *通配符选择器
*{} 所有的标签都可以选定可以去除内外边距（以后）

主体和文本样式

font-size 数值+px 谷歌默认16px
font-weight ：100-900 整百数，正常大小是400 ，加粗是700
在这里插入图片描述 font-style：是否倾斜 normal litalic:倾斜 em标签是倾斜

字体font-family

字体系列
无衬线字体sans-serif
衬线字体serif
等宽字体monospace
在这里插入图片描述样式层叠问题
后面覆盖前面的

font简写

以后会遇到：后面会有多个值的写法，复合属性
四个属性如果没有写就会默认
在这里插入图片描述

文本样式

文本缩进默认16px；32字号
在这里插入图片描述 文本水平对齐方式 居中text-align：center
文本修饰text-的从ratioin
underline下划线
line-through 删除线
overline上划线
none无装饰线（清空）去超链接下划线

行高line-height一行的高度

颜色常见取值
拓展标签水平居中方法总结margin：0 auto
如何让div、p、h（大盒子）水平居中

案例文章图

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<style>
    div{
        width: 800px;
        height: 600px;
        background-color: pink;
        margin: 0 auto;
    }
    h1{
        text-align: center;
    }
    /* p{text align：center}后面还有别的段落标签，其他段落标签不居中 */
    /* 类选择器设置段落居中 */
    .center {
        text-align: center;
    }
    .color1{
        color: #808008;
    }
    .color2{
        color: #878787;
        font-weight: 700;
    }
    a{
        text-decoration: none;
        /* 去除下划线 */
    }
    /* 段落内容首行缩进 */
    .suojin{
        text-indent: 2em;
    }
</style>
<body>
    <div>
        <h1 class="center">字节跳动青训营</h1>
        <p class="center">
            <span class="color1">2022.12.23</span>
            <span class="color2">晚上19:00</span>
            <a href="#">收藏本文</a>
        </p>
        <hr>
        <p class="suojin">第一段正文</p>
        <p class="suojin">第二段正文</p>
        <p class="suojin">第三段正文</p>
        <p class="suojin">第四段正文</p>
    </div>
</body>
</html>

效果图1

在这里插入图片描述

产品图

<!DOCTYPE html>
<html lang="en">
<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>
        body{
            background-color: #f5f5f5;
        }
        .goods{
            width: 234px;
            height: 300px;
            background-color: #fff;
            margin: 0 auto;
            text-align: center;
        }
        img {
            width: 160px;
            
        }
        .title{
            font-size: 12px;
            line-height: 25px;
        }
        .info{
            color: #ccc;
            font-size: 12px;
            line-height: 30px;
        }
        .money{
            color: #ffa500;
            font-size: 14px;

        }
    </style>
</head>
<body>
    <div class="goods">
        <img src="./car.jpg" alt="">
        <div class="title">平衡车</div>
        <div class="info">玩具</div>
        <div class="money">1999元</div>
    </div>
</body>
</html>