本文接着介绍字体和文本样式、谷歌调试工具和拓展
三、字体和文本样式
1、字体样式
1、字体大小:属性名为font-size 取值为数字+px,在谷歌浏览器中默认字号为16
2、字体粗细:属性名为font-weight 取值有两种表达方式,用关键字表示,正常字体大小取值为normal,加粗取值为bold;纯数字表示法正常大小取值为400,加粗取值为700
3、字体样式(是否倾斜):属性名为font-style,若不倾斜取值为normal,倾斜取值为italic
4、字体类型:属性名为font-famliy
<style>
div{font-family:微软雅黑,黑体,sans-serif;}
</style>
该段代码意为:如果用户电脑没有安装微软雅黑,按黑体显示,如果没有安装黑体,就按任意一种无衬线字体显示;
无衬线字体:sans-serif;衬线字体:serif;等宽字体:monospace;
5、样式的层叠问题
- 给同一标签设置了相同的样式,浏览器如何渲染?
- 样式会层叠(覆盖),写在下面的生效
CSS层叠样式表:表示样式可以一层层的层叠覆盖
<style>
p{color:red;
color:blue;}
</style>
p标签将显示蓝色
6、font连写
取值:font:style weight size family
各属性间以空格隔开,如果要省略只能省略前两个
一个属性冒号后书写多个值——复合属性
2、文本样式
1、文本缩进:属性值为text- indent
取值为数字+px或者数字+em(1em=当前标签的font-size大小)
2、文本水平对齐方式:text-align
属性值为left,即左对齐;center即为居中对齐;right即为右对齐;
- text-align:center能让哪些元素水平居中
- 文本、span标签和a标签、input标签和img标签
- 如果需要让以上元素水平居中,text-align:center需要给以上元素的父元素设置
3、文本修饰:text-decoration
属性值:underline(下划线,常用),line-through(删除线),overline(上划线,几乎不用),none(无装饰线)
开发中用text- decoration:none去除a标签的下划线
3、行高
控制一行的上下间距,line-height
取值:数字+px或者倍数(纯数字,当前font-size倍数)
行高=上下间距+上间距+下间距
取消上下间距:line-height设置为1
如果同时设置了行高和font连写,对于覆盖问题,可以用:
font:style weight size/line-height famliy
四、谷歌调试工具
常用的是谷歌浏览用f12键检查,查看CSS代码进行查错
五、拓展:颜色常用取值
background-color 背景颜色,填充元素的背景
颜色表示方式:
- 关键词(预定义的各颜色):red、blue
- RGB(红绿蓝三原色,每项取值为0~255)
- RGBA(A表示透明度,取值为0~1,RGB同上)
- 十六进制表示法,#开头,共六位数,将数字转换成十六进制表示,两两组合的取值范围为0~255
六、标签水平居中
margin:0 auto;
——————
CSS入门篇到这里就结束啦