- 1、什么是CSS:指层叠样式表(Cascading Style Sheets)
- 2、样式定义该如何显示HTML元素。样式通常存储在样式表中。外部样式表通常存储在CSS文件中。多个样式可以层叠为一。CSS使用规则:有选择器和多条声明
h1 { color : bule ;font-size : 12px ; }
选择器 属性声明 值 属性声明 值
- 选择器:想要被改变的样式HTML元素。
- 声明由一个属性和一个值组成。属性是你希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
3、CSS注释: /*这是个注释*/
4、id选择器:以“#”来定义。为特定的HTML元素指定样式。
#fff { (属性)}
<p id="fff"> </p>
- class选择器:用于描述一组元素的样式,并可以在多个元素中使用。它以一个点‘.’号表示。(也可以指定特定的HTML元素)
.ffff { } <p class="ffff"> </p>
5、插入样式表的方法有三种:
a、外部样式表:用于多个页面,通过改变一个文件夹来改变整个站点的外观。每个页面使用<link>标签链接到样式表,它在头部。
b、内部样式表:单个页面需要特殊的样式,可以在文档头部使用<style>标签来定义样式表
c、内联样式:仅需要在一个元素应用一次时使用,在相关的标签内使用样式属性。
6、多重样式:某一属性在不同的样式表中被相同的选择器定义,则从更具体的样式表中被继承过来。
- 多重样式的优先级:内联样式>内部样式>外部样式>浏览器默认样式。(如果外部样式放在内部样式的后面,那么内部样式将被覆盖)
7、CSS背景:
背景颜色:在body的选择器中,background-color:#FF0000或rgb(255,0,0);
背景图像:在body的选择器中,background-image:url="";
水平或者垂直平铺:background-repeat:repeat-x;
设置位置与不平铺:background-repeat:no-repeat;(以左上角为顶点)
background-position:right top;
背景的简写属性:
body { background:#FF0000 url(' ') no-repeat right top;}
简写顺序:color image repeat attachment position
固定的背景图像:
background-attachment : fixed;
8、文本格式:
h1{text-align:center;} (居中)
p.date{text-align:right;} (靠右)
p.main{text-alingn:justify;} (两边对齐)
9、删除链接的下划线:
a { text-decoration : none }
10、装饰文字:
h1{ text-decoration : overline } (上划线)
h2{ text-decoration : line-through } (中划线)
h3{ text-decoration : underline} (下划线)
11、文本转换:
p.uppercase {text-transform:uppercase;} (大写)
p.lowercase {text-transform:lowercase;} (小写)
p.capitalize {text-transform:capitalize;} (首字母大写)
12、文本缩近:
p {text-indent:50px;}
13、字符之间的空间:
<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
14、行与行之间的距离:
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
15、文本排序:
{direction:rtl;}(从右到左)
文本阴影:
{text-shadow:2px 2px #FF0000;}
16、CSS字体:
通用字体系列 : 拥有相似外观的字体系统组合(如 "Serif" 或 "Monospace")
特定字体系列 : 一个特定的字体系列(如 "Times" 或 "Courier")
字体系列:
font-family 设置文本的字体,他设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。多个字体系列是用逗号分隔
字体样式:
{font-size:40px;}
{font-size:30px;}
{font-size:14px;}
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值:
{font-style:normal;} 正常显示文本
{font-style:italic;} 以斜体字显示的文字
{font-style:oblique;} 文字向一边倾斜(和斜体非常类似,但不太支持)
字体大小:
font-size 属性设置文本的大小。
{font-size:40px;}
{font-size:30px;}
{font-size:14px;}
1em的默认大小是16px
17、link链接:
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
注意: a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
18、列表:
ul.a {list-style-type:circle;} (空心圆标记,下面的都是标记)
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
list-style: 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image: 将图象设置为列表项标志。
list-style-position: 设置列表中列表项标志的位置。
list-style-position: 设置列表项标志的类型。
- 垂直对齐属性设置垂直对齐,比如顶部,底部或中间:
vertical-align:bottom;(底部)。
19、表格边框:由border定义
单个边框定义: border-collapse:collapse;
表格文本对齐: text-align设置水平对齐方式
表格颜色: border:(color)(边框颜色)
20、盒子模型:
Margin(外边距):清除边框外的区域,外边距是透明的。 Margin:(‘上右下左’可以有1~4个)
Border(边框):围绕在内边距和内容外的边框。
Padding(内边距):清除内容周围的区域,内边距是透明的。 Padding:(‘上右下左’可以有1~4个)
Content(内容):盒子的内容,显示文本和图像
21、边框样式: 由border-style定义
none:默认无边框
dotted: 定义一个点线边框dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
- 为边框指定宽度有两种方法:
1、可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
2、使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin(可自定义)。
- 边框颜色:
- 定义侧面不同的边框:
border-top(等)-style:(...) 或border-style:(‘上右下左’||‘上(左右)下’||‘(上下)(左右)’)
22、轮廓:
outline-style:轮廓属性。
outline-style:轮廓颜色。
outlline-style:轮廓宽度。
23、分组:选择器用逗号分开。
24、嵌套选择器:适用于选择器内部的选择器的样式。
25、尺寸:
height:设置元素的高度。
width:宽度。
line-height:行高
min(max)-height(width):最小(最大)高度(宽度)。
26、显示:
- 隐藏元素 :
- display:none:会影响布局。
- visibility:hidden:不会影响布局
- 块级元素(block)特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
- 内联元素(inline)特性:
和相邻的内联元素在同一行;
(参考网站:http://www.runoob.com/css/css-tutorial.html)