文字
字号
属性名:font-size
取值:数字+px
注意点:
·谷歌浏览器默认文字大小是16px
·单位需要设置,否则无效
字体粗细
属性名:font-weight
取值:
·关键字:
正常:normal
加粗:bold
·纯数字:100~900的整百数
正常:400
加粗:700
400和normal效果一样
700和bold效果一样
实际开发中以正常、加粗这两种取值使用得多
文字倾斜
属性名:font-style
取值:
·正常(默认值):normal
·倾斜:italic
文本样式
window文字默认是微软雅黑
属性名:font-family
常见取值:具体字体1,具体字体2,具体字体3........,字体系列
·具体字体:“Microsoft YaHei"、微软雅黑、黑体、实体、楷体等.....
·字体系列:sans-serif、serif、monospace等....
渲染规则:
1.从左到右按照顺序查找,如果电脑未安装该字体,则显示下一个字体
2.如果的不支持,则最后显示默认字体
注意点:
1.如果字体名称中存在多个单词,推荐使用引号包裹
2.最后一项字体系列不需要引号包裹
3.网页开发时,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正确显示
样式的层叠问题
给同一个标签设置了相同的样式,此时样式会覆盖,后面的覆盖前面的
font复合属性
属性名:font(符合属性)
取值:
·font:style weight size family;
省略要求:
·只能省略前两个,如果省略了相当于设置了默认值
一个属性冒号后面属性多个值的写法——符合属性
但是要特别注意!!!顺序是固定的(倾斜 加粗 大小 字体样式)
文本缩进
属性名:text-indent
取值(两种方法):
·数字+px
·数字+em(推荐:1em=当前标签的font-size的大小)
缩进两个字的大小
文本水平对齐方式
属性名:text-align
取值:
属性值 效果
left 左对齐
center 居中对齐
right 右对齐
cente可以让文本、span标签、a标签、input标签、img标签水平居中,但要需要给以上元素的父元素设置。
照片就是img即照片的父类是body
新闻标题被h1包裹,所以h1是“新闻标题”的标签
文本修饰
属性名:text-decoration
取值:
属性值 效果
underline 下划线(常用)
line-through 删除线
overline 上划线
none 无装饰线(常用)
行高
属性名:line-height
取值方式:
1.数字+px
2.倍数(当前标签font-size的倍数)
应用:
1.让当行文本垂直居中可以设置line-height:文本父元素高度
2.网页精准布局时,会设置line-height:1 可以取消上下间距
如果同时设置行高和font连写(font:style weight size/line-height family),注意覆盖问题
拓展
颜色常见取值
文字颜色:color
背景颜色:background-color
标签水平居中
margin:0 auto
如果人div、p、h 水平居中,直接给当前标签设置