1,在html中嵌入css样式的第一种方式:
(1)内联嵌入方式
内联嵌入方式:在HTML中大部分的节点都是有style属性的,style属性可以指定所在标签的css样式--> 内联嵌入方式的语法规则: 第一种编写方式: <标签 style="样式属性名 : 样式属性值; 样式属性名 : 样式属性值; 样式属性名 : 样式属性值; 样式属性名 : 样式属性值;"></标签> 第二种编写方式: <标签 style="样式属性名 : 样式属性值1 样式属性值2 样式属性值3; 样式属性名 : 样式属性值1 样式属性值2 样式属性值3;"></标签> (2)定义内部样式块对象
(3)链入外部样式文件
<link type="text/css" rel="stylesheet" href="css/common.css" />
2,/*鼠标悬停在span标签上,字体加粗,字体红色注意: span:hover在编写的时候,冒号左右都不能出现空格font-weight : bold; 表示粗体字cursor : pointer; 表示光标呈现手的形状cursor : hand; 也是手的形状,但是火狐不支持。*/span:hover{ color:red; font-weight: bold; cursor: pointer; /*兼容性更好一些,所有浏览器都支持*/ /*cursor: hand;*/ /*IE和Chrome是支持的,但是FF不支持*/}
#div1{ width: 300px; height: 300px; background-color: #C4C4C4; /*display: none;*/ /*隐藏该元素*/ display: block ; overflow: scroll; /*超出边界之后显示滚动条*/}
>
3,CSS中的外补白margin
#div2{ width: 400px; height: 400px; border: 1px solid green; margin-top: 20px; margin-left: 20px; }
CSS中的内补白padding
#div1{ width: 300px; height: 300px; border: 1px solid red; padding-top: 10px; padding-left: 10px; }
4,text-decoration
#baiduHref{ text-decoration: none; /*text-decoration: line-through ;//中间 /* text-decoration: underline;//下面*/ /* text-decoration: overline;//上面*/}
5,css的列表样式
ul{ list-style-type: none; /*无样式*/}
6,#div3{ width: 300px; height: 200px; border: 1px solid green; position: absolute; /*这里的参照物是整个浏览器窗体*/ top: 100px; left: 100px; }
position: relative; /*这里的相对定位参照物是div2*/