CSS核心语法 :选择器{属性:值;...}
选择器
I、元素选择 | ID 选择器| Class选择器
II、伪类选择器 (除连接和表单外)| 属性选择器
选择器可以组合(多个选择器共同指定一类属性),可以有 子孙选择器, 可以有父子选择器
div p
div>p
div+p
div~p
结合了伪类,还可以指定某些状态/选择特定子孙/ 选择特定属性
属性和样式
所有元素都共有的属性
背景属性(颜色、图片)
文本属性(段落、颜色、对齐、修饰等)
字体属性(字体、样式、大小)
边框/OutLine(样式、宽度、颜色)
尺寸(width、height)
可见性(display 内联、块、none/visibility)
特殊元素的样式
列表(样式、图片)
表格(边框折叠?) - 好像没有特别的样式
链表(点击、悬停等 ?) - 悬停等样式也适合其他元素
盒子模型
margin - border - padding - content - padding - border - margin
定位和布局
定位有四种方式
1、static - 静态定位(默认流式布局)
2、relative - 相对定位
3、absolute - 绝对定位
4、fixed - 固定定位
// 绝对和相对都有一个比较固定的位置,不同的是 固定定位不随浏览器的滚动而滚动
结合定位有几种布局方式
1、普通流式布局(块元素纵向扩展、内联元素横向扩展)依次摆放
2、绝对定位布局 - 适用于 下来菜单等等
3、固定定位布局 - 使用于导航 菜单,表头等等
4、使用 浮动元素布局 + clear 属性,可以把某个 快元素布局在页面的某一个位置。
5、使用 可见性 display的样式,实现 table方式布局
6、使用 盒子模型的 marging/padding 实现凝胶布局
普通流式布局+浮动元素布局(左右分栏,可以使用浮动把整个块放到一边) 是页面整体布局的方式;
结合绝对定位布局+固定定位布局 做一些菜单导航的 细微控制
是布局的主要思路。
PS:样式里面,如果是同一个 属性的 不同值需要逗号分隔;如果是 多个属性合并在一起的比如 margin:10px 15px;则不需要逗号分隔