四、文本样式
4.1.1 文本样式- 水平对齐方式
属性名：text-aligh
取值:
属性值 效果
left 左对齐
center 居中对齐
right 右对齐 注意点:
- 如果需要让文本水平居中,text-align 属性给文本所在标签 (文本的父元素)设置
text-align:center 与 margin:0 auto 写在span内为什么不能让居中？
原因：
1. span它的属性是内联元素的属性。宽度是根据内容定的，不可改变，所以给它设置文字居中不会有什么改变
2. margin:0 auto 也不能在内联元素中使用，因为内联元素宽度是由内容多少决定的，auto不能设置水平居中。但margin设置左右可以使用，要想上下也有反映的话，可将内联转化为块状元素。
4.1.2 文本样式-文本修饰线
属性名：text-decoration
取值:
属性值 效果
underline 下划线(常用)
line-through 删除线(不常用)
overline 上划线(几乎不用)
none 无装饰线(常用)
<style>
div {
text-decoration: underline;
}
p {
text-decoration: line-through;
}
h2 {
text-decoration: overline;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div>div</div>
<p>ppp</p>
<h2>h2</h2>
<a href="#">我是超链接,点呀</a>
</body>4.1.3 文本样式- 行高
属性名：line-height
作用：控制一行的上下行间距
取值：
1. 数字+px
2. 倍数(当前标签font+size的倍数)
应用：
1. 让单行文本垂直居中可以设置line-height:文字父元素高度
2. 网页精准布局时,会设置line-height:1可以取消上下间距
3. 垂直居中技巧:设置行高属性值 = 自身高度属性值
p {
/* 数字 + px */
line-height: 50px;
/* 自己字号的1.5倍 */
line-height: 1.5;
}行高于font连写的注意点:
- 如果同时设置了行高和font连写,注意覆盖问题
- font: style weight size/line-height family;
<style>
p {
/* 66px 宋体 倾斜 加粗 行高是2倍 */
font: italic 700 40px/2 宋体 ;
}
</style>4.1.4 颜色常见取值
属性名：
如：文字颜色：color
如：背景颜色：background-color
属性值：
颜色表示方式 表示含义 属性值
关键词 预定义的颜色名 red、green、blue、yellow...
rgb表示法 红绿蓝三原色,每项取值范围：0~255 rgb(0，0，0)、rgb(255，255，255)、rgb(255，0，0)
rgba表示法 红绿蓝三原色+a表示透明度,透明度取值范围0~1 rgb(255，255，255，0.5)、rgb(255，0，0，0.3)
十六进制表示法 #开头,将数字转化成十六进制表示 #000000、#ff0000、#e92322，简写：#000、#f004.1.5 标签水平居中
标签水平居中方法总结：margin：0 auto
注意点：
- 如果需要让div、p、h(大盒子) 水平居中，直接给当前元素本身设置即可
- margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
- margin：0 auto，0表示上下间距为 0，auto表示左右间距自适应相同值
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
</style>五、Chrome调试工具
5.1.1 谷歌调试工具
谷歌调试工具打开方式：1. 点击鼠标右键然后点检查
2. 按键盘F12
谷歌调试工具注意点：
- F12中css出现了删除线就是被别的属性重叠掉了
- F12中css出现黄色三角感叹号就是css写的属性出现问题