learning website——菜鸟教程
1. CSS语法
- CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
- 选择器通常是需要改变样式的 HTML 元素
- 每条声明由一个属性和一个值组成
- 每个属性有一个值。属性和值被冒号分开
- CSS声明总是以分号(;)结束，声明总以大括号({})括起来
- CSS注释以 /* 开始, 以 */ 结束
2. ID和Class选择器
- HTML元素以ID属性来设置id选择器,CSS 中 ID 选择器以 “#” 来定义
- ID属性不要以数字开头
- class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
- 类名的第一个字符不能使用数字
- class 选择器有别于ID选择器，class可以在多个元素中使用
3. 创建
- 每个页面使用
<link>标签链接到样式表 ，<link>标签在（文档的）头部
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
//浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档
</head>
- 文件不能包含任何的 html 标签 ，且 应该以 .css 扩展名进行保存
【 不要在属性值与单位之间留有空格 】
- 可以使用
<style>标签在文档头部定义内部样式表
- 使用内联样式，需要在相关的标签内使用样式（style）属性 ， Style 属性可以包含任何 CSS 属性
- （内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
- 如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式
- 内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器
4. 背景
- 页面的背景颜色使用在
body的选择器中
- 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体
repeat-xrepeat-yrepeat-z
- 不平铺
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
- 定位
background-position
- 背景颜色的简写属性为 “
background”:
body {
background:#ffffff url('img_tree.png') no-repeat right top;}
background-imagebackground-repeatbackground-attachmentbackground-position
body {
background-attachment:fixed;}
//固定
5. Text（文本）
- 文本可居中或对齐到左或右,两端对齐
- 当
text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）
- 从设计的角度看
text-decoration属性主要是用来删除链接的下划线
a {
text-decoration:none;}
//text-decoration:overline; 上划线
//text-decoration:line-through; 中划线
//text-decoration:underline; 下划线
- 可用于所有字句变成大写或小写字母，或每个单词的首字母大写
//text-transform:uppercase; 所有字母大写
//text-transform:lowercase; 所有字母小写
//text-transform:capitalize; 每个单词的首字母大写
p {
text-indent:50px;}
h1 {
letter-spacing:2px;}
p.small {
line-height:70%;}
div.ex1 {
direction:rtl;}
//right to left
//left to right
p {
word-spacing:30px;}
p {
white-space:nowrap;}
img.top {
vertical-align:text-top;}
img.bottom {
vertical-align:text-bottom;}
h1 {
text-shadow:3px 3px #00ffff;}