1.基本语法
css的语法
selector {property: value}
即 选择器{属性:值}
学习css即学习有哪些选择器，哪些属性以及可以使用什么样的值
既可以这样写
<style>
p{
color:red;
}
</style>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>也可以这样写
<p style="color:red">这是style为红色的</p>
<p>这是一个没有style的p</p>2.选择器分类
选择器主要分3种
元素选择器
id选择器
类选择器
（1）元素选择器
元素选择器通过标签名选择元素
在实例中，所有的p都被设置成红色
<style>
p{
color:red;
}
</style>
<p>p元素</p>
<p>p元素</p>
<p>p元素</p>
（2）id选择器
通过id选择元素
注： 一个元素的id应该是唯一的。另一个元素不应该重复使用
<style>
p{
color:red;
}
#p1{
color:blue;
}
#p2{
color:green;
}
</style>
<p>没有id的p</p>
<p id="p1">id=p1的p</p>
<p id="p2">id=p2的p</p>
（3）类选择器
当需要多个元素，都使用同样的css的时候，就会使用类选择器
<style>
.pre{
color:blue;
}
.after{
color:green;
}
</style>
<p class="pre">前3个</p>
<p class="pre">前3个</p>
<p class="pre">前3个</p>
<p class="after">后3个</p>
<p class="after">后3个</p>
<p class="after">后3个</p>
同时根据元素名和class来选择
p.blue
<style>
p.blue{
color:blue;
}
</style>
<p class="blue">class=blue的p</p>
<span class="blue">class=blue的span</span>
3.注释
注释
以/* 开始
以*/结束
被注释掉的文字会自动隐藏
4.尺寸大小
属性：width
值：可以是百分比或者像素
<style>
p#percentage{
width:50%;
height:50%;
background-color:pink;
}
p#pix{
width:180px;
height:50px;
background-color:green;
}
</style>
<p id="percentage"> 按比例设置尺寸50%宽 50%高</p>
<p id="pix"> 按象素设置尺寸 180px宽 50 px高</p>
5.背景
（1）背景颜色
属性名background-color
颜色的值可以采用3种方式
1. 预定义的颜色名字
比如red,gray,white,black,pink，参考颜色速查手册
2. rgb格式
分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
3. 16进制的表示
#00ff00 等同于 rgb(0,255,0)
p.mystyle{
background-color: gray;
}
h1{
background-color:rgb(250,123,252) ;
}
h2{
background-color: #00ff00;
}
</style>
<p class="mystyle">my style</p>
<h1>我想让父母幸福</h1>
<h2>我想让父母高兴</h2>
（2）图片做背景
<style>
div#test{
background-image: url(img/1.jpg);
width:500px;
height: 580px;
}
</style>
<div id="test">
哈哈哈哈
</div>在本地测试的时候，请先从右侧下载图片
不要写成 background-image:url(/study/background.jpg);
而是写成 background-image:url(background.jpg);
并且把图片和html文件放在同一个目录下
<style>
div#test{
background-image: url(skill1.png);
width:500px;
height: 580px;
}
</style>
<div id="test">
哈哈哈哈
</div>
(3)背景重复
background-repeat属性
值可以选
repeat; 水平垂直方向都重复
repeat-x; 只有水平方向重复
repeat-y; 只有垂直方向重复
no-repeat; 无重复
<style>
div#norepeat
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-repeat: no-repeat;
}
div#repeat-x
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-repeat: repeat-x;
}
</style>
<div id="norepeat">
背景不重复
</div>
<div id="repeat-x">
背景水平重复
</div>(4)背景平铺
属性：background-size
值：contain
<style>
div#contain
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-size: contain;
}
</style>
<div id="contain">
背景平铺，通过拉伸实现，会有失真
</div>
6.边框模型
真正决定一个元素的表现形式，是由其边框模型决定的
由图所示
蓝色框即为内容
width:70px 表示内容的大小
红色框即为边框
内容到边框之间的距离，即为内边距 5px
灰色框，是指边框与其他元素之间的距离，即为外边距：10px
<style>
.box{
width:70px;
padding:5px;
margin: 10px;
}
div{
border:1px solid gray;
font-size:70%;
}
</style>
<div>
其他元素
</div>
<div class="box">
内容宽度70px <br><br>
内边距：5px <br> <br>
外边距：10px <br>
</div>
<div>
其他元素
</div>
7.文本
（1）颜色
属性名color
颜色的值可以采用3种方式
1. 预定义的颜色名字
比如red,gray,white,black,pink
2. rgb格式
分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
3. 16进制的表示
#00ff00 等同于 rgb(0,255,0)
<style>
div#colorful{
color:pink
}
</style>
<div id="colorful">
粉红色
</div>
（2）对齐方式
属性:text-align
值：left,right,center
div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。
但是，span却看不出右对齐效果，为什么呢？
因为span是内联元素其默认宽度就是其文本内容的宽度
简单说就是文本已经粑在其边框上了，对齐是看不出效果来的
<style>
div#left{
text-align:left;
}
/*让div和span的边框显露出来，便于理解本知识点*/
div,span{
border: 1px gray solid;
margin:10px;
}
div#right{
text-align:right;
}
div#center{
text-align:center;
}
span#right{
text-align:right;
}
</style>
<div id="left">
左对齐
</div>
<div id="right">
右对齐
</div>
<div id="center">
居中
</div>
<span id="right">
span看不出右对齐效果
</span>
（3）文本修饰
属性：text-decoration
值： overline
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
.a {text-decoration: none}
</style>
<h1>上划线</h1>
<h2>删除效果</h2>
<h3>下划线</h3>
<h4>闪烁效果，大部分浏览器已经取消该效果</h4>
<a href="http://how2j.cn/">默认的超链</a>
<a class="a" href="http://how2j.cn/">去掉了下划线的超链</a>
（4）行间距
属性：line-height
值：数字或者百分比
.p{
line-height: 200%;
}
</style>
<div id="colorful">
nicer
</div>
<p>123454</p>
<p>123454</p>
<p>123454</p>
<p class="p">123454</p>
<p class="p">123454</p>
（5）字符间距
属性：letter-spacing
值： 数字
<style>
p{
width:200px;
}
.p{
letter-spacing:2;
}
</style>
<p>
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
<p class="p">
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
（6）单词间距
属性：word-spacing
值： 数字
<style>
p{
width:200px;
}
.p{
word-spacing:10;
}
</style>
<p>
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
<p class="p">
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</p>
（7）首行缩进
属性：text-indent
值： 数字
<style>
p{
width:200px;
}
.p{
text-indent:50;
}
</style>
<p>
没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字
</p>
<p class="p">
有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段
文字
</p>
（8）大小写
属性：text-transform
值：
uppercase 全部大写
capitalize 首字母大写
lowercase 全部小写
<style>
p.u {text-transform:uppercase}
p.c {text-transform:capitalize}
p.l {text-transform:lowercase}
</style>
<p class="u">
abcD
</p>
<p class="c">
abcD
</p>
<p class="l">
abcD
</p>
（9）空白格
属性：white-space
值：
normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。
pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。
nowrap 一直不换行，直到使用br
<style>
p.n {white-space:normal}
p.p {white-space:pre}
p.pw {white-space:pre-wrap}
p.nw {white-space:nowrap}
</style>
<p class="n">
在默认情况下，多个 空白格或者
换行符
会被 合并成一个空白格
</p>
<p class="p">
保留所有的 空白格
以及换行符
相当于pre元素
特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</p>
<p class="pw">
保留所有的 空白格
以及换行符
相当于pre元素
特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</p>
<p class="nw">
不会换行
不会换行
不会换行
不会换行
不会换行
不会换行
直到br<br/>才换行
</p>
8.字体
属性：font-size
值：数字或者百分比
<style>
p.big{
font-size:30px;
}
p.small{
font-size:50%;
}
p.small2{
font-size:0.5em;
}
</style>
<p >正常大小</p>
<p class="big">30px大小的文字</p>
<p class="small">50%比例的文字</p>
<p class="small2">0.5em 等同于 50%比例的文字</p>
font-style:
normal 标准字体
italic 斜体
<style>
p.n{
font-style:normal;
}
p.i{
font-style:italic;
}
</style>
<p >标准字体</p>
<p class="n">标准字体</p>
<p class="i">斜体</p> 
属性 font-weight
normal 标准粗细
bold 粗一点
<style>
p.n{
font-weight:normal;
}
p.b{
font-weight:bold;
}
</style>
<p >标准字体</p>
<p class="n">标准字体</p>
<p class="b">粗一点</p>
属性font-family
设置字库
<style>
p.f1{
font-family:"Times New Roman";
}
p.f2{
font-family:Arial;
}
p.f3{
font-family:宋体;
}
p.f4{
font-family:黑体;
}
p.f5{
font-family:楷体;
}
p.f6{
font-family:微软雅黑;
}
</style>
<p >默认字库 font family:default </p>
<p class="f1">设置字库 font-family: Times New Roman</p>
<p class="f2">设置字库 font-family: Arial</p>
<p class="f3">设置字库 font-family: 宋体, 这种字体是IE默认字体</p>
<p class="f4">设置字库 font-family: 黑体</p>
<p class="f5">设置字库 font-family: 楷体</p>
<p class="f6">设置字库 font-family: 微软雅黑, 这个字体是火狐默认字体</p>
把大小，风格，粗细，字库都写在一行里面
<style>
p.all{
font:italic bold 30px "Times New Roman";
}
</style>
<p>默认字体</p>
<p class="all">斜体的 粗体的 大小是30px的 "Times New Roman" </p>
9.鼠标样式
<style type="text/css">
span{
cursor: crosshair;
}
</style>
<span >
鼠标移动到这个地方，就变成了十字架
</span>10.表格相关样式
| table-layout:automatic|fixed | 表格布局 |
| border-collapse:separate|collapse | 表格边框 |
属性:table-layout
automatic; 单元格的大小由td的内容宽度决定
fixed; 单元格的大小由td上设置的宽度决定
注：只对连续的英文字母起作用，如果使用中文就看不到效果
<style>
table.t1{
table-layout:automatic;
}
table.t2{
table-layout:fixed;
}
</style>
<table class="t1" border="1" width="100%">
<tr>
<td width="10%">abcdefghijklmnopqrstuvwxyz</td>
<td width="90%">abc</td>
</tr>
</table>
<table class="t2" border="1" width="100%">
<tr>
<td width="50px">abcdefghijklmnopqrstuvwxyz</td>
<td >abc</td>
</tr>
</table>
属性：border-collapse
值：
separate:边框分隔
collapse:边框合并
<style>
table.t1{
border-collapse:separate;
}
table.t2{
border-collapse:collapse;
}
</style>
<table class="t1" border="1" width="200px">
<tr>
<td width="50%">边框分离</td>
<td width="50%">边框分离</td>
</tr>
</table>
<br/>
<br/>
<table class="t2" border="1" width="200px">
<tr>
<td width="50%">边框合并</td>
<td width="50%">边框合并</td>
</tr>
</table>
11.边框
（1）边框风格
属性： border-style
solid: 实线
dotted:点状
dashed:虚线
double:双线
<style type="text/css">
.solid{
border-style: solid;
}
.dotted{
border-style: dotted;
}
.dashed{
border-style: dashed;
}
.double{
border-style: double;
}
</style>
<div class="solid">实线边框</div>
<div class="dotted">点边框</div>
<div class="dashed">虚线边框</div>
<div class="double">双线</div>
边框颜色
<style type="text/css">
.solid{
border-style: solid;
border-color: red;
}
.dotted{
border-style: dotted;
}
.dashed{
border-style: dashed;
}
.double{
border-style: double;
}
</style>
<div class="solid">实线边框</div>
<div class="dotted">点边框</div>
<div class="dashed">虚线边框</div>
<div class="double">双线</div>
边框宽度
border-width:10px;
都放在一起
属性：border
值：颜色 风格 宽度
<style type="text/css">
.solid{
border: red dotted 6px;
}
</style>
<div class="solid">12345</div>
有交接的边都有边框
比如上和左就是有交界的，而上和下就没有交界
当有交界的边同时出现边框的时候，就会以倾斜的形式表现交界线。
<style>
div.lefttop{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
background-color:lightgray;
}
div.alldirection{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
border-bottom-style:solid;
border-bottom-color:green;
border-bottom-width: 50px;
border-right-style:solid;
border-right-color:yellow;
border-right-width: 50px;
background-color:lightgray;
}
</style>
<div class="lefttop">
左边和上边都有边框
</div>
<br>
<div class="alldirection">
四边都有边框
</div>
块级元素和内联元素的边框区别
可以看到，块级元素div默认是占用100%的宽度
常见的块级元素有div h1 p 等
而内联元素span的宽度由其内容的宽度决定
常见的内联元素有 a b strong i input 等
<style type="text/css">
.solid{
border: red dotted 6px;
}
</style>
<div class="solid">12345</div>
<span class="solid">12345</span>
小练习
红色倒三角
<style type="text/css">
div{
width: 0;
height: 0;
border: 10px solid white;
border-top:10px solid red;
}
</style>
<div></div>
<style type="text/css">
table{
background-color: white;
width: 500px;
height: 30px;
}
.s1{
border-bottom: paleturquoise solid 2px;
}
</style>
<table >
<tr>
<th class="s1">商品</th>
<th class="s1">数量</th>
<th class="s1">价格</th>
<th class="s1">小记</th>
</tr>
</table>
870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
