概念:以行列对齐的方式显示数据。
作用:用于呈现数据
基本结构:
学生信息表
学号
姓名
性别
年龄
1001
张三
男
20
1001
张三
男
20
班级人数:2人
姓名
性别
出生日期
年
月
日
张三
男
1999
01
01
李四
女
1998
01
01
菜单1
菜单2
菜单3
菜单4
菜单5
菜单6
菜单7
菜单8
菜单9
菜单10
左边
中间
右边
通过定义CSS样式表,能让网页具有美观一致的界面,可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面,具有更好的易用性和扩展性,通过修改样式文件,能制作出内容相同,而外观不同的多姿多彩的页面。
通过CSS可以实现内容和样式分离。方便后期维护。
Cascading Style sheet 层叠样式表 : 层叠性
3.2.3.1 内部样式表
语法格式:
....
注意:所有符号用英文
3.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标签内容
好处:一个样式文件可以作用于多个页面,具有更好的易用性和扩展性,通过修改样式文件,能制作出内容相同,而外观不同的多姿多彩的页面。
3.2.3.3 行内样式表
内容
使用html标签名定义样式,匹配到的html元素,自动应用定义的样式
静夜思
床前明月光,
疑是地上霜。
举头弯明月,
我是郭德纲。
进行更细致化或更灵活的样式控制要使用类样式
使用类样式(类选择器)的步骤:
1. 定义类样式: 在style标签中用".样式名"的方式定义类样式
2. 使用类样式: 在需要使用类样式的元素中通过class属性引用样式名
New Document
这是标题内容
这是第1个P标签
这是第2个P标签
这是第3个P标签
这是第4个P标签
- 这是第1个li
- 这是第2个li
- 这是第3个li
- 这是第4个li
id选择器: identifier 唯一的
id属性定义的元素在整个页面必须唯一,也就是id名是不能重复
id一般用于定义页面的布局元素 div,span
id在js中用于js获取对象的时候使用
id定义样式的步骤:
1. 在style标签中用 "#id名"的方式定义样式
2. 在需要使用id样式的元素中通过id属性引用id名来使用样式
New Document
这是标题内容
这是第1个P标签
这是第2个P标签
这是第3个P标签
这是第4个P标签
- 这是第1个li
- 这是第2个li
- 这是第3个li
- 这是第4个li