| 第二章 表格及样式入门 ① 笔记（美观的表格样式） | 您所在的位置：网站首页 › nbsp是不是文本标记属性 › 第二章 表格及样式入门 ① 笔记（美观的表格样式） |
第二章 表格及样式入门 ① 笔记（美观的表格样式）
|
第二章 表格及样式入门 ① 笔记
1.内容回顾
1.1.课前测试
1.2.上节内容
2.本章重点
2.1表格
2.2CSS样式入门
2.3基础选择器
3.具体内容
3.1.表格
3.1.1.表格概述
3.1.2.表格结构
3.1.3.表格属性
3.1.4.表格合并
3.1.5.表格嵌套
3.2.CSS样式入门
3.2.1 为什么需要CSS
3.2.2 CSS概念
3.2.3 CSS应用
3.2.3.1 内部样式表
2.3.2 外部样式表
2.3.3 行内样式表
3.3.基础选择器
3.3.1 标签选择器
3.3.2 类选择器
3.3.3 id选择器
3.3.4 优先级
4.本章总结
1.内容回顾
1.1.课前测试
第一章 HTML基础
1.课程目标
掌握HTML标签的使用
掌握CSS的用法
能进行网页布局
2.本章内容
2.1.HTML概述
2.2.1.什么是HTML
;;;;;;;;HTML的全称为超文本标记语 言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散 的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令 可以说明文字，图形、动画、声音、表格、链接等。 [1] ;;;;;;;;超文本是一种组织信息的方 式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒 体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种 组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方 便。 [1] 运行结果如下： 
1.2.上节内容
2.本章重点
2.1表格
2.2CSS样式入门
2.3基础选择器
3.具体内容
3.1.表格
3.1.1.表格概述
概念：以行列对齐的方式显示数据。 作用：用于呈现数据 3.1.2.表格结构 基本结构：
3.1.3.表格属性
New Document
学生信息表
学号
姓名
性别
年龄
1001
张三
男
20
1001
张三
男
20
班级人数:2人
3.1.4.表格合并
New Document
姓名
性别
出生日期
年
月
日
张三
男
1999
01
01
李四
女
1998
01
01
运行结果如下：
3.1.5.表格嵌套
New Document
菜单1
菜单2
菜单3
菜单4
菜单5
菜单6
菜单7
菜单8
菜单9
菜单10
左边
中间
右边
运行结果如下： 小结： 概述： 结构： 属性： 合并： 嵌套：
3.2.CSS样式入门
3.2.1 为什么需要CSS
通过定义CSS样式表，能让网页具有美观一致的界面，可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。 通过CSS可以实现内容和样式分离。方便后期维护。 3.2.2 CSS概念Cascading Style sheet 层叠样式表 ： 层叠性 3.2.3 CSS应用 3.2.3.1 内部样式表语法格式： .... 选择器 { 样式属性1 : 值1 ; 样式属性2 : 值2 ; ... }注意：所有符号用英文
2.3.2 外部样式表
外部样式表的使用步骤：
1.定义好html页面内容
2.新建一个单独的css文件
3.在css文件中直接定义样式内容
4.在html文件中引用css文件
css1.css h1{ color:red; } .ys1{ color:green; } .ys2{ color:blue; }css2.css h1{ color:gray; } .ys1{ color:orange; } .ys2{ color:pink; } New Document 这是表题内容这是P标签内容 这是P标签内容 好处：一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。 2.3.3 行内样式表 内容 3.3.基础选择器 3.3.1 标签选择器使用html标签名定义样式，匹配到的html元素，自动应用定义的样式 /* 注释代码 选择器 { 样式属性1 : 值1 ; 样式属性2 : 值2 ; ... } 选择器:用于选择匹配页面中的特定元素 标签选择器: 用html标签名做选择器，自动匹配对应的标签元素 问题: 如何只让第二句和第四句变绿 类选择器,id选择器 */ h1 { font-size:40px; /*字体大小*/ color: red; /*字体颜色*/ text-align:center; /*居中*/ } p { color:green; font-size:20px; text-align:center; } 静夜思床前明月光, 疑是地上霜。 举头弯明月, 我是郭德纲。 3.3.2 类选择器进行更细致化或更灵活的样式控制要使用类样式 使用类样式(类选择器)的步骤： 1. 定义类样式: 在style标签中用”.样式名”的方式定义类样式 2. 使用类样式: 在需要使用类样式的元素中通过class属性引用样式名 New Document /*请让第2个p和第2个li变红*/ /*进行更细致化或更灵活的样式控制要使用类样式*/ /* 使用类样式(类选择器)的步骤： 1. 定义类样式: 在style标签中用".样式名"的方式定义类样式 2. 使用类样式: 在需要使用类样式的元素中通过class属性引用样式名 */ .hs{ color:red; } 这是标题内容这是第1个P标签 这是第2个P标签 这是第3个P标签 这是第4个P标签 这是第1个li 这是第2个li 这是第3个li 这是第4个li运行代码如下：
3.3.3 id选择器
id选择器: identifier 唯一的 id属性定义的元素在整个页面必须唯一，也就是id名是不能重复 id一般用于定义页面的布局元素 div,span id在js中用于js获取对象的时候使用 id定义样式的步骤： 1. 在style标签中用 “#id名”的方式定义样式 2. 在需要使用id样式的元素中通过id属性引用id名来使用样式 New Document /*id选择器: identifier 唯一的 id属性定义的元素在整个页面必须唯一，也就是id名是不能重复 id一般用于定义页面的布局元素 div,span id在js中用于js获取对象的时候使用 id定义样式的步骤： 1. 在style标签中用 "#id名"的方式定义样式 2. 在需要使用id样式的元素中通过id属性引用id名来使用样式 */ #bt{ color:blue; } #p2{ color:green; } #li3{ color:red; } 这是标题内容这是第1个P标签 这是第2个P标签 这是第3个P标签 这是第4个P标签 这是第1个li 这是第2个li 这是第3个li 这是第4个li运行结果如下：
3.3.4 优先级
!important>行内>id选择器>类选择器>标签选择器 样式权重: 对于同一个元素，只使用权重高的样式 !important: 10000 行内: 1000 id: 100 类: 10 标签: 1 New Document /* 样式权重: 对于同一个元素，只使用权重高的样式 !important: 10000 行内: 1000 id: 100 类: 10 标签: 1 */ #zs{ color:purple; } .huangs{ color:orange; } /*交叉选择器*/ h1.huangs{ color:red !important ; } /*后面覆盖前面的,就近原则*/ h1{ color:blue; } 这是为难的标题 asdfasdf运行结果如下：
4.本章总结
表格 CSS样式入门 基础选择器 |
【本文地址】