CSS：基本样式
2016-12-07 本文已影响0人
Josaber
CSS
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
层叠次序
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
从上向下优先级越来越高。
CSS语法
selector{property: value; ... ...}
其中选择器分为：
- id选择器
- class选择器
- 元素选择器
- 属性选择器
- 后代选择器
- 子元素选择器
- ... ...
CSS使用
- 外部样式表（建议）：
<head>
<link rel="stylesheet" type="text/css" href="*.css" />
</head>
- 内部样式表：
<head>
<style type="text/css">
body {background-image: url("images/bg.jpg");}
</style>
</head>
- 内联样式表（不建议）：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
CSS常见样式
- 背景：background/background-image/background-color/...
- 文本：text-align/text-decoration/...
- 字体：font/font-family/font-style/font-weight/font-size/...
- 链接：a:link/a:hover/a:visited/a:active
- 列表：list-style/list-style-image/list-style-position/...
- 表格：border-spacing/...
- 尺寸：width/height/max-height/min-height/...
- 边距：padding/margin/...
- 定位：position/float
- 显示：display/visibility/color/...
- 边框：border/border-radus/...
- ... ...
更多CSS样式参见W3School。
示例
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
.bold{font-weight: bold;}
#name{border: 1px;}
p.serif{font-family:"Times New Roman",Georgia,Serif}
p.sansserif{font-family:Arial,Verdana,Sans-serif}
p.dotted {border-style: dotted}
</style>
<footer> Copyright: Joshua 2016 </footer>
