two
———样式
背景:
background-color———背景颜色
background-repeat(no-repeat,repeat-y,repeat-x)———不平铺,垂直方向平铺,水平方向平铺
background-image———背景图片
background-position———图片位置
可以使用以下表格的内容,也可以采用%,或者像素等
如:background-position:50% 30% 或者 background-position:50px 30px
单一关键字 | 等价的关键字 |
center | center center |
top | top center 或 center top |
bottom | bottom center 或 center bottom |
right | right center 或 center right |
left | left center 或 center left |
background-attachment(fixed)——–防止图片随着文档向下滚动而滚动
文本:
首行缩进:
text-indent:值可以是负数,为负值的情况下就同文本的悬挂缩进(设置负值可能出现超出浏览器,可以设置padding-left,缩进大小相对于父元素来讲)
text-align:left,right,center,justify(水平对齐)
center 和<CENTER>
不一样,<CENTER>
会使元素也一起移动,而center只是使文本内容移动,不会去移动元素
我去测试的时候没有觉得justify和left有什么不同,希望知道的朋友能给我讲解下?????????????
大家想详细了解text-align的,请戳:
http://www.w3school.com.cn/cssref/pr_text_text-align.asp
字体:
font-family
特定字体:Times,Courier
通用字体:Serif ,Sans-Serif ,Monospace,Cursive,Fantasy
字体可能根据本地已安装的字体是否有该字体进行显示,因此并不是你想设置什么样子的字体就一定会是什么样的,详情可看:
http://www.w3school.com.cn/css/css_font-family.asp
假设用户没有安装Georgia 字体,就可以结合使用该字体和通用字体如:
h1{font-family:Georgia ,serif;}如果字体本身有空格或者特殊符号的要用’ New York’单引号。
字体风格:font-style:(normal-正常,italic-斜体,oblique-斜体)
两个斜体的不同:————-我也不是很懂的这个解释,结果也是看不出来有什么区别,希望明白人能讲解下!!!!!
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
font-variant:把段落设置为小型大写字母字体
html:
<html>
<head>
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>
<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>
</html>
结果:
font-weight:设置文本粗细
font-size:设置文本字体大小 1em=16px em会相对于父元素字体的改变而改变
链接:
a:hover - 鼠标指针位于链接上方
a:link - 普通的、未被访问的链接
a:visited - 用户已访问过的链接
a:active - 链接被点击的时刻
当为链接的不同状态设置样式,其顺序规则是:
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
简介为:a:link,a:visited>a:hover>a:active
text-decoration去掉链接下方的下划线:
a:link {text-decoration:none;} /* 未被访问的链接 */
a:visited {text-decoration:none;} /* 已被访问的链接 */
a:hover {text-decoration:underline;} /* 鼠标指针移动到链接上 */
a:active {text-decoration:underline;} /* 正在被点击的链接 */
列表:
修改列表的标签类型:list-style-type
有时候标志不够可以使用图片:list-style-image
设置标签是在内容内部还是外部:list-style-position
可以把以上三个合并成一个list-style 如:li {list-style : url(example.gif) square inside}
表格:
<style>
table,th,td{
border: 1px solid black;
}
//这个设置会使表格出现双条线,使用border-collapse合并线条
table{
border-collapse:collapse
}
</style>
使用之前:
使用之后:
vertical-align:设置垂直对齐
详情请戳:http://www.w3school.com.cn/css/css_table.asp
轮廓:
属性 | 描述 | CSS |
outline | 在一个声明中设置所有的轮廓属性。 | 2 |
outline-color | 设置轮廓的颜色。 | 2 |
outline-style | 设置轮廓的样式。 | 2 |
outline-width | 设置轮廓的宽度。 | 2 |
样式就到此啦,感觉还有很多关联的地方没有看到,需要找更多的内容来合并起来,这样子才能比较完整的了解,有资源的兄弟姐妹可以分享下哟!!!!!
新增:
边框样式:CSS2 引入了边框颜色值 transparent:这个值用于创建有宽度的不可见边框