字体样式，文本样式，背景样式，边框样式，线性渐变，伪类选择器，css权重

`## 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">

CSS权重

选择器	选择器的权重
继承或*	0，0，0，0
元素选择器或者标签选择器	0，0，0，1
类选择器或者伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style	1，0，0，0
important重要的	无穷大