文本属性:
text-align:控制一个元素中的内容的水平对齐.允许的值是left right center start end justify(告诉浏览器给文本添加字幕和单词空间,以便每一行文本都占据元素的整个宽度减去任何补白和边框,可能除了最后一行,可以通过text-align-last来控制)和inherit.
text-decoration:允许web编写者为元素文本添加某种效果,属性值为underline overline line-through blink(非浏览器必须支持的值) 和inherit.这些可以组合到一个单个语句中.
text-decoration:overline underline line-through;
当内容显然是一个链接时,通常使用文本装饰取消锚点元素的下划线,对导航按钮也是一样
#nav li a{ text-decoration: none;}
text-indent:在一段或者其他块级元素中缩进第一行文本,接受绝对长度或者百分比,允许负值,负值会导致文本向外缩进.
text-transform:提供了一种方法来控制一个元素的文本大小写,允许的值是uppercase lowercase
capitalize none 和inherit.它可以应用于任何body元素.你可以将位于页面顶部的菜单栏中的链接标记列表显示为大写字母,将页脚中同样的列表显示为小写字母.
line-height:控制段落或者其他块级元素中的行距.接受绝对单位和相对单位;
letter-spacing:设置了字母间的空格数目,属性值可以是带有单位指示的一个长度,或是关键字normal或inherit. normal值等于0.允许负值,效果是让字母看上去挤在一起.word-spacing属性类似设置两个单词间的空间,normal值等于0.
空白:在一个元素中,可以通过修改white-space属性来常规地删除多余空白.允许值是normal nowrap(阻止浏览器折行,直到遇见一个换行字符<br/>,或者达到元素的末尾.超过元素宽度的内容被裁减掉) pre(元素中所有的换行和空白将识别和保留) pre-wrap(当内容对于元素宽度过长时允许浏览器换行,但是在每一行中保留多余的空白) pre-line(告诉浏览器保留换行,在每一行中执行常规的多余空白行删除操作)和inherit.
vertical-align:在对齐表格单元格中的元素时最有用,也可以对任何元素进行指定.用于表格元素时,允许的关键字是top middle 和bottom.它可以用来在内联框中对齐文本,如果该元素设置了一个固定值,内联框高度可能会大于或小于块级元素的line-height的值.
vertical-align还可以拥有以固定单位或相对单位指定的一个偏移量值:
p.under{ vertical-align:-1em;}
vertical-align也可以接受如下的某个关键字值:super(上标) sub(下标) text-top(向顶部对齐) text-bottom(向底部对齐),文本中的内联框将位于其父元素的内容区域的顶部或底部.
盒子属性:
每个HTML块级元素都有一组盒子属性,定义了该元素在web页面上所占据的矩形区域的特征.HTML内联元素也可以有盒子属性,这是它们加入由内容流组成的行的结果.
高度和宽度:一个块级元素的height和width属性是该元素内容所占据的矩形大小.内联元素会忽略height和width.可以通过设置line-height属性来增加/减少差距.
当使用浮动的元素时,必须制定宽度:
#c1{ width: 4%;float:left;}
min-height min-width max-height max-width可以更精确控制元素.
边距和补白:
消除浏览器带来的边距和补白影响:
*{margin:0;padding:0;}
margin和padding属性是一组属性的缩写:top right bottom left;(顺时针进行,给定数值少于4的时候会重复使用给定的值.)
边框:
元素的边框是使用一个或多个边框来设置边框的宽度 样式和颜色.
border-width border-style border-color;
缩写表示法:border{1px solid red;}
圆角:radius,可接受值为绝对值,给边框的角变圆滑.
谷歌浏览器里写法:-webkit-border-radius: 1px;(谷歌浏览器现在也可以不加前面的识别字符)
样式列表:
css提供了3个属性来帮助创建带有样式的列表:list-style-type list-style-position和list-style-image.还有一个缩写属性list-type
list-style-image允许使用一个定制的图像作为列表符号.
list-style-position属性有3个允许的值:inside(把列表项标记放在列表项的内容框中) outside(把列表项标记放在列表项的内容框外,为默认值)inherit
CSS定位:
position属性有4个值:
static.默认属性 常规的 浮动的和内联元素按照它们在HTML源代码中出现的顺序来填充浏览器的窗口
relative.元素的位置从其静态位置偏移一定的量.之前元素占据的空间保留了,以便所有其他的文档元素都能保持其最初的位置.
absolute.元素从文档流删除,并且相对于一个祖先元素来定位.元素所占的空间关闭了,其他的元素重新定位,就好像该元素不存在.(通常与relative一起使用)
fixed.元素从文档流删除,并且相对于浏览器窗口来定位.元素所占的空间关闭了,其他的元素重新定位,就好像该元素不存在.
<!DOCTYPE html>
<html>
<head>
<title>go on </title>
<meta name="keywords" content="asatoga">
<meta name="description" content="只是一个简单的页面=-=">
<meta name="content-type" content="text/html; charset=gbk">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
ul {
list-style: none;
padding: 0;
margin: 0;
}
li { float: left;
position: relative;
width: 8em;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul {
top:auto;
left:auto;
}
li:hover ul {display: block;}
a{
color: red;
}
</style>
<body>
<ul>
<li><a href="#">Apples</a>
<ul>
<li><a href="#">Red delicious</a>
<li><a href="#">Green delicious</a>
<li><a href="#">Yellow delicious</a>
</ul>
</li>
<li><a href="#">Watermelon</a>
<ul>
<li><a href="#">Red delicious</a>
<li><a href="#">Green delicious</a>
<li><a href="#">Yellow delicious</a>
</ul>
</li>
</ul>
</body>
</html>
其他CSS属性:
display和visibility.
display属性控制浏览器将如何显示一个元素.重要的值是none inline block inline-block(告诉浏览器将该元素当成一个内联图像)和run-in.
它不会改变一个元素的本质 而是改变了浏览器如何显示该元素.声明为内联的一个段落,仍然保持其盒子属性,包括其补白和边框.**声明一个段落内联不允许你将该段落嵌套在别的段落中.一个段落不能位于另一个段落中,不管display属性设置为什么.
overflow.
允许的值:hidden(超出隐藏) scroll(超出的内容提供一个滚动条,不管overflow是否存在都能滚动) auto(必要的时候才滚动)和inherit.
浮动和清除:float和clear
float.
允许的值:left right none(默认值,可关闭一个元素之前已经通过css语句设置过的浮动行为的一种方式) inherit(采用父元素的属性值)
clear
允许的值:left right both和none.
text-align:控制一个元素中的内容的水平对齐.允许的值是left right center start end justify(告诉浏览器给文本添加字幕和单词空间,以便每一行文本都占据元素的整个宽度减去任何补白和边框,可能除了最后一行,可以通过text-align-last来控制)和inherit.
text-decoration:允许web编写者为元素文本添加某种效果,属性值为underline overline line-through blink(非浏览器必须支持的值) 和inherit.这些可以组合到一个单个语句中.
text-decoration:overline underline line-through;
当内容显然是一个链接时,通常使用文本装饰取消锚点元素的下划线,对导航按钮也是一样
#nav li a{ text-decoration: none;}
text-indent:在一段或者其他块级元素中缩进第一行文本,接受绝对长度或者百分比,允许负值,负值会导致文本向外缩进.
text-transform:提供了一种方法来控制一个元素的文本大小写,允许的值是uppercase lowercase
capitalize none 和inherit.它可以应用于任何body元素.你可以将位于页面顶部的菜单栏中的链接标记列表显示为大写字母,将页脚中同样的列表显示为小写字母.
line-height:控制段落或者其他块级元素中的行距.接受绝对单位和相对单位;
letter-spacing:设置了字母间的空格数目,属性值可以是带有单位指示的一个长度,或是关键字normal或inherit. normal值等于0.允许负值,效果是让字母看上去挤在一起.word-spacing属性类似设置两个单词间的空间,normal值等于0.
空白:在一个元素中,可以通过修改white-space属性来常规地删除多余空白.允许值是normal nowrap(阻止浏览器折行,直到遇见一个换行字符<br/>,或者达到元素的末尾.超过元素宽度的内容被裁减掉) pre(元素中所有的换行和空白将识别和保留) pre-wrap(当内容对于元素宽度过长时允许浏览器换行,但是在每一行中保留多余的空白) pre-line(告诉浏览器保留换行,在每一行中执行常规的多余空白行删除操作)和inherit.
vertical-align:在对齐表格单元格中的元素时最有用,也可以对任何元素进行指定.用于表格元素时,允许的关键字是top middle 和bottom.它可以用来在内联框中对齐文本,如果该元素设置了一个固定值,内联框高度可能会大于或小于块级元素的line-height的值.
vertical-align还可以拥有以固定单位或相对单位指定的一个偏移量值:
p.under{ vertical-align:-1em;}
vertical-align也可以接受如下的某个关键字值:super(上标) sub(下标) text-top(向顶部对齐) text-bottom(向底部对齐),文本中的内联框将位于其父元素的内容区域的顶部或底部.
盒子属性:
每个HTML块级元素都有一组盒子属性,定义了该元素在web页面上所占据的矩形区域的特征.HTML内联元素也可以有盒子属性,这是它们加入由内容流组成的行的结果.
高度和宽度:一个块级元素的height和width属性是该元素内容所占据的矩形大小.内联元素会忽略height和width.可以通过设置line-height属性来增加/减少差距.
当使用浮动的元素时,必须制定宽度:
#c1{ width: 4%;float:left;}
min-height min-width max-height max-width可以更精确控制元素.
边距和补白:
消除浏览器带来的边距和补白影响:
*{margin:0;padding:0;}
margin和padding属性是一组属性的缩写:top right bottom left;(顺时针进行,给定数值少于4的时候会重复使用给定的值.)
边框:
元素的边框是使用一个或多个边框来设置边框的宽度 样式和颜色.
border-width border-style border-color;
缩写表示法:border{1px solid red;}
圆角:radius,可接受值为绝对值,给边框的角变圆滑.
谷歌浏览器里写法:-webkit-border-radius: 1px;(谷歌浏览器现在也可以不加前面的识别字符)
样式列表:
css提供了3个属性来帮助创建带有样式的列表:list-style-type list-style-position和list-style-image.还有一个缩写属性list-type
list-style-image允许使用一个定制的图像作为列表符号.
list-style-position属性有3个允许的值:inside(把列表项标记放在列表项的内容框中) outside(把列表项标记放在列表项的内容框外,为默认值)inherit
CSS定位:
position属性有4个值:
static.默认属性 常规的 浮动的和内联元素按照它们在HTML源代码中出现的顺序来填充浏览器的窗口
relative.元素的位置从其静态位置偏移一定的量.之前元素占据的空间保留了,以便所有其他的文档元素都能保持其最初的位置.
absolute.元素从文档流删除,并且相对于一个祖先元素来定位.元素所占的空间关闭了,其他的元素重新定位,就好像该元素不存在.(通常与relative一起使用)
fixed.元素从文档流删除,并且相对于浏览器窗口来定位.元素所占的空间关闭了,其他的元素重新定位,就好像该元素不存在.
<!DOCTYPE html>
<html>
<head>
<title>go on </title>
<meta name="keywords" content="asatoga">
<meta name="description" content="只是一个简单的页面=-=">
<meta name="content-type" content="text/html; charset=gbk">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
ul {
list-style: none;
padding: 0;
margin: 0;
}
li { float: left;
position: relative;
width: 8em;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul {
top:auto;
left:auto;
}
li:hover ul {display: block;}
a{
color: red;
}
</style>
<body>
<ul>
<li><a href="#">Apples</a>
<ul>
<li><a href="#">Red delicious</a>
<li><a href="#">Green delicious</a>
<li><a href="#">Yellow delicious</a>
</ul>
</li>
<li><a href="#">Watermelon</a>
<ul>
<li><a href="#">Red delicious</a>
<li><a href="#">Green delicious</a>
<li><a href="#">Yellow delicious</a>
</ul>
</li>
</ul>
</body>
</html>
其他CSS属性:
display和visibility.
display属性控制浏览器将如何显示一个元素.重要的值是none inline block inline-block(告诉浏览器将该元素当成一个内联图像)和run-in.
它不会改变一个元素的本质 而是改变了浏览器如何显示该元素.声明为内联的一个段落,仍然保持其盒子属性,包括其补白和边框.**声明一个段落内联不允许你将该段落嵌套在别的段落中.一个段落不能位于另一个段落中,不管display属性设置为什么.
overflow.
允许的值:hidden(超出隐藏) scroll(超出的内容提供一个滚动条,不管overflow是否存在都能滚动) auto(必要的时候才滚动)和inherit.
浮动和清除:float和clear
float.
允许的值:left right none(默认值,可关闭一个元素之前已经通过css语句设置过的浮动行为的一种方式) inherit(采用父元素的属性值)
clear
允许的值:left right both和none.
124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
