元素之后的所有
元素。
[attribute]
[target]
选择带有 target 属性所有元素。
[attribute=value]
[target=_blank]
选择 target="_blank" 的所有元素。
:link
a:link
选择所有未被访问的链接。
:visited
a:visited
选择所有已被访问的链接。
:active
a:active
选择活动链接。
:hover
a:hover
选择鼠标指针位于其上的链接。
:focus
input:focus
选择获得焦点的 input 元素。
所有CSS选择器:
所有CSS属性:
HTML引入样式方式
1. 外部样式表
2. 内部样式表(位于 标签内部)
3. 内联样式(在 HTML 元素内部)
This is a paragraph
!important > 内联 > 内部 > 外联
CSS 框模型(盒子模型)
CSS 外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
CSS定位(position 属性)
position 属性值的含义:
static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块
使用absolute绝对定位时注意,用top,right,bottom,left属性调整位置,需要根据哪个父级元素来定位,默认是body标签,如需根据其他父级元素定位,则把该父级元素的position属性设置为relative
CSS 浮动
float 属性 (float: left | right | none | inherit)
当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘
当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”
清除浮动
因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间
.clear {
clear: both;
}
其他清除浮动方式
display: table;
width: 100%
或者
overflow: hidden
JavaScript
HTML DOM 树
HTML DOM访问
· 通过使用 getElementById() 方法
· 通过使用 getElementsByTagName() 方法
· 通过使用 getElementsByClassName() 方法
HTML DOM - 修改 HTML 内容
Hello World!
HTML DOM Element 对象操作:
Json
JSON:JavaScript 对象表示法(JavaScript Object Notation)。
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快,更易解析。
var json = {
"employees": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
],
person: {"names":"Bill", "age":"14"}
}
获取json数据的格式:
json.person //{"names":"Bill", "age":"14"}
json['person'] //{"names":"Bill", "age":"14"}
json['person']['na