css样式

字体样式

字体大小font-size：数字 + px  px：像素

字体粗细font-weight：正常normal加粗bold

        正常400   加粗700

字体样式font-style： 正常normal倾斜italic

字体类型：常见字体系

        列无衬线字体sans-serif

        特点：文字笔画粗细均匀，并且首尾无装饰

        场景：网页中大多采用无衬线字体

        常见该类别字体：黑体Arial

        衬线字体serif

        特点：文字笔画粗细不均，并且首尾有笔锋装饰

        场景：报刊书籍中应用广泛

        常见该类别字体：宋体Times New Roman

        等宽字体monospace

        特点：每个字母或文字的宽度相等

        场景：一般用于程序代码的编写，利于代码编写和阅读

        常见该类别字体：Consolas   fira code

font-family：具体字体1,具体字体2,具体字体3,具体字体4,...,字体类型

           具体字体名称："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……

           字体系列名称：sans-serif、serif、monospace等……

渲染规则：1、从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体

                  2、如果都不支持，则显示最后设置的字体系列的默认字体

        window：微软雅黑

        mac：苹方

注意点： 1、如果字体名称中存在多个单词，推荐使用引号包裹

                2、最后一项字体系列不需要引号包裹

                3、网页开发时，尽量使用系统自带字体，保证不同用户浏览网页都可以正确显示

样式的层叠问题：如果给同一个标签设置了相同的属性此时样式会覆盖（层叠）写在最下面的会生效

font属性的连写问题：1、顺序问题font: style weight size family

   稍微舒服swsf

2、省略问题 只能省略前两个如果省略了相当于设置了默认值

   省略的覆盖问题如果需要同时设置单独的属性和连写形式要么把单独的样式写在连写的下面要么把单独的样式写在连写的里面

文本样式

文本缩进：text-indent：数字 + px

             数字 + em   1em = 当前标签的font-size的大小

        注意点：不是独占一行的元素设置text-indent无效

文本水平对齐方式：text-align: 左对齐left   居中对齐 center  右对齐right

注意点:如果让文本水平居中，text-align:center给文本的父元素设置

文本修饰:text-decoration:下划线underline  删除线line-through 

没有效果none   用来清除a标签默认的下划线

拓展：水平居中方法的小总结

text-align：center；

1、文本

2、span标签、a标签

3、input标签、img标签

注意点：如果需要让以上元素水平居中，此时直接以上元素的父元素设置即可

margin：0 auto；

1、div、p、h（盒子）

注意点：直接给当前元素设置的

行高:line-height:数字+px   倍数（当前文字大小的倍数）

常见应用

1、line-height：文字父元素的高度，让单行文本垂直居中

2、设置line-height：1取消上下间距，精准布局时会使用

和font属性的连写形式:font：style weight size/line-height family

如果需要设置单独的样式和连写要么把单独的样式写在连写的下面要么把单独的样式写在连写的里面

背景相关属性

background-color 背景颜色

取值 关键字

 rgb表示法

 rgba表示法

 十六进制表示法

background-image 背景图片

取值 url( 图片的路径 )

background-repeat 背景平铺

取值  1、平铺 repeat

  2、不平铺 no-repeat

  3、沿着水平方向平铺 repeat-x

4、沿着垂直方向平铺 repeat-y

background-position 背景位置

取值  1、方位名词（最多只能表示9个位置）

  水平方向 left center right

  垂直方向 top center bottom

  2、数字+px（坐标）

  坐标系  原点（0,0） 盒子的左上角

x轴 水平向右

y轴 垂直向下

操作：将图片左上角与坐标点重合即可

连写形式  属性名 background

  属性值 单个属性值的合写，取值之间以空格隔开

  注意点 书写顺序 推荐：color image repeat position

  省略问题 按照你的需求省略

特殊情况 如果盒子的大小和背景图片一样大，此时可以直接写background：url();

如果需要设置单独的样式和连写

要么把单独的样式写在连写的下面

要么把单独的样式写在连写的里面

img标签和背景图片的区别

img标签

不设置宽高会显示默认宽高

div + 背景图片

需要给div设置宽高

因为背景图片只是一个css样式，不是html中的内容，不能撑开div标签