web前端4

最新推荐文章于 2023-09-04 15:24:24 发布

Bescheidenheit

最新推荐文章于 2023-09-04 15:24:24 发布

阅读量68

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Bescheidenheit/article/details/103453312

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>笔记4</title>
</head>
<style>
    .box{
        width:400px;
        height:200px;
        background-color:rgba(190,0,0, 0.8);/*rgba中0.8代表透明度*/
        cursor: pointer;/*鼠标样式  里面属性还有help鼠标变成？  cell变成十字架  col-resize变成左右箭头  move变成一个可移动状态的箭头*/
        /*display: none; 直接隐藏，不占据空间 改为block为显示。同时透明度也需要改为1*/
        /*visibility: hidden;隐藏，但是占据空间 改为visible为显示*/
        /*opacity: 0;透明度变为0也是隐藏，但同样占据空间*/
        overflow:scroll;/*hidden多余出来的文字全部隐藏。    通过滚动条查看scroll*/
        font: nomal bold 20px/40px "微软雅黑";/*不倾斜 字体粗细 字体大小/行高 字体样式*/

    }
    .box a{
        text-decoration:none/*none为去掉    line-through线从文字穿过，用于电商价格  underline下划线     overline文字上面加一条线*/
    }
    .box p{
        text-indent: 2em;
    } 
</style>
<body>
    
    <div class="box">
        <h1>盒子<a href="">模型</a>这是没用的文字</h1>
        <p>这是用来占位的文字，是没有用的。请选择性忽略它。这是用来占位的文字，是没有用的。请选择性忽略它。这是用来占位的文字，是没有用的。请选择性忽略它。这是用来占位的文字，是没有用的。请选择性忽略它</p>
        <p>这个和上面是一样的，用来做测试用的文字。这个和上面是一样的，用来做测试用的文字。这个和上面是一样的，用来做测试用的文字。这个和上面是一样的，用来做测试用的文字。这个和上面是一样的，用来做测试用的文字。</p>
    </div>

    CSS的基本样式：
        宽  高  鼠标样式    可见样式    溢出隐藏    透明度 

        字体样式：
            字体：font-family   一般指微软雅黑
            字号：font-size     字体大小
            字的样式：font-style    正常的还是倾斜
            字的粗细：font-weight   字体粗细100为细 900为宽没有单位。也可以用英语单词
            字的颜色：color
        文本属性：
            行高：line-height   一般单行文字的垂直居中用行高来设置
            文本修饰：  text-decoration     下划线
            缩进：  text-indent     
            字符间距:   letter-spacing      一般用在标题中
            空白间距：  word-spacing   一般用在英语单词中  设置空白地方的间距
            英文大小写：    text-transform:capitalize/uppercase/lowercase       lowercase为全部小写 uppercase为全部大写 capitalize首字母大写
            文字水平对齐方式：text-align   justify两端对齐 
            文本所在行高垂直对齐方式：vertical-align    文字和图片在一起的时候用
</body>
</html>

Bescheidenheit

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端4

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫

专栏目录