CSS（二）：常用CSS样式[文字、文本、背景......]

文字样式

连写格式：font:style weight size family;

font-style字体样式

font-style: italic（倾斜）/  normal （默认值） 正常 ;

font-weight字体粗细

font-weight: bold (加粗) / lighter (变细);

font-size字体大小

font-size: 24px;

浏览器默认文字大小是16px

font-family字体

font-family: '楷体'/'黑体'/'宋体'/'微软雅黑'…;

网页开发时，尽量使用系统常见自带的字体，保证不同用户浏览器都能正常显示

文本样式

text-indent缩进

text-indent: 数字+em  

(1em=当前标签的font-size的大小,2em就是两个font-size的大小)

text-align水平对齐方式

text-align: left  (居左) / center  (居中) / right  (居右)

text-align 可以让 a img input span 这些元素水平居中,但要给这些元素的父元素加text-align属性

vertical-align垂直对齐方式

vertical-align：
   baseline (默认) 基线对齐  /  
   top 顶部对齐  /  
   middle 中部对齐  /  
   bottom 底部对齐

用于行内/行内块元素

垂直对齐方式也可以改变基线
浏览器文字类型元素排版中存在用于对齐的基线
解决行内/行内块元素垂直对齐问题
可以在项目中解决得问题:

• 图片和文字得垂直对齐
• 文本框和按钮无法对齐问题
• input和img无法对齐问题
• div中文本框，文本框无法贴顶得问题
• div不设置高度由img标签撑开，img标签下面会存在额外间隙问题

text-decoration文本修饰

text-decoration: 
   underline 下划线 (常用) /  
   line-through 删除线(不常用)  /  
   overline  上划线 (几乎不用)  /   
   none 无装饰线  (最常用)

开发中使用text-decoration: none; 清除a标签默认的下划线

line-height行高

控制一行的上下间距

line-height:数字+px   (当前标签font-size的倍数)  

//清除原有间距
<style>* {margin: 0;} </style>

给行内元素、行内块元素设置
当让单行文本垂直居中 line-height：文本元素的高度

text-shadow文字阴影

text-shadow：
   h-shadow（水平阴影的位置，负值（阴影在左边)，正值（阴影在右边))  
   v-shasow(垂直阴影的位置，负值(阴影在顶边)，正值（阴影在底边)) 
   blur(模糊的距离)   
   color(颜色)；

背景属性

background：color image repeat position；

背景图片和img的区别：背景图片就好比是墙纸，而img就是墙上挂的钟表

background-color背景颜色

颜色的表示方式
第一种：

background-color：red  yellow blue  green...	transparent透明

第二种:
十六进制 前2位代表红色，中间两位代表绿色，后两位蓝色 ;
取值范围 0-9，a-f
如：

background-color：#00ff00，简写 background-color：#0f0  
background-color：#f3f3f3，不能简写 

第三种：

background-color：rgb(200,212,0)   每一个的取值是0~255

background-image背景图片

background-image: url(./img/logo.png);

url是图片地址

background-repeat背景平铺

background-repeat: 
repeat  水平和垂直方向都平铺  /
repeat-x  水平方向都平铺  /
repeat-y 垂直方向都平铺  /
no-repeat  水平和垂直方向都不平铺

background-position背景位置

background-position：最多表示9个位置  
水平方向 left center right  
垂直方向 top center bottom
数字+px:0 0  相当于 x y轴

cursor光标类型

设置鼠标光标在元素上显示的样式

cursor：	
   default  默认值，通常是箭头  /
   pointer  小手效果，提示用户可以点击  /
   text    工字型，提示用户可以选择文字  /
   move   十字光标，提示用户可以移动

border-radius:边框圆角

让盒子四个角变得圆润

border-radius: 数字+px / 百分比；

四个方位，从左上角开始，然后顺时针赋值，没有赋值的找对角
正圆，盒子必须是正方形，圆角为盒子边框的一半
胶囊按钮，长方形，圆角是盒子高度的一半

overflow溢出部分显示效果

溢出部分：盒子内容部分 所超出盒子范围的区域
场景：控制内容溢出部分的显示效果: 如：显示，隐藏，滚动条…

overflow：
   visible  默认值，溢出部分可见  /
   hidden   溢出部分隐藏  /
   scroll   无论是否溢出，都显示滚动条  /
   auto    根据是否溢出，自动显示或隐藏滚动条

display:none元素本身隐藏

visibility:hidden   隐藏元素本身，在网页中占位置
display:none        隐藏元素本身，在网页中不占位置 

开发中经常使用display属性完成元素的显示隐藏

display:none（隐藏） 
display：block(显示)

opacity透明

opacity：0-1之间的数字

0 完全透明
1 完全不透明
会让元素整体透明，包括里面的内容、文字