css（1）

什么是css

CSS(Cascading Style Sheets的缩写) CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML
页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边
框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整
体排版等。而且还可以针对不同的浏览器设置不同的样式

css样式规则

示例：

 div { /*选择器*/
  color: red; /*声明*/
  height:300px;/*声明*/ 
 width:300px;/*声明*/ 
}

css的三种引入方式

1. 内部引入

定义在head 和boby标签中 使用 style标签
优点 部分结构和样式相分离
缺点 ： 没有彻底分离
控制范围： 控制一个页面

<style type="text/css">
 div{
  background-color : pink;
    height:300px;
 width:300px;
}

</style>

2. 行内样式表

直接在标签的属性中使用style声明，在style属性中添加css声明
优点 书写方便，权重高
缺点 ：没有实现结构与样式相分离
控制范围：控制一个标签

<h1><span style="width: 100px;height: 100px;color: #009E94;">行内样式</span></h1>

3.外部样式表

定义在外部的css文件中，需要在head中引入相应的css文件
优点：完全实现结构和样式相分离
缺点：需要引入
控制范围： 控制整个站点

html文件中：使用link来导入css文件

<link type="text/css" rel="stylesheet" href="../css/test.css" /
<h1>外部样式</h1>


//css文件中定义css样式
	h1{ background-color: rosybrown; color: red; }

Css字体属性

1.字号大小（font-size）
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使
用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，
绝对长度单位使用较少。

<style type="text/css"> 
h1 {
font-size: 40px; }
h2 {
font-size: 30px; }
 </style>
  <h1>Hellow word1</h1> 
  <h2>Hellow word12</h2>

2.font-family：字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体
等。例如将网页中所有段落文本的字体都设置为微软雅黑，

p{
font-family:"微软雅黑"; }
/*可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字 体，则会尝试下一个，
直到找到合适的字体*/

技巧

1. 各种字体之间必须使用英文状态下的逗号“,”分隔。
2. 中文字体需要加英文状态下的引号，英文字体一般不需要加引
   号。当需要设置英文字体时，英文字体名必须位于中文字体名之
   前。例如：font-family: Arial, “微软雅黑”; 。
3. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态
   下的单引号或双引号，例如：font-family: “Times New Roman”;。 p {
   font-family:“微软雅黑”; }/可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字 体，则会尝试下一个，直到找到合适的字体/
   字体名称 英文名称 Unicode编码
   宋体 Simsun \5B8B\4F53
   新宋体 NSimsun \65B0\5B8B\4F53
   黑体 SimHei \9ED1\4F53
   微软雅黑 Microsox YaHei \5FAE\8F6F\96C5\9ED1
   楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
   隶书 LiSu \96B6\4E66
   幼圆 YouYuan \5E7C\5706
   华文细黑 STXihei \534E\6587\7EC6\9ED1
   细明体 MingLiU \7EC6\660E\4F53
   新细明体 PMingLiU \65B0\7EC6\660E\4F53
4. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显
   示。

font-weight：字体粗细

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、 bolder、lighter、100~900（100的整数倍）。

<style type="text/css">
 p {
font-weight: normal; }
div {
font-weight: bold; }
span {
font-weight: bolder; }
 </style> 
 <p>这是normal的文本</p> 
 <div>这是bold的文本</div>
  <span>这是bolder的文本</span>

font-style：字体风格

normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。

<style> p {
font-style: normal; }
div {
font-style: italic; }
span {
font-style: oblique; }
 </style>
  <p>这是一个段落,正常。</p>
  <div>这是一个段落,斜体。</div>
   <span>这是一个段落,斜体。</span>

小技巧：平时很少给文字加斜体，反而是给斜体标签（i，em）改为普通模式

text-align 文本对齐方式

<style type="text/css"> 
h1 {text-align: left; /*左对齐*/ }
h2 {text-align: center; /*居中对齐*/ }
h3 {text-align: right; /*右对齐*/ }
p { text-align: justify; /*分散对齐，主要针对英文段落中出现空 格时，
由于两边对齐，空格的大小会有变化*/ } 
</style> 
<h1>标题1</h1>
 <h2>标题2</h2> 
 <h3>标题3</h3>
 <p>有时候，我们不说话，不等于没有话说。有时候，是别人磨叽得太多，自己不想说了；有时候，是自己顾虑得太多，最终无心说了。</p>

text-decoration 文本修饰

text-decoration用于对文本添加修饰，如下划线、删除线等。有如下取值：

• none：默认，定义标准的文本，没有任何修饰。
• underline：定义在文本下方的一条线
• overline：定义在文本上方的一条线
• line-through：定义穿过文本的一条线

text-transform 文本转换

text-transform用于转换文本的大小写（主要用于英文），其取值有：

• none：默认
• capitalize：文本中每个单词以大写字母开头
• uppercase：所有单词字母都大写
• owercase：所有单词字母都小写

text-indent 文本缩进

text-indent 属性规定文本块中首行文本的缩进。取值有：
数值：表示像素值
百分比：基于父元素宽度的百分比的缩进。
注意： 负值是允许的。如果值是负数，将第一行左缩进。

<style>
 p { 
text-indent:50px;
 }
 </style>

text-shadow 文本阴影

text-shadow用于设置文本的阴影效果。语法格式是

text-shadow: h-shadow v-shadow blur color;
h-shadow：必需。水平阴影的位置。允许负值。horizontal， X轴往右
是正值
v-shadow：必需。垂直阴影的位置。允许负值。 vertical，Y轴向下是正
值blur：可选。模糊的距离。
color：可选。阴影的颜色。

<style type="text/css">
h3 {color: white; text-shadow: 2px 2px 4px #000000; }
</style>

direction 文本方向

direction 用于指定文本的方向。取值如下：
ltr：默认的，文本方向从左到右 lex to right
rtl：文本方向从右到左。right to lex