02-字体和文本样式(折叠显示)(img的css操作)(标签居中)【标签内容的垂直居中】

目录

一:字体

1、字号

2、字体粗细 

3、 字体样式

4、字体系列

5、样式的层叠性问题

6、字体font相关属性的连写(简易方法) 

二:文本样式 

1、文本缩进

2、文本(内容)水平对齐方式

(内容居中显示)text-align:center 可以使  文本  ,span标签、a标签  ,input标签、img标签  居中显示

3、文本修饰 

4、行高

5、颜色

6、标签水平居中显示 


一:字体

1、字号

  •  默认值为16px
  • css属性名: font-size:30px

2、字体粗细 

  • css属性名: font-weight
  • 关键字格式:正常normal   加粗bold
  • 数字输入格式: 整成400   加粗700

#注意!:后面没有单位符号! 

3、 字体样式

  • css属性名:font-style
  • 正常:normal  倾斜:italic
<style>
        div {
            font-style: italic;
        }

        em {
            font-style: normal;
        }
    </style>
</head>
<body>
    <div>div文字</div>
    <em>em</em>

#效果图: 

4、字体系列

  • css属性名:font-family
  • 直接输入想要字体名称   用 “,” 隔开(英文格式),系统按顺序显示(有的话)
  • 如果什么都没有,就选择默认储存的sans-系列字体(所以最后补充这个字体以防万一)
 <style>
        div {
            font-family: 微软雅黑, 黑体, sans-serif;
            /* 按顺序选择显示的字体 (如果都没有 就自动选存在的sans-系列的字体 */
            /* 使用的间隔单位是 “英文的,” */
        }
    </style>
</head>
<body>
    <div>
        这是一个div标签
        <!-- 默认的字体是 微软雅黑 -->
    </div>

5、样式的层叠性问题

  • 给同一个标签设置了相同的属性,此时会产生覆盖效果,只生效写在最下面的代码
<style>
        p {
            color: red;
            color: blue;
            /* 基于层叠性 后面的代码覆盖前面操作 */
        }
    </style>
</head>
<body>
    <p>pppp</p>

 #效果图 :

6、字体font相关属性的连写(简易方法) 

  • 取值:   font:style weight size family   (之间用空格分开)
  • 省略要求: 只能省略前两个style weight ,按默认值取

#!有顺序的要求!

 #代码要求:

二:文本样式 

1、文本缩进

  •  css属性名:  text-indent
  • 取值:数字 + px    或者     数字 + em 1em = 当前标签的font-size的大小 )

#对于编辑器代码过长,alt + z 可折叠显示

2、文本(内容)水平对齐方式

  •  css属性名: text-align
  • 取值:  left(左对齐) center(居中对齐) right(右对齐)

#img的css操作是在body这个标签下面的,或者说图片的显示是在一个盒子里面,图片的位置就由盒子的位置决定,所以就是修改body这个盒子(好像又不是这样理解...大概吧)

(内容居中显示)text-align:center 可以使  文本  ,span标签、a标签  ,input标签、img标签  居中显示

  • #注意要给以上元素的父级标签设置css
<style>
        h1 {
            text-align: center;
        }

        body {
            text-align: center;
            /* 图就是img img就在body的架构里面 */
        }
    </style>
</head>
<body>
    <h1>新闻标题</h1>
    <img src="./00-媒体文件/a3.jpg" alt="">
    <!-- 父级标签要了解 -->

  #效果图:

#水平居中使用 text-align

#标签内容的垂直居中使用行高(具体看盒子的大小) line-height

text-align: center;
line-height: 50px;
/* 居中直接用行高显示 */

3、文本修饰 

  •  css属性名: text-decoration
  • 取值:underline下划线   ,line-through删除线   ,overline上划线   ,none无装饰线(常用)

 #text-decoration:none 多用于清除a标签默认的下划线(超链接)

4、行高

  •  作用:控制一行的上下行间距(包括字体高度 + 字体的上下间距,所以两段字之间的距离是两下间距 + 上间距

  • css属性名:line-height
  • 取值:数字 + px   或者   倍数(当前标签font-size的倍数)

#连写注意点:   font:style weight size/line-height family

  • font:italic 700 66px/2 宋体;

5、颜色

  • css属性名:  文字颜色:color    背景颜色:background-color
  • 取值:单词  , rgb(0,233,44)  , 透明度显示:rgba(244,45,44,0.4)   ,  #fff000

6、标签水平居中显示 

  • margin:0 auto   (div,p,h这样的标签)  -   上下  左右

#一般针对固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值