css小白入门基础

一 、css编写方式

编写css的三种方式：内联样式（行内样式）、内部样式、外部样式
内联样式直接在标签中插入style，如下图：

内部样式在head中写<style>,如下图：

外部样式则是在head中庸link引入后缀为.css的文件，如下图：

！！！样式有优先级,分别为：内联样式>内部样式>外部样式，优先级高设置的样式会覆盖优先级低的样式

二 、css基础样式

1.入门常用css样式：

width:500px;  /*设置宽度*/
height:400px;  /*设置高度*/
color：red;  /*设置颜色*/
line-height:100px;  /*设置行高*/
text-align:left;  /*文本对齐方式*/
background-color：blue;  /*设置背景颜色*/
background-image:url();  /*设置背景图片*/

2.入门常用字体样式：

font-size: 50px;  /* 字体大小 */
font-family: '宋体';   /* 字体风格  */
font-style: italic;   /* 字体倾斜 */
font-weight:lighter;  /* 字体粗细  bold 粗 lighter 细 */
font:  italic bold 5px '宋体';  /* 字体复合属性简写顺序 */

3.入门超链接样式：

text-decoration: none;  /* 去下划线 */
text-decoration: overline;  /* 在上方加一条线 */
text-decoration:underline;  /* 默认下划线 */
text-decoration: line-through;  /* 字中间加删除线 */
cursor: pointer;  /* 超链接的指针 */
cursor: default;  /* 默认手势 */
cursor:move;  /*十字箭头*/

4.入门超链接伪类样式：

伪类分别有：hover、link、visited、active
注：需按照访问前、后的顺序设置样式 否则可能失效

a:link {/* 没用访问链接的时候样式 */
    background-color:#3333;
    color: darkgoldenrod;
}
a:visited{/* 访问链接过后的样式 */
    background-color:blue;
    color: aqua;
}

a:hover{ /* 鼠标经过显示的效果 */
    color: steelblue;
}
a:active{/* 鼠标点击时候的样式 */
    background-color: yellowgreen;
    color: tomato;
}