初识CSS

CSS

层叠样式表

css语法:

样式属性名：属性值

优点

①使HTML专注于网页的内容，CSS专注于网页的表现

②提供了丰富的格式化功能

③可以针对各种可视化浏览器（主要有显示器、打印机、PDA等）来设置不同的样式

CSS与浏览器

并不是所有的CSS的样式都被浏览器支持

不同的浏览器对CSS的实现有细微的不同，需要特别注意

1.行内样式

直接使用标记的style属性

style=" width:100px; height:100px; background-color:#F00;”

2.内嵌样式

在HTML中，使用<style></style>标记，将样式写在<style>标记内

注意：<style>标记要指定type属性为text/css

3.链接样式(外链式)

将CSS写入单独的一个文件中，注意该文件的文件扩展名为  .css
在HTML文档中使用<link>标记引入css文件
<link>标记需要指定两个属性：type和rel（relationship）
例：<link type="text/css" rel="stylesheet" href=“sy.css" />

4.使用导入样式

使用@import指令可以将css文件中的css样式导入到不同的地方
导入式的结果和直接书写是同样的效果
导入式可以共享样式代码
可以在内嵌式里使用导入，也可在css文件中使用
导入样式的使用方法
@import url(“sheet1.css”);
@import “sheet1.css”;

link引入的样式权重大于import

css选择器

类型（标记）选择器

即使用标签的名字作为选择符
语法：标签{规则}
例：td{color:#F00;}

ID选择器

每个html标签的id都是不一样的
语法：#id{规则}

类(class)选择器

语法：.className{规则}
注意：也可以在前面添加标签名字，如div.className（之间无空格，和包含选择符区分开）
可以为标签指定多个class值，多个值之间用空格隔开
例：<div class="dv top">

包含选择器 后代选择器

通过标签的嵌套选择标签，只要包含就行
语法：选择符a  选择符b {规则}
选择符之间用空格隔开,即选择符a标签内的所有选择符b标签

font

font-family

指定字体

可以为文字指定多个字体，不同字体间用“，”隔开

字体名字中间有空格的，要用双引号引起来

font-size

字体大小

多用px/em单位

font-style

字体倾斜效果

normal不倾斜、oblique和italic倾斜

Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜

font-weight

字体粗细

normal 正常粗细
bord 粗体
border 加粗体
lighter 比正常粗体细
100~900

text-transform

英文字母大小写转换

capitalize 单词首字母大写
uppercase 全部大写
lowercase 全部小写

text-decoration

文本的装饰效果

upderline 文字加下划线
line-through 文字加删除线
overline 文字加上划线

text-indent

段落内容首行缩进（悬挂缩进）

字词间距

英文文本
letter-spacing  字母和字母间距 : normal / 数值
word-spacing  单词和单词间距
中文文本
letter-spacing  字和字之间的间距

overflow

overflow:visible（默认）/hidden（超出部分隐藏）/scroll（出现滚动条）/auto（浏览器自动处理）

内容溢出处理

text-overflow

text-overflow：clip（不显示省略标记，简单裁切） | ellipsis （文本溢出显示省略标记）文本溢出处理

white-space： normal / pre（空白被保留）/nowrap（不换行）/....

元素空白的处理

line-height

段落内部的行高

注意：文字在每一行自动上下居中

text-align

文本的水平位置

left，左对齐（默认值）

right,右对齐

center,居中对齐

justify,两端对齐

justify对于主要用于英文

只能对多行中的非最后一行进行两端对齐

vertical-align

vertical-align:baseline/top/text-top/middle/bottom/.. 垂直对齐方式

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。