CSS样式 cascading style sheet
层叠 样式 表

Html 是建房子 搭建前端页面
css 是装修房子 美化页面

1.行内样式表

style属性 可以应用到所有的标签中(注意:双标签是放在开始标签中,单标签是放在/前面)
重点: 格式:
<标签名 style属性="样式名:样式值;"></标签名>

例:<b style="background-color: #09C; color: #C30; font-size: 24px;">冯仁斌</b>

常用的样式名和样式值:
1、样式名:
background-color 改变背景颜色
样式值:
三种取值颜色 十六进制:样色值 十进制:rgb三原色 英语单词:red,pink......

2、样式名:
color 改变字体颜色
样式值:
三种取值颜色 十六进制:样色值 十进制:rgb三原色 英语单词:red,pink......
3、样式名:
font-size 改变字体的大小
样式值:
1.单位:像素 px 常用 注意:页面中默认的字体大小为16px
2.单位:百分号 %
3.单位:相对单位 em 换算:1em=16px; 2em=32px;
%、px、em的用法:
<b style="background-color: #09C; color: #C30; font-size: 150%;">冯仁斌</b><br/>
<b style="background-color: #09C; color: #C30; font-size: 24px;">李吉东</b><br/>
<b style="background-color: #09C; color: #C30; font-size:2em;">李吉东</b><br/>

html和css对比:
1.html的属性名和属性值之间用=等号隔开
css的样式名和样式值之间用:冒号隔开
2.html的属性名和属性名之间用空格隔开
css的样式名和样式名用;分号隔开
3.html的属性值用双引号""单独引起来
css的样式值什么都不加

2.内嵌样式表

注意:style标签必须嵌套在head标签中使用。
属性:
type
属性值:
text/css 意思:style标签中嵌套的内容是普通文本,属于css样式。

格式:
<head>
<style type="text/css">
标签名{
样式名:样式值;
...........
}
</style>
</head>

例题:<html >
<head>
<title>无标题文档</title>
<style type="text/css">
p{
background-color:#C03;
font-size:24px;
}
b{
background-color:#F00;
font-size:16px;
}
</style>
</head>

<body style="background-color:#93C">

<b>123457</b>
<b>456789</b>
<b>13568</b>
yonghu <input style="background-color:#000"/><br/><br/><br/>

<p>程小白二班</p>
</body>
</html>

注意:内嵌样式与行内样式只能选择一个!!!

选择器:

1.标签选择器
格式:
标签名{样式名:样式值;}
举例:
<head>
<style type="text/css">
标签名{
样式名:样式值;
...........
}
例题: <head>
<title>无标题文档</title>
<style type="text/css">
h1{
color:#933;
}

</style>
</head>

<body>
<h1>tyuio;</h1>
</body>

2.类选择器 类:class属性 用的多 ************
格式:
.属性值{样式名:样式值;}
例子:
<head>
<style type="text/css">
.属性值{
样式名:样式值;
例题: <head>
<title>无标题文档</title>
<style type="text/css">
.a{
background-color:#F00;
color:#9F3;
}
</style>
</head>

<body>
<p >qwertyuioasdfg</p>
<p class="a">qwertyuioasdfg</p>
</body>

3.id选择器 *****
格式 : #id属性值{样式名:样式值;}
例:<style type="text/css">

#b属性值{样式名:样式值;}
</style>

例题:<html>
<head>
<title>无标题文档</title>
<style type="text/css">

#b{
background-color:#069;
color:#0F3;
font-size:36px;
}
</style>
</head>

<body>
<p >qwertyuioasdfg</p>
<p class="a">qwertyuioasdfg</p>
<p id="b">程小白</p>
<h1>tyuio;</h1>
</body>
</html>

CSS样式

css中得注释/*....*/
1、字体:
color:字体颜色: 属性值:red 十六进制 #F00
font-size:字体大小; 属性值:数字 单位px %
2、背景:
background-color:背景颜色: 属性值:red 十六进制 #F00
background-image:背景图片 属性值:url(文件夹名/图片全名)
background-repeat:背景图片重复 repeat-x;横向重复 repeat-y;纵向重复 no-repeat 不重复
横向重复:background-repeat: repeat-x (背景图片在页面里面一直横着重复)
纵向重复:background-repeat: repeat-y (背景图片在页面里面竖着一直重复)
不会重复:background-repeat: no-repeat (背景图片在页面里面不会重复)

例题:
<style type="text/css">
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat-y
}
</style>

background-size:背景图片大的小 属性值:px %
例:background-size: 1500px 1000px;
宽 高
background-position:改变图像在背景中的位置 属性值:1、关键字属性top:上、 bottom:下、left:左、right:右、center:中
2、百分值属性:background-position:50%(距离左边的距离) 40%(距离上边的距离);
3、长度值:background-position:50px(距离左边的距离) 40px(距离上边的距离);

background-attachment:背景图像是否固定或者随着页面的其余部分滚动。
属性值:fixed:固定(图片) 默认值是scroll:不固定图片

例题:background-attachment:fixed 固定图片(图片在页面里面不动)
background-attachment:scroll 图片随动(图片在页面里面随之滚动)

<style type="text/css">
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat-y }
</style>

3、文本:

text-align:对齐 属性值:left:左、right:右、center:中
word-spacing:字(单词)间隔(属性增加或减少单词间的空白(即字间隔)) 属性值:接受一个正长度值或负长度(px)
letter-spacing:字母间隔/汉字之间的间隔(属性增加或减少字母间的空白(即字间隔)) 属性值:接受一个正长度值或负长度(px)