一 、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;
}