CSS学习笔记：1 基础语法

CSS（层叠样式表）

html超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

css是英文Cascading Style Sheets的缩写。

用来表现html或xml等文件样式

css

通过前面的html学习，我们知道给表格加背景色，可以给tr或者td 标签加上bgcolor属性。

<table border="1">
<tr bgcolor="gray" >
<td>1</td>
<td>2</td>
</tr>

<tr>
<td  bgcolor="gray">3</td>
<td  bgcolor="gray">4</td>
</tr>

</table>

使用css之后，根据分层设计的思想，css可以把颜色、位置大小等信息剥离到style 标签。html只关心内容即可。

<style>
td{
background-color:yellow;
}
</style>
<table border="1">

<tr>
<td>1</td>
<td>2</td>
</tr>

<tr>
<td>3</td>
<td>4</td>
</tr>

</table>

也可以使用

<style>
tr{
background-color:yellow;
}
</style>

不同td 有不同背景色，需要使用选择器。

语法

选择所有的p元素，并且设置文字颜色为红色

<style>
p{
color:red;
}
</style>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

也可以直接在某个元素上增加style属性

<p style="color:red">段落1</p>
<p>段落2</p>

选择器

元素选择器通过标签名选择元素

<style>
p{
color:red;
}
</style>
<p>p元素</p>

id选择器（#）

元素的id应该是唯一的。

<style>
p{
color:red;
}
#p1{
color:blue;
}
#p2{
color:yellow;
}
</style>
<p>p元素</p>
<p>p元素</p>
<p id="p1">id=p1的p元素</p>
<p id="p2">id=p2的p元素</p>

类选择器（.）

<style>
.pre{
color:blue;
}
.after{
color:red;
}
</style>
<p class="pre">p元素</p>
<p class="pre">p元素</p>
<p class="after">p元素</p>
<p class="after">p元素</p>

结合元素名和class来选择

p.blue

<style>
p.blue{
color:blue;
}
</style>

<p class="blue">class=blue的p</p>
<span class="blue">class=blue的span</span>

注释

<style>
/*设置所有的p元素为红色*/
p{
color:red;
}
</style>

尺寸大小

属性：width

属性值：百分比或者像素

<style>
p#percentage{
width:30%;
height:10%;
background-color:red;
}
p#pix{
width:180px;
height:50px;
background-color:grey;
}
</style>
<p id="percentage">按比例设置尺寸30%宽，30%宽</p>
<p id="pix">按像素设置尺寸 180px宽 50px高</p>

背景

背景颜色

属性：background-color

颜色的值可以采用3种方式

1. 预定义的颜色名字

比如red,gray,white,black,pink，参考颜色速查手册

2. rgb格式

分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色

3. 16进制的表示 #00ff00 等同于 rgb(0,255,0)

<style>
p.gray{
background-color:red;
}
h1{
background-color:rgb(255,0,255);
}
h2{
background-color:#00ff00;
}
</style>
<p class="gray">灰色</p>
<h1>紫色</h1>
<h2>绿色</h2>

图片背景

属性：backgrount-image

<style>
div#pic{
background-image:url(http://xxxx.jpg);
width:30%;
height:30%;
}
</style>
<div id="pic">
图片背景！
</div>

本地图片背景

<style>
div#pic{
background-image:url(C:/Users/Administrator/Desktop/1.jpg);
width:20%;
height:20%;
color:red;
}
</style>
<div id="pic">
图片背景！
</div>

背景重复

属性：background-repeat

background-repeat属性

值可以选

repeat; 水平垂直方向都重复

repeat-x; 只有水平方向重复

repeat-y; 只有垂直方向重复

no-repeat; 无重复

<style>
div#norepeat{
background-image:url(C:/Users/Administrator/Desktop/1.jpg);
width:200px;
height:100px;
background-repeat: no-repeat;
}
</style>

<div id="norepeat">
背景不重复
</div>

背景平铺

属性：background-size

值：contain

<style>
div#contain{
background-image:url(C:/Users/Administrator/Desktop/1.jpg);
width:200px;
height:100px;
background-size: contain;
}
</style>

<div id="contain">
背景平铺，拉伸会导致失真
</div>

文本

文本颜色

属性：color

属性值：参考背景色的3种方式

<style>
div#col{
color:red;
}
</style>
<div id="col">
文字颜色！
</div>

对齐

属性:text-align

值：left,right,center

div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提

span看不出右对齐效果

因为span是内联元素其默认宽度就是其文本内容的宽度

<style>
/*让div和span的边框显露出来*/
div,span{
border: 1px gray solid;
margin:10px;
}
div#center{
text-align:center;
}
span#right{
text-align:right;
}
</style>
<div id="center">
居中
</div>

<span id="right">
span看不出右对齐效果
</span>

文本修饰

属性：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://www.baidu.com/">默认的超链</a><br/>
<a class="a" href="http://www.baidu.com/">去掉了下划线的超链</a>

行间距

属性：line-height

值：数字或百分比

<style>
p{
width:200px;
}

.p{
line-height:200%;
}
</style>

<p>
默认行间距 默认行间距
默认行间距 默认行间距
</p>

<p class="p">
200%行间距 200%行间距
200%行间距
</p>

字符间距

属性：letter-spacing

值：数字

<style>
p{
width:200px;
}

.p{
letter-spacing:2;
}
</style>

<p>
默认字符间距
</p>

<p class="p">
2倍字符间距
</p>

单词间距

属性：word-spacing

值：数字

<style>
p{
width:200px;
}

.p{
word-spacing:10;
}
</style>

<p>
默认 字符 间距
</p>

<p class="p">
10 字符 间距
</p>

首行缩进

属性：text-indent

值：数字

<style>
p{
width:200px;
}

.p{
text-indent:20;
}
</style>

<p>
不首行缩进
</p>

<p class="p">
首行缩进
</p>

大小写

属性：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>

空白格

属性：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.n class属性

字体

尺寸

属性：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

值：默认、Times New Roman、Arial、宋体、黑体、楷体、微软雅黑等

<style>
p.f{
font-family:楷体;
}
</style>
<p class="f">字体：楷体</p>

字体相关声明放在一行

属性：font

属性值：以空格隔开

<style>
p.all{
font:italic bold 30px 楷体;
}
</style>
<p class="all">斜体、粗体、30px、楷体</p>

鼠标样式

<style>
span{
cursor:crosshair;
}
</style>

<span>鼠标移动到文字上，变成指定类型</span>

鼠标样式
cursor:default
cursor:auto
cursor:crosshair
cursor:pointer
cursor:help
cursor:wait
cursor:text
cursor:w-resize cursor:sw-resize cursor:se-resize cursor:n-resize cursor:nw-resize cursor:ne-resize cursor:e-resize

表格

表格布局

属性: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/>
<table class="t2" border="1" width="200px">
<tr>
<td width="50%">边框合并</td>
<td width="50%">边框合并</td>
</tr>
</table>