内联:
<span style="color:red;font-size:10px;" >
text
</span>
嵌入:
<style type="text/css">
span{
color:red;font-size:10px;
}
</style>
外部:
<link href="style.css" rel="stylesheet" type="text/css">
其中 rel 属性用于定义链接的文件和HTML文档之间的关系。StyleSheet,的意思就是样式调用。
外部 <link> 标签位置一般写在 <head> 标签之内。
选择器{样式;} 标签的权值为 1,类选择符的权值为 10,ID选择符的权值最高为 100
.类名{css样式代码;} <!--类选择器-->
<span class="类名">胆小如鼠</span>
#ID名{css样式代码;} <!--ID选择器-->
<span id="ID名">公开课</span>
.food>li{border:1px solid red;} <!--子选择器-->
.food li{border:1px solid red;} <!--后代(包含)选择器-->
* {border:1px solid red;} <!--通用选择器-->
a:hover{color:red;} <!--鼠标滑过字体颜色变为红色-->
1.文字
font-weight
文字粗细程度,可取:
normal ,bold 或 数字
color
文字的颜色,可取:
#0000ff , rgb(255,0,0) , rgba(255,0,0,0.5)<!--多一位透明度--> 或 颜色名
text-align
文字水平对齐方式,可取:
center , left , right
font-family
字体,可取:
宋体 , 华文彩云 , Microsoft Yahei
font-size
字号,可取:
12px
font-style
字体样式,可取:
italic 斜体 ,
text-decoration
划线,可取:
underline 下划线 , line-through 删除线
text-indent
首行缩进,可取:
2em 2个字符
line-height
行高
1.5em 1.5个字符
letter-spacing、word-spacing
分别为字母之间的间距、单词之间的间距,后者对汉字不起作用,可取:
3px
2.边框
border:5px solid red;
按顺序设置如下属性:
border-width
线宽,可取:
thin medium thick 10px 细边框 中等边框 粗边框 10px
border-style
线的样式,可取:
dotted solid double dashed 点状 实线 双线 虚线
border-color
线的颜色,可取:
#0000ff , rgb(255,0,0) ,rgba(255,0,0,0.5)<!--多一位透明度--> 或 颜色名