《CSS详细经典速成教程》由会员分享，可在线阅读，更多相关《CSS详细经典速成教程（63页珍藏版）》请在金锄头文库上搜索。
1、CSS专题 CSS在页面风格设计中的作用 CSS语法基础 用DIV CSS的方式来写HTML页面 用CSS设置图像样式扮靓网页 CSS与XML的综合运用 CSS简介 一 CSS简介 CSSCascadingStyleSheet层叠样式表样式格式 对于网页来说 像网页显示的文字的大小 颜色以及图片位置以及段落 列表等 都是网页显示的样式 层叠HTML文件引用多个CSS样式时 如果CSS的定义发生冲突 浏览器将依据层次的先后顺序来应用样式 如果不考虑样式的优先级时 一般会遵循 最近优选原则 二 CSS在页面风格设计中的作用 网页的标准 网页主要由3个部分组成 结构 Structure 表现 Pre
2、sentation 行为 Behavior 在一个网页中 分若干个组成部分 包括各级标题 正文段落 各种列表结构等 这就构成了一个网页的 结构 网页各组成部分的字号 字体和颜色等属性就构成了它的 表现 网页与用户的交互 二 CSS在页面风格设计中的作用 网页标准的涵义 结构 决定了网页 是什么 表现 决定了网页看起来是 什么样子 行为 决定了网页 做什么 网页标准对应的技术 X HTML 决定网页的结构和内容CSS 设定网页的表现样式JavaScript 控制网页的行为CSS的核心目的 实现网页结构内容和表现形式的分离 将原来由HTML语言所承担的一些与结构无关的功能剥离出来 改由CSS来完成
3、 三 CSS语法基础 CSS的思想就是首先指定对什么 对象 进行设置 然后指定对该对象的哪个方面的 属性 进行设置 最后给出该设置的 值 CSS规则的构造对象属性值 三 CSS语法基础 样式表规则的组成 选择符 selector 决定哪些因素要受到影响声明 declaration 一个或多个属性值对组成基本语法 selector 属性 属性值 属性 属性值 语法说明 selector表示希望进行格式化的元素 声明部分包括在选择器后的大括号中 用 属性 属性值 描述要应用的格式化操作 声明中的多个属性值对之间必须用分号隔开 三 CSS语法基础 选择器 selector CSS的对象是很重要的 它
4、指定了对哪些网页元素进行设置 因此 它有一个专门的名称 选择器 selector 类型 普通选择器复合选择器 标签 三 CSS语法基础 普通选择器 标签选择器 标签 p font size 16px color red 三 CSS语法基础 普通选择器 类别选择器 biaoti font size 16px color red 普通文字赋于标记符类所产生的格式类选择器所定义的格式 三 CSS语法基础 普通选择器 ID选择器 biaoti font size 16px color red 普通文字赋于标记符id所产生的格式ID选择器所定义的格式 三 CSS语法基础 复合选择器 交集选择器 p 标记
5、选择器 color blue p Special 标记 类别选择器 color red special 类别选择器 color green 普通段落文本 蓝色 普通标题文本 黑色 指定了 special类别的段落文本 红色 指定了 special类别的标题文本 绿色 三 CSS语法基础 复合选择器 并集选择器 并集选择器 并集选择器 集体声明 h1 h2 h3 h4 h5 p color purple font size 15px h2 special special one text decoration underline 示例文字h1示例文字h2示例文字h3示例文字h4示例文字h5示例文
6、字p1示例文字p2示例文字p3 三 CSS语法基础 复合选择器 后代选择器 后代选择器 嵌套声明 pspan color red span color blue 嵌套使用CSS 红色 标记的方法嵌套之外的标记 蓝色 不生效 三 CSS语法基础 继承继承是CSS的一个主要特征 许多CSS属性不但影响选择符所定义的元素 而且会被这些元素的后代继承 例如一个body定义了的颜色值也会应用到段落的文本中 CSS的继承性CSS的继承性 三 CSS语法基础 样式表的定义与使用直接定义标记的style属性定义内部样式表嵌入外部样式表链接外部样式表 importurl style css 一段话 三 CSS语
7、法基础 示例 ID和类的定义此段文字以默认方式显示此段文字以16像素大小 红色字体显示此段文字以26像素大小 玫红色字体显示 三 CSS语法基础 字体 color 字体颜色font size 字号font family 字体font style 字体样式normal italic oblique 歪斜体 font weight 字体加粗normal bold bolder lighter 100 200 300font variant 字体变体font variant normal small caps 小型的大写字母 text decoration 文字效果属性none underline
8、blink overline line throughfont 综合字体属性font stylefont weightfont variantfont size line heightfont family 三 CSS语法基础 字体排版 text indent 首行缩进属性normal 长度单位letter spacing 字符间距属性normal 长度单位line height 行距属性normal 比例 长度单位 百分比text align 水平对齐属性left right center justifytext transform 转换英文大小写uppercase lowercase ca
9、pitalize none 三 CSS语法基础 背景颜色 background color 关键字 RGB值 transparentCSS则有四种定义颜色的方法 十六进制数RGB函数 整数 RGB函数 百分比 颜色名称 三 CSS语法基础 背景颜色 背景颜色的属性此行文字以红色背景显示n此行文字以黄色背景显示 三 CSS语法基础 背景颜色 三 CSS语法基础 背景图片 background image 插入背景图片background attachment 插入背景附件background repeat 设置重复背景图片background position 设置背景图片位置 backgrou
10、nd image插入背景图片 background image设置背景图片基本语法 background image url none语法说明 url表示要插入背景图片的路径 路径可以是绝对路径也可以是相对路径 none表示不加载图片 background attachment插入背景附件 background attachment背景附件属性是用来设置背景图片是否随着滚动条的移动而一起移动 基本语法 background attachment scroll fixed语法说明 scroll表示背景图片是随着滚动条的移动而移动 是浏览器的默认值 fixed表示背景图片固定在页面上不动 不随着滚
11、动条的移动而移动 background repeat设置重复背景图片 background img属性设置网页的背景图片重复显示方式 基本语法 background repeat repeat repeat x repeat y no repeat语法说明 repeat表示背景图片在水平和垂直方向平铺 是默认值 repeat x表示背景图片在水平方向平铺 repeat y表示背景图片在垂直方向平铺 no repeat表示背景图片不平铺 background position设置背景图片位置 当在网页中插入背景图片时 每一次插入的位置 都是位于网页的左上角 所以通过background posi
12、tion属性来改变图片的插入位置 基本语法 background position 百分比 长度 关键字语法说明 利用百分比和长度来设置图片位置时 都要指定两个值 并且这两个值都要用空格隔开 一个代表水平位置 一个代表垂直位置 水平位置的参考点是网页页面的左边 垂直位置的参考点是网页页面的上边 关键字在水平方向的主要有left center right 关键字在垂直方向的主要有top center bottom 水平方向和垂直方向相互搭配使用 三 CSS语法基础 盒子的概念与使用 盒子模块设置边界设置元素边框设置元素内边界 盒子模块 在CSS中 将样式调用在每一个元素上 都以一个假想的矩形格式
13、模型看待 一般使用矩形模块的时候 搭配margin属性 border属性以及padding属性 可以更好的控制元素的样式 设置边界 margin的四个属性主要是控制元素边界与文件其他内容的空白距离 四个边界一般按顺时针方向上 margin top 右 margin right 下 margin bottom 左 margin left 属性 四个边界的设置语法一样 基本语法 margin top right bottom left 长度单位 百分比单位 auto 设置元素边框 border style边框样式属性border width边框宽度属性border color边框色彩属性borde
14、r属性的综合设置 border style边框样式属性 利用边框样式属性不仅可以设置单位边框样式属性 还可以对单位边框进行设置 而且也可以利用复合边框样式属性来统一设置四条边框的样式 基本语法 border style 样式值border top style 样式值border bottom style 样式值border left style 样式值border right style 样式值 border style边框样式属性 语法说明 border style是一个复合属性 复合属性的值有四种设置方法 其他4个都是单个边框的样式属性 只能取一个值 样式值属性的具体说明见表10 8 设置
15、一个值 四条边框宽度均使用一个值 设置两个值 上边框和下边框宽度调用第一个值 左边框和右边框宽度调用第二个值 设置三个值 上边框宽度调用第一个值 右边框与左边框宽度调用第二个值 下边框调用第三个值 设置四个值 四条边框宽度的调用顺序为上 右 下 左 border width边框宽度属性 border width属性 是控制元素边框的宽度的一个综合属性 和border style一样也有四种单独的设置方法 分别来定义四条边框的宽度 设置方法和边框样式一样 基本语法 border width边框宽度属性 语法说明 thin medium thick分别表示细 中等 粗 length表示长度单位 b
16、order color边框色彩属性 border color属性是用来控制边框显示的颜色 和边框宽度 边框样式的设置方法一样 也可以分别来设置每个边框的颜色 基本语法 border color 颜色关键字 RGB值border top color 颜色关键字 RGB值border bottom color 颜色关键字 RGB值border left color 颜色关键字 RGB值border right color 颜色关键字 RGB值 border属性的综合设置 在CSS中 border属性用来同时设置边框的样式 宽度和颜色 也可以另外对每个边界属性单独进行设置基本语法 border 边框宽度 边框样式 边框颜色border top 上边框宽度 上边框样式 上边框颜色border bottom 下边框宽度 下边框样式 下边框颜色border left 左边框宽度 左边框样式 左边框颜色border right 右边框宽度 右边框样式 右边框颜色语法说明 每一个属性都是一个复合属性 都可以同时设置边框的样式 宽度和颜色 每个属性的值中间用空格隔开 在这5个属性中 只有border可以
