`

第九章:css样式讲解上

    博客分类:
  • html
阅读更多

 

一、background-color 背景颜色

1、十六进制值  #CC0066    #000

2、英文单词里颜色值  red  gray blue yellow green

 

二、background-image 添加背景图片

1、url("地址")  引用背景图片的地址

2、none  不使用背景图片

 

三、background-repeat 背景重复

1、no-repeat   不重复  只出现一张

2、repeat-x水平方向重复

3、repeat-y竖直方向重复

4、repeat同时水平和竖直两个方向平铺   默认值

 

四、background-position 背景图片的位置

1、使用关键字:top、bottom、left、right 和 center  两两组合而成

一个对应水平方向,另一个对应垂直方向

css

备注:如果只出现一个关键字,则认为另一个关键字是 center

2、百分数值  (水平%   竖直%)

background-position:20% 30%;

备注:如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%

3、具体的值  (水平px   竖直px)

background-position:20px 30px;

 

五:background-attachment背景关联

1、scroll 默认值。背景图像会随着页面其余部分的滚动而移动。

2、fixed 当页面的其余部分滚动时,背景图像不会移动。

3、inherit 规定应该从父元素继承 background-attachment 属性的设置。(IE不支持此属性)

 

六:background 综合样式控制

background:red no-repeat 2px 5px; background: url("") 背景颜色 重复 位置;

 

JAVA技术交流群 532101200

 

分享到:
评论

相关推荐

    CSS设计彻底研究

    第1章:介绍(X)HTML和CSS相关的核心基础知识。 第2章:向读者展示CSS能够给网页设计带来的效果。 第3章:深入讲解CSS的核心机制——盒子模型。 第4章:讲解CSS布局的重点和难点——浮动...第9章:制作两级的下拉菜单。

    精通CSS+DIV网页样式与布局(实例)第一章到十二章

    本章主要介绍了CSS的基础概念,包括如何添加CSS样式(内联样式、内部样式和外部样式表)、选择器的使用(元素选择器、类选择器、ID选择器等)以及基本的样式属性,如颜色、字体、边距和填充。 **第二章:CSS盒模型*...

    精通CSS+DIV源码 第九章

    在深入探讨“精通CSS+DIV源码 第九章”这一主题之前,首先需要理解CSS(层叠样式表)和DIV(定义文档布局的HTML元素)的基本概念。CSS是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言,它...

    Designing without tables using CSS

    - **第九章:文本效果与层叠**:探讨如何利用CSS实现各种文本效果,以及理解层叠是如何影响这些效果的。 #### 六、非显而易见的CSS用途 - **第十一章:改善用户体验**:讨论如何通过巧妙运用CSS来提升网站的可用性...

    HTML5入门视频教程:第五章,CSS3应用plus.rar

    本视频教程专注于HTML5中的一个重要组成部分——CSS3的应用,尤其是在第五章中深入讲解了CSS3的新特性。 CSS3(层叠样式表3)是CSS规范的最新版本,它带来了许多革命性的变化,极大地增强了网页设计的灵活性和表现...

    北大青鸟 8.0 S1使用HTML语言和CSS开发商业站点

    **第九章:网页交互与表单处理** 这一章会讲解如何使用JavaScript处理用户输入,验证表单数据,以及如何使用Ajax技术与服务器进行数据交换。 **第十章:响应式设计与移动优先** 随着移动设备的普及,响应式设计成为...

    《使用HTML语言和CSS开发商业站点》

    2. **CSS样式设计**:CSS(Cascading Style Sheets)用于控制网页的外观和布局。课程中可能涉及选择器的使用,如类选择器、ID选择器、元素选择器,以及盒模型、布局模式(流式布局、网格布局、响应式布局)、定位...

    Pro CSS for High Traffic Websites.pdf

    - **第2章:CSS样式指南**(CSS Style Guide):这一章详细阐述了制定CSS样式指南的重要性,并提供了具体的建议和最佳实践,帮助开发者创建一致且易于维护的CSS代码。 - **第3章:基础知识**(Fundamentals):这...

    CSS样式表授课PPT

    这个“CSS样式表授课PPT”包含了对这一关键技能的深入讲解,分为两部分:第一课——Css 样式基本知识和第二课——在网页中使用Css样式。 ### 第一课:Css 样式基本知识 1. **定义和用途**:CSS是用于分离网页内容...

    [The.CSS3.Anthology(4th,2012)].Rachel.Andrew.文字版.pdf )

    9. **第9章:CSS布局** - **流式布局**:介绍流式布局的概念及其与固定宽度布局的区别。 - **弹性盒子(Flexbox)**:探讨如何使用Flexbox来创建灵活的响应式布局。 - **网格布局(Grid Layout)**:教授如何使用...

    css商业网站布局之道源码(9-13章)

    "CSS商业网站布局之道源码(9-13章)"这一资源显然是一个深入探讨CSS布局技术的教程,涵盖了从第9章到第13章的内容。下面我们将详细解读这些章节可能涉及的关键知识点。 第9章:流体布局与响应式设计 在这一章中,...

    DW CS6中文版零基础自学视频教程第13章 使用CSS3样式表 8节.zip

    在本套“DW CS6中文版零基础自学视频教程第13章 使用CSS3样式表 8节”中,你将全面了解并掌握如何在Dreamweaver CS6中运用CSS3来美化和优化你的网页设计。CSS3是层叠样式表(Cascading Style Sheets)的最新版本,为...

    专业css-Cascading-Style-Sheets-for-Web-Design-Wrox-Professional-Guides(英文原版)

    ##### 第9章:构建CSS布局 - **布局理论**:深入讲解网页布局的基本理论和原则。 - **布局实践**:提供实际操作指南,帮助读者掌握CSS布局技巧。 #### 四、附录内容 - **附录A:HTML 4.01元素**:列举了HTML 4.01...

    Beginning CSS 3rd Edition

    9. **第9章:浮动与垂直对齐** - **主要内容**:介绍了CSS中的浮动机制以及如何实现元素的垂直对齐。 - **核心知识点**: - float属性的作用与限制 - clear属性的使用 - vertical-align属性 10. **第10章:...

    Pro HTML5 and CSS5 Design Patterns

    - **第9章:定位:高级** - 进一步深入定位技术的高级应用,包括复杂布局和特效制作。 - **第10章:文本样式** - 讲解如何通过CSS控制文本的外观,如字体、颜色、大小等。 - **第11章:内容间距** - 探讨如何合理...

    Html+Css+Javascript从入门到精通.pdf

    **第九章:使用框架划分窗口** - **框架基础**:了解框架的作用。 - **创建框架**:实现页面分割。 - **框架嵌套**:实现多层次布局。 - **框架显示属性**:调整框架的外观。 - **框架中使用链接**:导航优化。 - *...

    HTML5 The Definitive Guide to HTML5

    - **第9章:分组内容**:重点讲解如何使用`<figure>`、`<figcaption>`等元素来组合相关的内容块。 - **第10章:创建部分**:探讨如何利用`<header>`、`<footer>`等元素来构建网页的不同部分,增强页面的可读性和导航...

    Introduction to Website Design and Development_ HTML5, CSS3, and JavaScript

    9. **第9章:CSS:样式表** - 介绍CSS的基本概念和语法。 - 包括选择器、规则集等基础知识。 - 学习如何使用CSS来控制页面的布局和样式。 10. **第10章:字体家族** - 介绍如何在网页中使用不同的字体。 - ...

    html5与css3权威编程(第三版)1-15章 源码

    - **第9章**:可能包含HTML5的新特性,如表单控件、离线存储等。 - **第11章**:可能介绍CSS3的布局技巧,如盒模型、Flexbox或Grid布局。 - **第12章**:可能讨论CSS3的样式效果,如边框和背景的高级用法,以及...

Global site tag (gtag.js) - Google Analytics