css基础
1:缩写方法:p{ color : #ff0000}===> p {color : #foo}。
2:两种方法实现rgb p{color : rgb(255,0,0);}==>p{color: rgb(100%,0%,0%)}
3:若干单词需要加引号 p{font-family: "snas serif"}
4:每行结束加分号。 p {
text-align: center;
color: black;
font-family: arial;
}
5:单独css对大小写不敏感,但是和html一起工作涉及class和id名称大小是敏感的。
6:选择器分组:h1,h2,h3,h4,h5,h6{ color: green; } 同时命名标题都是一种颜色。
7:id 选择器,id 选择器以 "#" 来定义。
#red{color:red;}
#green{color:green;}
html中 <p id = "red">这个段落是红色。</p>
8:CSS 类选择器 .center{text-align: center}
html中 <h1 class = "center">
This heading will be center-aligned
</h1>
和 id 一样,class 也可被用作派生选择器:.fancy td{color: #f60;background: #666;}
元素也可以基于它们的类而被选择:td.fancy{color: #f60;background: #666;}
9:CSS 属性选择器-对带有指定属性的 HTML 元素设置样式。
10:外部样式表 浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
内部样式表
hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}<head>
<style type = "text/css">
p{margin-left:20px;}
body{background-image:url("images/backs......gif");}
</style>
</head>
内联样式
<p style = "color: sienna;margin-left:20px">
This is a paragraph
</p>
11:即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。以内部样式为主。
hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}