一个实例

菜鸟教程(runoob.com)



CSS 实例!

这是一个段落。

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中&＃xff0c;是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

CSS 规则由两个主要的部分构成&＃xff1a;选择器&＃xff0c;以及一条或多条声明:

h1 { color : blue ; font-size : 12px ;}

选择器 { 声 明 ; 声 明 ;}
选择器 { 属性 : 值 ; 属性 : 值 ;}

CSS 注释

注释是用来解释你的代码&＃xff0c;并且可以随意编辑它&＃xff0c;浏览器会忽略它
CSS注释以 "/" 开始, 以 "/" 结束

style放在html的任何地方都会生效,一般都放到里

CSS Id 和 Class

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义
id属性不要以数字开头
实例:

para1

{
text-align:center;
color:red;
}

Hello World!

这个段落不受该样式的影响。

//class 选择器
class 选择器用于描述一组元素的样式&＃xff0c;class 选择器有别于id选择器&＃xff0c;
class可以在多个元素中使用
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示
类名的第一个字符不能使用数字
实例1:
.center
{
text-align:center;
}

标题居中

段落居中。

也可以指定特定的HTML元素使用class
实例2:
p.center
{
text-align:center;
}

这个标题不受影响

这个段落居中对齐。

四种 css 选择器有修饰上的优先级

直接在标签内部写css代码>id>class>style,就近原则

CSS 创建

插入样式表

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

优先级

内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
注意&＃xff1a;如果外部样式放在内部样式的后面&＃xff0c;则外部样式将覆盖内部样式

CSS 背景

CSS 属性定义背景效果

background-color
background-image
background-repeat
background-attachment
background-position

背景颜色

CSS中&＃xff0c;颜色值通常以以下方式定义:
十六进制 - 如&＃xff1a;"#ff0000"
RGB - 如&＃xff1a;"rgb(255,0,0)"
颜色名称 - 如&＃xff1a;"red"

背景图像

background-image 属性描述了元素的背景图像.
默认情况下&＃xff0c;背景图像进行平铺重复显示&＃xff0c;以覆盖整个元素实体

背景图像 - 水平或垂直平铺

水平平铺:
body
{
background-image:url(&＃39;gradient2.png&＃39;);
background-repeat:repeat-x;
}
垂直平铺:
body
{
background-image:url(&＃39;gradient2.png&＃39;);
background-repeat:repeat-y;
}
不平埔:
body
{
background-image:url(&＃39;img_tree.png&＃39;);
background-repeat:no-repeat;
}

背景图像- 设置定位

body
{
background-image:url(&＃39;img_tree.png&＃39;);
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
position属性值中后面的top是图片与文字的对齐方式

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码&＃xff0c;我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 "background":
实例:
body {background:#ffffff url(&＃39;img_tree.png&＃39;) no-repeat right top;}
当使用简写属性时&＃xff0c;属性值的顺序为&＃xff1a;:
background-color
background-image
background-repeat
background-attachment
background-position

background-attachment属性值

值说明
scroll 背景图片随页面的其余部分滚动,这是默认
fixed 背景图像是固定的,即无论网页怎么滚动,图片在浏览器中位置不变
inherit 指定background-attachment的设置应该从父元素继承

CSS 文本格式

文本颜色

RGB红绿蓝
对于W3C标准的CSS&＃xff1a;如果你定义了颜色属性&＃xff0c;你还必须定义背景色属性

文本的对齐方式

默认左对齐
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
当text-align设置为"justify"&＃xff0c;每一行被展开为宽度相等&＃xff0c;
左&＃xff0c;右外边距是对齐&＃xff08;如杂志和报纸&＃xff09;

文本修饰

text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线
也可以这样装饰文字:
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
我们不建议强调指出不是链接的文本&＃xff0c;因为这常常混淆用户

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母
可用于所有字句变成大写或小写字母&＃xff0c;或每个单词的首字母大写
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本缩进

文本缩进属性是用来指定文本的第一行的缩进
p {text-indent:50px;}

字符之间的空间

letter-spacing:2px;

行间距

line-height:150%;

单词之间的空白空间

word-spacing:30px;

在元素内禁用文字环绕

white-space:nowrap;

垂直对齐图像

默认是bottom,图片的底部与文本对应
vertical-align:text-top;
vertical-align:text-bottom;

添加文本阴影

h1 {text-shadow:2px 2px #FF0000;}

CSS 字体

字体系列

font-family 属性应该设置几个字体名称作为一种"后备"机制&＃xff0c;
如果浏览器不支持第一种字体&＃xff0c;他将尝试下一种字体

CSS font-family

这一段的字体是 Times New Roman

这一段的字体是 Arial.

字体样式

这个属性有三个值&＃xff1a;
正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜&＃xff08;和斜体非常类似&＃xff0c;但不太支持&＃xff09;
实例:
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

字体大小

绝对大小&＃xff1a;
设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小&＃xff1a;
相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
如果你不指定一个字体的大小&＃xff0c;默认大小和普通文本段落一样&＃xff0c;
是16像素&＃xff08;16px&＃61;1em&＃xff09;

设置字体大小像素

h1 {font-size:40px;}

用em来设置字体大小

h1 {font-size:2.5em;} /* 40px/16&＃61;2.5em */

使用百分比和EM组合

在所有浏览器的解决方案中&＃xff0c;设置

元素的默认字体大小的是百分比&＃xff1a;
实例:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

设置字体加粗

p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

CSS 链接

链接样式

a:link {color:#000000;} /* 未访问链接/
a:visited {color:#00FF00;} / 已访问链接 /
a:hover {color:#FF00FF;} / 鼠标移动到链接上,聚焦 /
a:active {color:#0000FF;} / 鼠标点击时 */

文本修饰

text-decoration 属性主要用于删除链接中的下划线&＃xff1a;
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
注意:hover必须在:link和 a:visited之后定义才有效
注意:active必须在hover之后定义是有效的

背景颜色

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

• 除了改变以上的属性,还可以添加更多属性,自由添加

创建链接框的实例

菜鸟教程(runoob.com)



这是一个链接

CSS 列表

列表

在HTML中&＃xff0c;有两种类型的列表&＃xff1a;
无序列表 - 列表项标记用特殊图形&＃xff08;如小黑点、小方框等&＃xff09;
有序列表 - 列表项的标记有数字或字母

不同的列表项标记

list-style-type属性指定列表项标记的类型是&＃xff1a;
无序列表实例:
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;} //小写字母

作为列表项标记的图像

要指定列表项标记的图像&＃xff0c;使用列表样式图像属性&＃xff1a;
ul
{
list-style-image: url(&＃39;sqpurple.gif&＃39;);
}

列表 -简写属性

可以按顺序设置如下属性&＃xff1a;
list-style-type
list-style-position (有关说明&＃xff0c;请参见下面的CSS属性表)
list-style-image

CSS 表格

表格边框

指定CSS表格边框&＃xff0c;使用border属性

折叠边框

border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开&＃xff1a;
实例
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

表格宽度和高度

Width和height属性定义表格的宽度和高度
table {width:100%;}
th{height:100px;}
td{height:50px}

表格文字对齐

表格中的文本对齐和垂直对齐属性
text-align属性设置水平对齐方式,向左,右,或中心
td{text-align:right;}
垂直对齐属性设置垂直对齐,比如顶部,底部或中间&＃xff1a;
td{height:50px;vertical-align:bottom;}

表格填充

如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性:
td{padding:15px;}

表格颜色

下面的例子指定边框的颜色&＃xff0c;和th元素的文本和背景颜色&＃xff1a;
table, td, th{border:1px solid green;}
th{background-color:green;color:white;}