CSS基础教程
CSS简介
CSS概述
- CSS指层叠样式表（Cascading Style Sheets）
- 决定HTML元素如何显示
- 内容与样式分离
- 多个样式定义可层叠为一
层叠次序
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
CSS基本语法
CSS语法结构
CSS高级语法
选择器的分组
h1,h2,h3,h4,h5,h6 {
color: green;
}
继承
body {
font-family: Verdana, sans-serif;
}
<!-- 继承body中的属性 -->
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
<!-- 重写从body中继承的属性 -->
p {
font-family: Times, "Times New Roman", serif;
}
派生选择器
<!-- 只有h2标签中的strong才会是蓝色-->
h2 strong {
color: blue;
}
id选择器
<!-- id选择器 -->
#sidebar {
border: 1px dotted #000;
}
<!-- 利用id创建派生选择器 -->
#sidebar h2 {
font-size: 1em;
}
类选择器
<h1 class="center"></h1>
.fancy {
color: #f60;
}
.fancy td {
color: #f60;
}
td .fancy {
color: #f60;
}
td.fancy {
color: #f60;
}
属性选择器
[title]
{
color:red;
}
[title=W3School]
{
border:5px solid blue;
}
input[type="text"]
{
width:150px;
}
CSS创建
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式表
<head>
<style type="text/css">
p {margin-left: 20px;}
</style>
</head>
内联样式
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
CSS框模型
CSS框模型概述
- 类似android控件中margin和padding属性
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。