<!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>
<!-- 字体与文本格式:
字体大小:
属性名:font-size
取值:数字+px
注:谷歌浏览器默认是16px
字体粗细:
属性名:font-weight
取值:
关键字:正常:noraml 加粗:bold
纯数字:正常:400 加粗:700
注:实际开发中,正常,加粗两种取值使用最多。
字体倾斜:
属性名:font-style
取值:
关键字:正常:normal 倾斜:italic
字体系列:
属性名:font-family
常见取值: 黑体, 宋体,楷体
注:windows默认字体微软雅黑
macOS默认字体苹方
字体font相关属性连写:如果使用到多个以font开头的属性,可以写为
取值:font:style weight size family;
例: font:italic 700 66px 宋体;
文本缩进:
属性名:text-indent
取值: 数字px
em:一个字的大小的像素。
p{
text-indent:50px;
}
文本水平对齐方式:
属性名:text-align(text-align:center 可以让文本,span标签,a标签,img标签,input标签,等水平居中)
取值:
属性值 效果
left 左对齐
center 居中对齐
right 右对齐
文本修饰:
属性名:text-decoration
取值:
属性值 效果
underline 下划线(常用)
line-through 删除线(不常用)
overline 上划线(几乎不用)
none 无装饰线(常用)(默认超链接都有下划线,使用text-decoration:none;来消除)
行高:控制一行的上下行间距
属性名:line-height
取值: 数字px;(上间距+文本高度+下间距=行高,不是行与行之间的距离。)
倍数;(字号像素的倍数)
Chrome调试工具:F12/右键检查
Elements:元素/标签 打开之后左边的html,右边是css。可以对右边css进行编辑调试,但是刷新之后会恢复初始效果。
标签水平居中:
margin:0 auto
可以让div,p,h(大盒子)水平居中
-->
<style>
p{
font-size: 30px;
}
h3{
font-weight: 100;
}
#2{
font-style: italic;
}
#1{
font-family:黑体;
}
</style>
<!--
-->
</head>
<body>
<h3>我是h3</h3>
<p>段落文字</p>
<div id="2">我是div</div>
<div>我也是div</div>
<div id="1">我是黑体字体</div>
</body>
</html>