2-CSS样式学习笔记【适用于入门级别和进阶级别】.doc
CSS-- Cascading Style Sheets,层叠式样式表。该技术始于1996年,1998年5月,level2(水平) 成为了W3C 的新标准。CSS扩展了HTML的功能,CSS与HTML、脚本相结合,可以更加有效的实现对网页元素的布局、排版和显示效果的控制。 **CSS样式学习笔记** **一、CSS简介** CSS(Cascading Style Sheets)是一种层叠样式表语言,自1996年起发展至今,已经成为Web设计的标准之一。1998年5月,W3C发布了CSS Level 2规范,为网页设计提供了强大的样式控制能力。CSS与HTML和JavaScript等技术结合,极大地提升了网页的视觉效果和用户体验。它允许开发者精确地控制网页元素的布局、颜色、字体、大小等属性,实现更灵活、一致的设计。 **二、CSS特点** 1. **标识语言**:CSS是纯文本的样式描述语言,可以用任何文本编辑器创建。 2. **灵活性**:可以与HTML和JavaScript灵活结合,适应不同的设计需求。 3. **易用性**:语法简单,易于学习和使用。 4. **高效性**:减少了HTML中的样式代码,提高了页面加载速度。 5. **一致性**:确保在多种浏览器和设备上的样式表现一致。 6. **可维护性**:通过集中管理样式,便于维护和更新。 7. **可移植性**:同一份CSS样式表可以应用于多个网页或项目。 **三、CSS语法规则** CSS的基本结构是选择器(selector)+属性(property)+值(value),例如: - `tag {property: value;}` 用于定义特定HTML标签的样式。 - `tag.Classname` 选择具有指定class的元素。 - `.Classname` 仅根据class选择元素。 - `tag#IDname` 根据ID选择元素。 - `#IDname` 直接根据ID选择元素。 - 归类规则允许同时定义多个选择器,如 `h1,p{font-family:"黑体"}`。 - 继承规则使子元素能继承父元素的部分样式。 - 情景选择规则允许根据元素的上下文来定义样式,如 `<p i>{font-size:30pt;color:red}`。 **四、CSS与HTML结合方式** 1. **内联样式**:直接在HTML元素中使用`style`属性,如 `<p style="color:red;">文本</p>`。 2. **嵌入样式**:在HTML `<head>`部分使用`<style>`标签定义样式。 3. **链接外部样式表**:通过`<link>`标签引入外部CSS文件,如 `<link href="styles.css" rel="stylesheet" type="text/css">`。 4. **导入外部样式表**:在`<style>`标签内使用`@import`规则导入样式表。 5. **外部样式表**:单独的CSS文件,扩展名为`.css`,不包含HTML标签,遵循CSS语法规则。 **五、CSS应用** 1. 直接在HTML标签中应用样式。 2. 使用`style`属性在标签内定义样式。 3. 使用`class`属性引用预定义的样式类。 4. 使用`id`属性引用独特的样式。 5. 样式优先级:内联样式最高,然后是ID选择器,接着是类选择器和标签选择器,如果样式冲突,后定义的样式优先级更高。 **六、CSS属性示例** 例如,`font-family`属性用于设置字体,如: ```html <style> p { font-family: "幼圆",隶书,宋体; } .en { font-family: "Times New Roman", "Times", "serif"; } </style> ``` 这将确保文本首先尝试使用“幼圆”字体,如果浏览器不支持,则依次使用“隶书”和“宋体”。对于英文文本,`en`类将使用“Times New Roman”作为首选字体。 CSS作为网页设计的核心技术,通过其丰富的样式规则和灵活的使用方式,让网页设计变得更加丰富多彩,同时提高了页面的可访问性和可维护性。无论是初学者还是经验丰富的开发者,深入理解并熟练掌握CSS都是必不可少的技能。
剩余21页未读,继续阅读
评论0
最新资源