#博学谷IT学习技术支持#
一、字体和文本样式
(一)字体样式
1、字体大小:font-size
取值:数字 + px
2、字体粗细:font-weight
取值:关键字(正常normal,加粗bold);纯数字(正常400,加粗700)
3、字体样式:font-style
取值:正常normal,倾斜italic
4、字体类型:font-family
取值:具体字体1,具体字体2,具体字体3,具体字体4,...,字体类型。具体字体名称:"Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……字体系列名称:sans-serif、serif、monospace等……
渲染规则:1、从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体。2、如果都不支持,则显示最后设置的字体系列的默认字体。
注意点:1、如果字体名称中存在多个单词,推荐使用引号包裹;2、最后一项字体系列不需要引号包裹;3、网页开发时,尽量使用系统自带字体,保证不同用户浏览网页都可以正确显示
5、font属性的连写问题
顺序问题--font: style weight size family
省略问题--只能省略前两个,如果省略了相当于设置了默认值。省略的覆盖问题,如果需要同时设置单独的属性和连写形式
(二)文本样式
1、文本缩进text-indent
取值:数字 + px;数字 + em
注意点:不是独占一行的元素设置text-indent无效
2、文本水平对齐方式text-align
取值:左对齐+left;居中对齐+center;右对齐+right
注意点:如果让文本水平居中,text-align:center给文本的父元素设置
3、文本修饰text-decoration
取值:下划线+underline;删除线+line-through;没有效果+none
(三)行高line-height
1、取值:数字+px;倍数(当前文字大小的倍数)
2、常见应用:line-height:文字父元素的高度,让单行文本垂直居中;设置line-height:1取消上下间距,精准布局时会使用
3、和font属性的连写形式,font:style weight size/line-height family;如果需要设置单独的样式和连写
二、Chrome调试工具
(一)打开方式--右击→检查
(二)选择元素:方法一:在左侧elements中点击需要调试的元素
方法二:点击左上角按钮后,直接在网页中点击需要调试的元素
(三)功能
1、控制样式:
A、修改属性值:直接点击属性值,直接修改
B、添加属性:在上一个属性的分号后点击一下,直接添加
C、控制样式生效:点击属性前的小框即可
2、特殊情况:
A、样式上有删除线
a、含义:样式失效
b、原因:样式被注释了或者样式被覆盖了
B、样式前有小三角形
a、含义:样式报错
b、原因:属性值后没写分号;出现中文标点;属性名或者属性值单词拼错
三、总结
今天的学习分享就到这里了,明天继续加油!