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-x
repeat-y
repeat-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-image
background-repeat
background-attachment
background-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;}