中文识别语句：<meta charset="utf-8">有中文显示的html都需要有这句话。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
常用的Html元素有：
<title></title>（标题）
<p></p>（段落）
<body></body>(主体部分)
<br/> 就是没有关闭标签的空元素（<br/> 标签定义换行）。
<a href="default.htm”></a>(链接元素)
当CSS乱入时要用到<style></style>
现在正式开始CSS的学习
1.id 和 class 选择器
id选择器使用标准：
<style>
#para1
//定义一个名为para1
的id类型
{
text-align:center;
color:red;
}
</style>
<p id="para1">Hello World!</p>
class选择器使用标准
（1）
<style>
.center //定义一个名为center
的class
{
text-align:center;
}
</style>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
（2）
<style>
p.center
//定义一个名为center
的专属于p元素的class
{
text-align:center;
}
</style>
<p class="center">This paragraph will be center-aligned.</p>
2.CSS的样式表插入
插入样式表的方法有三种:
- （1）外部样式表
- <head>
<link rel="stylesheet" type="text/css" href="mystyle.css”>//mystyle.css是外部样式
</head>
//先定义一个mystyle.css样式表存储，使用时如上方法调用。
- （2）内部样式表
- <head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head> - //内部插入<style></style>在里面进行CSS样式编辑,可以定义多种元素样式。
- （3）内联样式
- <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
- //在单独元素里面进行样式设置
（4）多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
3.
CSS的背景
CSS 属性定义背景效果:
- background-color //背景颜色
- background-image //背景图片
- background-repeat //背景样式（水平或垂直平铺、或不平铺）
- background-attachment//背景附着：定义背景图片随滚动轴的移动方式
- background-position//背景图片位置
（1）背景颜色
CSS中，颜色值通常以以下方式定义:
- 十六进制 - 如："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 颜色名称 - 如："red"
定义方式：background-color:#b0c4de;
background-color:rgb(255,0,0)
;
background-color:red
;
（2）背景图片定义：
background-image:url('paper.gif');
（3）背景样式：
background-image:url('gradient2.png');
background-repeat:repeat-x; //
一般使用background-repeat:repeat-x;使图片水平平铺；no-repeat不平铺
（4）背景附着
取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承
初始值: scroll
继承性: 否
适用于: 所有元素
background:背景.attachment:附着.
（5）背景位置
background-position:right top;//
表示图片在右上部分
总结：
使用时可以进行简写：background:#ffffff url('img_tree.png') no-repeat right top;表示背景颜色是白色、背景图片为’img_tree.png’；不平铺；图片位置在右上。。。。
4.
CSS的文本格式
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
（1）
color：
定义方式：与背景颜色使用一致。
（2）
direction：文本方向
| ltr | 默认。文本方向从左到右。 |
| rtl | 文本方向从右到左。 |
| inherit | 规定应该从父元素继承 direction 属性的值。 |
（3）
letter-spacing：文本字符间距
定义方式：letter-spacing:2px;
| normal | 默认。规定字符间没有额外的空间。 |
| length | 定义字符间的固定空间（允许使用负值）。 |
| inherit | 规定应该从父元素继承 letter-spacing 属性的值。 |
（4）
line-height：
定义方式：line-height:200%;（%）
line-height: 10px；（length）
line-height: 2；（数字）
| normal | 默认。设置合理的行间距。 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
（5）
text-align：
定义方式：text-align:right
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
（6）
text-decoration
定义方式：text-decoration:overline;线的颜色定义：text-decoration-color: red（
but：
几乎所有的主流浏览器都不支持 text-decoration-color 属性。
注意：Firefox 支持另一个可替代该属性的属性，即 -moz-text-decoration-color 属性。
）
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
（7）
text-indent
定义方式：xt-indent:50px;
| length | 定义固定的缩进。默认值：0。 |
| % | 定义基于父元素宽度的百分比的缩进。 |
| inherit | 规定应该从父元素继承 text-indent 属性的值。 |
（8）
text-shadow
定义方式：text-shadow:2px 2px 8px #FF0000;（文字阴影模糊、模糊颜色为#FF0000）调节像素效果也不同
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
（9）
text-transform
定义方式：text-transform:uppercase;
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
| inherit | 规定应该从父元素继承 text-transform 属性的值。 |
（10）
unicode-bidi
定义方式：
unicode-bidi: normal|embed|bidi-override|intitial|inherit;
| normal | 默认。不使用附加的嵌入层面。 | |
| embed | 创建一个附加的嵌入层面。 | |
| bidi-override | 创建一个附加的嵌入层面。重新排序取决于 direction 属性。 | |
| initial | 设置该属性为它的默认值。请参阅 initial。 | |
| inherit |
从父元素继承该属性。请参阅 inherit。
|
（11）
vertical-align
定义方式：vertical-align:text-top;
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
（12）
white-space
定义方式：white-space:nowrap
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
（13）
word-spacing
定义方式：word-spacing:30px
| normal | 默认。定义单词间的标准空间。 |
| length | 定义单词间的固定空间。 |
| inherit | 规定应该从父元素继承 word-spacing 属性的值。 |
这篇博客是我的JS学习笔记-CSS篇 先整理这些，以后会继续更新。
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
