目录
(内容居中显示)text-align:center 可以使 文本 ,span标签、a标签 ,input标签、img标签 居中显示
一:字体
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这样的标签) - 上下 左右
#一般针对固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度