1.页面组织方式
table组织页面
div+css组织页面
2.div span p标签
容器,可以用来包裹其他的html内容,形成一个组的内容
可以对这一组内容统一进行样式的改变和结构的调整
块级元素: 默认情况下独占一行, <div> <p> <h1>~<h6>...
行内元素: 默认情况下多个行内元素可以处在同一行当中, <span> <a> <font>…
3.CSS概述
层叠样式表, 可以对html页面进行美化,实现了显示内容的html代码和展示样式的css代码的分离,增强了页面的展示能力
4.在html页面中引入css样式的方式
(1)通过标签上的style属性引入
可以使用标签上的style属性为当前标签指定具体的css样式
<div style="color:red">aaabbbccc</div>
适用于个别标签添加样式,不建议在页面中大量使用,不利于代码后期的维护
(2)通过style标签的方式引入
在页面的<head>标签中, 通过在<style type="text/css"></style>标签内写css样式的方式引入css,
可以将所有的样式代码集中统一管理,初步实现了样式和html代码的分离
(3)通过链接方式引入CSS样式
在HTML页面的head标签中,通过一个<link rel="stylesheet" href="1.css" type="text/css"/>标签引入外部的css文件的内容
可以将所有的样式代码集中统一管理,真正实现了样式和html代码的分离
选择器
1. 基本选择器
所谓选择器就是可以帮助我们在HTML中选择出想要修饰的标签的技术
(1)标签名选择器
格式: 标签名{...}
通过标签名选择器可以选中指定名称的标签进行样式的修饰
(2)类选择器
class -- 通过HTML中通用的属性class, 可以为标签指定所属的类, class值相同的标签则为一类
通过 .类名{} 的方式来为这一类的标签设置样式
另外,可以为class指定多个值, 多个值之间用空格隔开, 表示一个标签属于多个类, 多个类的样式会同时作用到这个标签上（会覆盖）
(3)id选择器
id -- 通过HTML中通用的属性id, 特点是id的值在整个HTML中是独一无二的, 可以作为标签的唯一标识
通过 #id值{} 的方式来为指定id值的标签设置样式
优先级：id > class > 标签
同类标签： 后出现的会覆盖前面出现的
2. 扩展选择器
基于基本选择器进行更加复杂选择的选择器
(1)后代选择器
在父选择器选择的元素内部, 选中指定的子孙元素, 进行样式的设置
格式: 父元素选择器 子孙元素选择器{...}
(2)子元素选择器
在父选择器选择的元素内部, 选中指定的子元素, 进行样式的设置
格式: 父元素选择器>子元素选择器{...}
(3)分组选择器
将多个选择器选中的元素统一进行样式的设置
格式: 选择器1,选择器2,.....,选择器n{...}
(4)属性选择器
选择具有指定属性条件的元素
格式: 选择器[属性...]...{}
(5)相邻兄弟选择器
如果两个元素具有相同的父亲，且紧邻在一起，则为相邻兄弟，可以通过相邻兄弟选择器选择紧邻A元素后的B元素
格式: 大哥+小弟{...}
(6)伪元素选择器
伪元素选择器选择的不仅仅是某个元素，而是某个指定状态下的元素。
可以选中元素的如下状态
:link 表示元素未被点击的状态
:hover 表示光标移入的状态
:active 表示元素被点击时的状态
:visited 表示元素被访问过后的状态
格式: 选择器:状态{}
盒子模型
外边距/边框/内边距
在css中, 所有的元素都可以看成是一个盒子(框),这些框都可以具有外边距(margin)/边框(border)/内边距(padding),这些值的设定,会直接影响框与框之间的位置关系和框内容与框之间关系,以及边框的样式
外边距
margin 统一的设置外边距
margin-top 设置顶部外边距
margin-right 设置右部外边距
margin-bottom 设置底部外边距
margin-left 设置顶左外边距
**外边距垂直方向上合并
内边距
padding
padding-top
padding-right
padding-bottom
padding-left
边框
border
border-xxx-color
border-xxx-style
border-xxx-width
(其中xxx代表的是top left right bottom)
以上属性
可以使用属性单独指定上下左右的样式
也可以使用复合属性指定样式, 如
margin:10px 20px 30px 40px //上 右 下 左 顺时针方向
margin:10px 20px 30px // 上 左右 下
margin:10px 20px //上下 左右
margin:10px //上下左右
常用属性
常用的css属性
>>display属性 -- 设置元素的显示方式
block: 块级元素的默认值
inline: 行内元素的默认值
inline-block: 既具备行内元素的特性(可以同行显示), 也具备块级元素的特性(可以设置宽高)
none: 用来隐藏一个元素, 这种方式的隐藏是真的隐藏了, 元素在原位置不再占用空间
>>visibility: hidden 这种方式也可以隐藏一个元素, 但是这种
隐藏只是元素不显示了, 在原位置仍然占用空间
**文档的布局方式
1. 文档流式布局
按照html文档中标签的声明顺序，从左到右，从上到下去加载每个标签，加载过程中会考虑标签的外边距
2. 文档的浮动布局
**元素类型的补充
块级元素:
默认情况下独占一行
可为其指定宽高,如果不指定,其中高取决于内容, 由内容撑开, 宽自动填满父元素宽度;
如果指定宽高, 就是指定的宽高, 不会被撑开
其中设置的内边距和边框及外边距都会起作用
行内元素:
默认情况下多个行内元素可以处在同一行
不能指定宽高,宽高只能由内容撑开
设置内边距和边框及左右外边距会起作用, 设置上下外边距无效
行内块元素：display:inline-block
既可以设定宽高，同时也可以让多个元素在同一行显示
不管什么标签，一旦设定了浮动布局，其元素类型变为inline-block
>>text-align 设置元素中文本水平对齐方式
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐
>>vertical-align 属性设置元素的垂直对齐方式
top: 是指元素与行内最高元素的top对齐
middle: 是指元素的中线与行的基线对齐
bottom: 是指元素的底线与行的bottom对齐
baseline: 默认值 指元素与行的基线对齐
>>list-style-type list列表属性
disc:默认值,实心圆。
circle:空心圆。
square:实心方块。
decimal:阿拉伯数字。
none:无
>>字体属性
font-size
font-weight
font-family
color
line-height（和index的height的值一样，字体就会垂直居中）
text-indent
text-decoration（装饰）
>>背景属性
background-color
背景色设置
background-image
背景图片设置
background-repeat
设置或检索对象的背景图像是否及如何铺排
background-position
设置或检索对象的背景图像位置
>>其他
width
height
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
