CSS 的基础语法
1、基础语法规则
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
每条声明由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。
selector {property: value}（1）选择器的分组
你可以对选择器进行分组，这样被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是红色的。
（2）继承
根据 CSS，子元素从父元素继承属性。子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示绿色，子元素的子元素也一样。
2、CSS 基础选择器
2.1 派生选择器
通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁，列表中的 strong 元素变为红色，而不是通常的黑色，
2.2 id 选择器
1.id 选择器：
id 选择器可以为标有 id 的 HTML 元素指定特定的样式
id 选择器以“#”来定义---一个id在文档中只出现一次
#divid{}就是一个独立的 id 选择器，#pid a{}
2.3 类选择器
(1)在 CSS 中，类选择器以一个点号显示：
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
2.4 属性选择器
三、 CSS 背景
1、 css 样式-文本
p.uppercase {text-transform: uppercase} 大写
p.lowercase {text-transform: lowercase}小写
p.capitalize {text-transform: capitalize}首字母大写
cursor:pointer;一些不同的光标
text-decoration 属性：去掉链接的下划线
2、 CSS 链接
a:link --普通的、未被访问的链接
a:visited --用户已访问的链接
a:hover --鼠标指针位于链接的上方
a:active --链接被点击的时刻
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
3、 列表类型
1、 列表项图片
4、 CSS 表格
border-collapse ---设置是否把表格边框合并为单一的边框。
border-spacing ---设置分隔单元格边框的距离。
caption-side --- 设置表格标题的位置。
empty-cells ---设置是否显示表格中的空单元格。
table-layout ---设置显示单元、行和列的算法。
四、CSS 盒子模型
我们先来看看盒子的组成包括：
margin(外边距);border(边框);padding(内边距);content(内容)
4、CSS 定位
CSS 有三种基本的定位机制：
普通流:
元素按照其在 HTML 中的位置顺序决定排布的过程
浮动:
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
绝对定位:
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
定位属性:
position,将元素放在一个静态的,相对的,绝对的,或固定的位置：
fixed,和 static
/*position: relative;*/
position: absolute;/*不占用空间位置*/
通过对 top,left,right,bottom 这四个属性的赋值让元素向对应的方向偏移
overflow 设置元素溢出其区域发生的事情
clip 设置元素的显示形状,多用于图片
vertical-align 设置元素的垂直对其方式
z-index 设置元素的堆叠顺序
CSS 浮动
left:元素向左浮动
right:元素向右浮动
none:不浮动
inherit:从父级继承浮动的属性
还有一个就 clear 属性:
主要用于去掉向各方向的浮动属性(包括继承来的属性)
最新文章
- php中实现的一个curl批处理的实例
- js压缩xml字符串，将xml字符串转换为xml对象，将xml对象转换为json对象
- 深入理解脚本化CSS系列第三篇——脚本化CSS类
- css3 翻转和旋转的区别
- 85 megacli-查看raid信息
- 读Javascript高级程序设计第三版第六章面向对象设计--创建对象
- HDU 1671 Phone List(POJ 3630)
- 深入理解计算机系统第二版习题解答CSAPP 2.11
- android获取apk签名信息
- JAVA多线程经典问题 -- 生产者 消费者
- Fail-Fast机制详解
- 【Oracle】表空间管理
- 使用原生php读写excel文件
- 如何设置html中img宽高相同-css
- jira + confluence 安装和破解
- dubbo rest服务 No provider available for the service 错误问题
- 【Java每日一题】20170221
- easyui-combobox 设置option内容不换行
- SqlServer2008基础知识：安全与权限
- 转Python 和C#的交互