`## CSS入门基础（二）
字体样式
字体类型 font-family
字体大小 font-size
字体粗细 font-weight 100-700 400=normal 700=bold
字体得风格 font-style
符合属性 font-style font-weight font-size font-family
文本样式
color 字体颜色 支持三种
text-decoration 字体得修饰 （a标签去掉下划线）
<style>p {/* 文本修饰underline 下划线 (常用)line-through 删除线(不常用)overline 上划线 (几乎不用)none 无装饰线 (最常用)开发中使用text-decoration: none; 清除a标签默认的下划线*/text-decoration: overline;}a {/* 无装饰线 */text-decoration: none;}</style>
text-align 文本格式 居中 左对齐 右对齐
line-height 行间距
text-index ??em 首行缩进
text-shadow;水平阴影，垂直阴影，模糊的距离，以及阴影的颜色 ; 给文本添加阴影:
text-overflow :文本溢出属性指定应向用户如何显示溢出内容
属性：ellipsis 溢出部分显示省略号
clip 溢出部分不显示
word-wrap:break-word 允许对长的不可分割的单词进行分割并换行到下一行。
背景样式
background-image 通过background-image属性添加背景图片,不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
div{background-image:url("./a.png");background-repeat:no-repeat;/*背景图片不重复 平铺*/background-repeat:repeat-x;/*在x轴上重复*/background-positioncolor:#ccc; /*背景图片的层级比背景颜色得层级高*/background-position:20px 80px; /*x轴 y轴*/}
background: url(…) right bottom no-repeat, url(…) left top repeat;(允许添加多个背景，且对多个背景设置属性)
#example1 {background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;}
background-size 指定背景图像的大小
div /* 重置背景图象 */{background:url(img_flwr.gif);background-size:80px 60px;background-repeat:no-repeat;}div /*伸展背景图像完全填充内容区域*/{background:url(img_flwr.gif);background-size:100% 100%;background-repeat:no-repeat;}
background-origin 属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
边框样式
border-radius 属性被用于创建圆角 例如：border-radius:25px;
box-shadow 属性被用来添加阴影 例如 ：box-shadow: 10px 10px 5px #888888;
border-image 属性允许指定一个图片作为边框
border-image-repeat（用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。）
线性渐变
线性渐变 语法 ：background-image: linear-gradient(direction, color-stop1, color-stop2, …);
使用角度 语法：background-image: linear-gradient(angle, color-stop1, color-stop2);
设置形状 语法：它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse
#grad {background-image: linear-gradient(#e66465, #9198e5);/*从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：*/}#grad {height: 200px;background-image: linear-gradient(to right, red , yellow); /*从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：*/}#grad {height: 200px;background-image: linear-gradient(to bottom right, red, yellow);/*从左上角到右下角的线性渐变：*/}#grad {background-image: linear-gradient(-90deg, red, yellow); /*带有指定的角度的线性渐变：*/}#grad {background-image: linear-gradient(red, yellow, green);/*带有多个颜色从上到下得渐变*/}#grad {background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); /*一个带有彩虹颜色和文本的线性渐变*/}#grad {background-image: radial-gradient(circle, red, yellow, green);/*形状为圆形的径向渐变*/}
伪类选择器
a:link 未访问过得链接
a: visited 选择点击得链接
a:hover 鼠标经过
a:active 鼠标按下没有松开时
input:focus 聚焦
a:link {color: red}a:visited; {color: yellow}a:hover {color: blue}a:active {color: orange}input:focus{background-color:red}<a href="#"> 这是一个a标签 </a><input type="text">
