CSS第一节总结

CSS：层叠样式表 （Cascading Style Sheets） HTML（结构层）用来搭建网页基本骨架CSS（表现层）用来修饰主页 javascript（行为层）脚本

优点

• • • 使HTML专注于网页的内容，CSS专注于网页的表现
    • 提供了丰富的格式化功能
    • 可以针对各种可视化浏览器（主要有显示器、打印机、PDA等）来设置不同的样式

CSS与浏览器

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

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

Css语法属性值和属性值之间用的英文状态下的冒号

行内式优先渲染，没有设置行内式时内嵌式和外链式谁后写就渲染谁

1. 行内样式

直接使用标记的style属性

Style（样式）=" width（宽度）:100px; height（高度）:100px; background-color（背景颜色）:#F00;”

一个标签上只能有一个style属性 css里所有尺寸必须加单位

1. 内嵌样式

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

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

一般建议放在head标签中

1. 链接样式(外链式)

将CSS写入单独的一个文件中，注意该文件的文件扩展名为  .css

在HTML文档中使用<link>标记引入css文件

<link>标记需要指定两个属性：type和rel（relationship）

例：<link type="text/css" rel （relationship :关系）="stylesheet（样式表）" href（超文本引用：在这里填写css文件路径）=“sy.css" />

1. 使用导入样式（指令的方式）

使用@import指令可以将css文件中的css样式导入到不同的地方

导入式的结果和直接书写是同样的效果

导入式可以共享样式代码

可以在内嵌式里使用导入，也可在css文件中使用

导入样式的使用方法

@import url(“sheet1.css”);

@import “sheet1.css”;

CSS语法规则

CSS使用多种选择器来确定要定义的HTML标记

CSS使用大量的属性来定义HTML文档的表现

设置属性的不同的值来实现不同的显示效果

基本语法：选择器{属性：属性值；}

Css选择器：

CSS修饰html标签的基础就是选择符，即可以通过多种选择符来选择要修饰的html标签

通配选择器

即所有的标签

语法：*{规则}

例：*{font-family:"宋体";}

类型（标记）选择器

即使用标签的名字作为选择符

语法：标签{规则}

例：td{color:#F00;}

ID选择器

每个html标签的id都是不一样的

语法：#id{规则}

类(class)选择器

语法：.className{规则}

注意：也可以在前面添加标签名字，如div.className（之间无空格，和包含选择符区分开）

可以为标签指定多个class值，多个值之间用空格隔开

例：<div class="dv top">

包含选择器  后代选择器

通过标签的嵌套选择标签，只要包含就行

语法：选择符a  选择符b {规则}

选择符之间用空格隔开,即选择符a标签内的所有选择符b标签

权重

标签选择器  权重1

类选择器    权重10

Id选择器    权重100

Css长度基本单位

px和em

px,像素

根据显示器分辨率的不同，像素的大小也是不同的

em,以当前字符的高度为基准  

如果当前字体的高度为12px，那么1em就是12px

注意：一般以font-size为准，如果没有定义font-size，则以浏览器默认大小（16px）为准

cm/mm/pt/pc

主要用在非显示器输出上，如打印

如果网页在显示器上显示，则这些单位将转换为一定的像素显示，即长度也是依靠显示器分辨率的

网页中颜色采用RGB模式显示（显示器）

RGB颜色在CSS中的表达方式

1. 1. 直接使用颜色的英文单词，如red

注意：很多浏览器不支持颜色的单词表示

1. 1. 使用三色的数值，如rgb(120,222,100)

注意：数值在0~255之间

使用三色的百分比，如rgb(10%,20%,100%)

red rgb(255,0,0)     blue  rgb(0,0,255)   black rgb(0,0,0)

green  rgb(0,255,0)  white  rgb(255,255,255)

1. 1. 使用三色数值的十六进制，如#0000ff

注意：推荐使用这种方式，十六进制值前加#

rgb   red #ff0000   #f00   blue   #0000ff  #00f  black #000000  #000

     green   #00ff00  #0f0   white #ffffff  #fff

文本相关样式

font-family

指定字体

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

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

font-size

字体大小

多用px/em单位

font-style

字体倾斜效果

normal不倾斜、oblique和italic倾斜

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

font-weight

字体粗细

大多浏览器可以实现：正常和加粗效果

normal	正常粗细
bold	粗体
bolder	加粗体
lighter	比正常粗体细
100~900	共9个层次，数字越大，字体越粗

line-height                          

段落内部的行高

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

text-align

文本的水平位置

left，左对齐（默认值）

right,右对齐

center,居中对齐

justify,两端对齐

justify对于主要用于英文

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

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

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

link和@import的区别：

两者都是外部引用CSS的方式，但是存在一定的区别：

区别1：link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

import的写法比较多：推荐使用 @import url(index.css);

src和href的区别

1.src和href所表达的请求资源类型不同

src源的全拼是Source源，是在请求src资源的时候进行指向的资源下载并应用到文档中；href源的全拼是Hypertext Reference是指超文本引用，用来建立当前元素和文档之间的连接。

2.src和href的作用结果不同

src的作用结果只能用来替换当前内容，不能用在文档和资源之间联系；href的作用结果只能用在当前文档和所要引用的资源之间确立联系。

3.src和href作为外部资源的引入，它们浏览器的解析方式不同。src在浏览器中被解析到时会暂停其他资源的下载和处理，并且把该资源加载编译完成；href在文档中进行添加时，浏览器会识别到这个文档并命名为CSS文件，就会下载合并资源，同时也不会停止对当前文档的处理。