当前位置:首页 » php学习笔记 » css--字体样式,行高,首行缩进

css--字体样式,行高,首行缩进

原创 stpevenchow 29°c 2019年10月07日 21:41 php学习笔记 0条评论
  移步手机端

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .div1{
            width: 300px;
            height: 300px;
            font-size: 16px;
            border: 1px solid red;
            text-indent: 2em;

        }    
        a{
            color: red;
            text-decoration: none;
        }
        .a1:hover{
            color: pink;
            font-weight: bold;
            text-decoration: underline;
        }
        .span1{
            font-style: italic;
            font-weight: bold;
            font-size: 50px;
        }
        .div2{
            border: 1px solid red;
            line-height: 200px;
            font-size: 50px;

        }
    </style>
</head>
<body>
    <!-- 字体样式的简写形式
    在font属性中,通过多个属性值来设定字体相关css样式,多个属性值之间使用空格间隔
    font:italic bold 50px;
    -->
    <!-- font 简写规范
    先写font-style
        font-weight
        font-variant
        font-size line-height
        font-family
    1、字体大小必须带有行高设定,如果行高没有特别设定需求,设定位与字体大小相同
    2、不管设定什么属性值,必须带字体样式,哪怕是默认值也必须写    
    -->
    <span class="span1">北京</span>
    <!-- 行高--line-height
    一行内容所占的高度,如果不设定行高,默认是文字大小的高度
    行高的设定不能小于字体大小
    行高的设定如果大于字体大小,字体会在行高的高度之中,自动剧中
     -->    
    <div class="div2">重庆</div>
    <!-- 首行缩进  text-indent-->
    <div class="div1">
        今天天气很不错很适合呆在家里面学习代码,代码只能多敲,多练习,没有捷径可走。
    </div>
    <!-- 如果文字内容过多,一行显示不下会自动换行,中文排版中,第一行一般要有两个文字大小的缩进,使用text-indent来实现
    一般在使用text-indent属性值时,一般使用em相对单位来实现,一般缩进2个字,使用2em; -->
    <!-- 文本修饰线 text-decoration
        属性值:
            none:没有修饰线
            line-through 删除线
            overline 上划线
            underline 下划线
        一般项目中往往与:hover伪类选择器配合使用    -->
    <a href="#" class="a1">今天更新3篇文章</a>
</body>
</html>

欢迎阅读本文,如果本文对您有所帮助,记得收藏/转发☺

本文链接:http://stpeven.com/post/128.html

版权声明:本文为原创文章,版权归 stpevenchow 所有,欢迎分享本文,转载请保留出处!

本文标签:

三人行,必有我师

评论(0)

发表评论:


【顶】 【踩】 【好】 【懵】 【赞】 【表情】

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

推荐阅读
10月14日

css-简单的调查表单制作

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 7次
css-简单的调查表单制作

     拿到种类型的表单过后,我们首先要分析,这个表单大致的要涉及到html哪些标签属性,从表面上来看,这个表格大概是由3个部分组成,主题,标题,内容,把这3个确定好了过后,后面就是直接调用css样式了。下面直接放出代码    <!DOCTYPE html><html><head>    <meta charset="utf...

标签 :