css创始人层叠样式表,CSS层叠样式表

CSS代码写在哪？

内联样式表：HTML标签内

落霞与孤鹜齐飞，秋水共长天一色

内部样式表：head标签内，title标签后面

p {

font-size: 80px;

}

外部样式表：独立的CSS文件中

p {

border-style: solid;

border-width: 1px;

border-color: black;

text-align: center;

}

使用link标签引入到当前文档中

CSS基本语法

CSS语法由三部分构成：选择器、属性和值：selector {property: value}

CSS选择器：根据id值定位HTML元素

id选择器

• 普通列表项
• 普通列表项
• 普通列表项
• 土豪列表项
• 普通列表项

#tuHao {

font-size: 50px;

}

类选择器：如果想将一组元素设定为相同的样式，可为它们设置相同的class属性值，再通过CSS类选择器指定相同的样式

• 普通列表项
• 普通列表项
• 普通列表项
• 特殊列表项
• 特殊列表项
• 特殊列表项
• 普通列表项
• 普通列表项

.special {

font-size: 50px;

}

选择器分组：不同的元素使用相同的样式时，可以使用“，”隔开，表示并列关系

标题1

标题2

标题3

标题4

标题5

标题6

h2,h3 {

border-style: solid;

border-width: 1px;

border-color: black;

}

派生选择器：使用“父元素 子元素”的格式定位到特定父元素下的子元素

div下的段落

div下的段落

div下的段落

普通段落

普通段落

普通段落

div p {

background-color: blue;

color: white;

font-size: 50px;

}

派生选择器：使用“父元素 子元素”的格式定位到特定父元素下的子元素

div下的段落

div下的段落

div下的段落

普通段落

普通段落

普通段落

div p {

background-color: blue;

color: white;

font-size: 50px;

}

类选择器结合派生选择器

段落

目标段落

段落

目标段落

.targetDiv p {

font-style: italic;

font-size: 30px;

}

元素也可以基于它们的类而被选择

段落

段落

单元格	单元格	单元格
单元格	单元格	单元格
单元格	单元格	单元格

td.big {

background-color: #cccccc;

color: #0000ff;

}

.big {

font-style: italic;

}

CSS框模型

行框：前后不换行，不能指定宽度[a、span、strong等标签，或通过display : inline指定]

落花有意，广告时间流水无情

默认效果：

转为块框：display: block;

可以指定宽度了：

块框：前后换行[div、table、p、h1~h6等，或通过display : block指定]

其实世上本没有路，

走的人多了

，也便成了路

默认效果：

转为行框：display: inline;

宽度设定失效：

行内框：前后不换行，但能指定宽度[通过display : inline-block指定]

其实世上本没有路，

走的人多了

，也便成了路

转为行内框：display: inline-block;

在行内，前后无换行，但是能够设置宽度：

CSS定位机制

文档流

行框：按顺序水平摆放，放不下出现滚动条

块框：按顺序垂直摆放，放不下出现滚动条

相对定位，原来在文档流中的位置仍然保留，当前位置是相对于原始位置偏移后的结果

position: relative;

#pos {

position: relative;

top: 5px;

left: 55px;

}

绝对定位

position: absolute;

从文档流中删除其原来的位置，就好像该元素从来都不存在一样。它当前所处的位置如果和其他元素重合则会遮盖住其他元素的显示，这就是CSS中层的概念。当前位置的定位有两种情况：

①父容器以及祖先容器未定位：相对于浏览器左上角

#pos {

position: absolute;

top: 0px;

left: 0px;

}

②存在已定位的祖先元素：相对于最接近的已定位的祖先元素

测试

#pos {

position: absolute;

top: 30px;

left: 100px;

}

#test {

position: absolute;

top: 5px;

left: 20px;

}

浮动：脱离文档流，向上浮起一层，所有同一容器内的浮动元素根据float属性值按顺序进行排列，例如如果都是float:left则按从左向右的顺序排列。也会遮盖住文档流中未浮动的正常元素

div {

border-style: solid;

border-width: 1px;

border-color: black;

width: 50px;

height: 50px;

margin-right: 5px;

float: left;

}

补充：

设置元素透明

filter:alpha(opacity=90);

-moz-opacity:0.9;

-khtml-opacity:0.9;

opacity:0.9;

设置表格线的细线效果

table {

border-spacing: 1px;

background-color: black;

}

td,th {

background-color: white;

}

使控件不可用

使元素隐藏

display: none;

visibility: hidden;

上一篇: 深度解析Java内存原型

下一篇: Eclipse安装｜配置与使用