css 与HTML结合。他们的优先级:内联式 > 嵌入式 > 外部式
1.外部关联CSS.首先在<head></head>之间加入<link href="CSS/style.css" rel="stylesheet" type="text/css">,新建文件CSS/style.css,里面另外编写代码如 对标签span{color:red;}.
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
2.通过类classs,和id来关联。
span.publiccalssroom{
color:red;
}
<span class="publiccalssroom">公开课</span>
<p>到了三年级下学期时,我们班上了一节<span id="setGreen">公开课</span>,
#setGreen{
color:red;
}
3.粗体;font-weight:bold;斜体:font-style:italic;下划线:text-decoration:underline;横贯线 text-decoration:line-through;单词间距: word-spacing:6px;,字母间距:letter-spacing:6px;块状元素中的文本、图片设置居中样式div{text-align:center;}.只有下边框border-bottom:其他三边:
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;。
填充边框。
http://img.mukewang.com/539fbb3a0001304305570259.jpg
内容与边框之间的距离称之为填充:padding-top:20px;padding-right:10px; padding-bottom:15px;padding-left:30px;分别上下左右填充。
元素与元素之间距离边界,即div盒子下边界与另一元素的距离div{margin:20px 10px 15px 30px;}上、右、下、左。
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
来表示。
浮动模型,两个盒子进行并行排列。#div1{float:left;} #div2{float:right;}