注释
以/*开始,以*/结尾,如:/*要注释的内容*/。
CSS样式的引入方式
1. 外部样式表
外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head>区内,如下:
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
</head>
2. 内部样式表
内部样式表是把样式表放到页面的<head>区里,这些定义的样式就应用到页面中了,样式表是用<style>标记插入的:
<head>
<style type="text/css"> hr {color: sienna} p {margin-left: 20px}
body {background-image: url("images/back40.gif")} </style>
</head>
3. 内联样式
内联样式是混合在HTML标记里使用的,用这种方法可以很简单的对某个元素单独定义样式。
<p style="color: sienna;margin-left: 20px;">这是一个段落</p>
常用样式属性:
1. 文字样式
font-size设置字号
font-family设置字体
font-style设置字体样式(倾斜)
font-weight设置字体粗细
font设置综合字体属性
2. 文本样式
line-height设置行高、行与行之间的距离
text-indent设置首行缩进
text-decoration设置上、下划线、删除线
text-align设置水平对齐方式
3. 颜色
color:rgb (r, g, b) | #FFFFFF | colorname
4. 背景
background用于设置指定元素的背景色、背景图案等。
background-color:关键字 | RGB值 | transparent
background-image : url(*.jpg) | none
盒子模型
1. 边框
border-width: 边框粗细
border-style: 边框样式
border-color: 边框颜色
border:粗细 样式 颜色; 例:border:2px solid #ff33ee;
2. 内边距
padding:长度 | 百分比
padding-top、padding-right、padding-bottom:同上
padding:20px 30px 40px 60px;/*上|右|下|左*/
padding:20px 30px 40px; /*上|左右|下*/
padding:20px 30px; /*上下|左右*/
padding:20px; /* 上右下左均相同*/
3. 外边距
margin-top:20px; margin-right :20px;
margin-bottom :20px; margin-left :20px;
margin:10px; /* 4个边均为10px */
margin:10px 20px ; /* 上下|左右*/
margin:10px 20px 30px; /* 上|右左|下*/
margin:10px 20px 30px 40px; /* 上|右|下|左*/
选择器
1. 标签(元素)选择器
标签名称 { 属性 : 属性值; },例: h1 { color: blue; }
2. id选择器
#id选择器名称 { 属性 : 属性值; },例:#leftbox{ color: red; }
3. 类选择器
.类选择器名称 { 属性 : 属性值; },例:.center { text-align: center; }
4. 后代选择器
又称为包含选择器,可以选择作为某元素后代的元素。例:h1 em { color: red; },该样式会把h1元素后代中的em元素的文本设置为红色。
5. 子元素选择器
与后代选择器相比,子元素选择器(Child selector)只会选择作为某元素子元素的元素,而不会扩大到任意的后代元素。例:h1>strong { color: red; },该样式会把h1元素中子元素为strong元素的文本设置为红色。