【CSS样式笔记】 CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、XHTML等)文档中元素呈现样式的样式表语言。它允许我们将表现样式与结构内容分离,使网页设计更加灵活、可维护性更强。在前端开发中,CSS扮演着至关重要的角色,负责页面的布局、颜色、字体、背景等视觉效果。 CSS样式可以应用于页面的三个主要层:HTML结构层、CSS表现层和JavaScript行为层。HTML(HyperText Markup Language)是结构层,负责提供页面的基本内容和结构;CSS是表现层,定义了这些内容的外观;JavaScript则是行为层,处理用户交互和动态效果。 在浏览器方面,有五大主流浏览器:Internet Explorer(IE)、Google Chrome、Firefox、Opera和Safari。由于各浏览器对CSS的支持程度不同,开发者常常需要使用浏览器前缀(如 `-ms-`、`-webkit-`、`-moz-`、`-o-`)来确保样式在各个浏览器中的一致性。 HTML基础: HTML是一种超文本标记语言,通过浏览器解释并呈现标记标签。基本的HTML结构包括: 1. `<!DOCTYPE html>`:声明文档类型,这里是HTML5。 2. `<html>`:根元素,包裹整个HTML文档。 3. `<head>`:包含元数据,如文档标题和字符集设置。 4. `<meta charset="utf-8">`:设置文档的字符编码为UTF-8。 5. `<body>`:包含实际的页面内容。 HTML标签示例: - 段落标签`<p>内容</p>`:用于创建段落。 - 图片标签`<img src="" alt="" width="" height="" title="">`: - `src`:指定图片的URL。 - `alt`:图片加载失败时显示的文本。 - `width`和`height`:设定图片尺寸。 - `title`:鼠标悬停时显示的提示文本。 标题标签`<h1>`到`<h6>`:用于创建不同级别的标题,字号递减。 换行与水平线: - `<br>`:单行换行。 - `<hr align="" width="" color="">`:创建水平线,`align`控制对齐,`width`设置宽度,`color`设置线条颜色。 列表: - 无序列表`<ul><li>列表项</li></ul>`:不按顺序排列的项目。 - 有序列表`<ol><li>列表项</li></ol>`:按顺序排列的项目。 - 定义列表`<dl><dt>术语</dt><dd>解释</dd></dl>`:用于定义术语和解释。 文本修饰: - 加粗:`<b>`或`<strong>`。 - 倾斜:`<i>`或`<em>`。 - 上标:`<sup>`。 - 下标:`<sub>`。 - 小字号:`<small>`。 特殊字符: - 空格:` `、` `、` `。 - 大于号:`>`。 - 小于号:`<`。 注释: - `<!-- 注释内容 -->`:用于在HTML中添加注释。 容器元素: - `<div>`:块级元素,常用于布局。 - `<span>`:内联元素,用于包裹文本或内容。 超链接: - `<a href="" target="_blank"></a>`: - `href`:链接目标,可以是绝对URL、相对路径、锚点或邮箱链接。 - `target`:控制链接的打开方式,如`_blank`(新窗口)、`_top`、`_self`、`_parent`。 行内框架`<iframe>`:用于在页面中嵌入其他网页,但不在此详细展开。 以上是CSS样式笔记的部分内容,涵盖了HTML基础、CSS应用以及一些基本的HTML元素和属性,这些知识对于理解和创建基本的网页至关重要。
剩余11页未读,继续阅读
- 粉丝: 16
- 资源: 14
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- bootstrap企业网站前端模板下载
- 矩阵作业-包含Eigen安装相关内容
- CSS3几何透明层文本悬停变色特效代码.zip
- CSS3实现的九宫格图片鼠标悬停去除遮罩层特效源码.zip
- MQTT协议的原理、特点、工作流程及应用场景
- Ruby语言教程从介绍入门到精通详教程跟代码.zip
- PM2.5-Prediction-Based-on-Random-Forest-Algorithm-master.zip
- Delphi开发详解:从入门到高级全面教程
- 物理机安装群晖DS3617教程(用U盘做引导)
- 本项目旨在开发一个基于情感词典加权组合方式的文本情感分析系统,通过以下几个目标来实现: 构建情感词典:收集并整理包含情感极性(正面或负面)的词汇 加权组合:通过加权机制,根据词汇在文本中的重要性、
评论0