关闭

CSS样式

标签: csshtml5css样式
238人阅读 评论(0) 收藏 举报
分类:

CSS背景

1、背景色

background-color 属性

p {background-color: gray; padding: 20px;}

background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

2、背景图像

要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。

3、背景重复

background-repeat 属性

  • repeat 水平竖直都平铺
  • repeat-x 水平
  • repeat-y 竖直
  • no-repeat 不允许任何方向上平铺

4、背景定位

background-position 属性

  • center、top、bottom、right、left及两两组合
  • 百分数 background-position:66% 33%;
  • 长度值 background-position:50px 100px;

5、背景关联

如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。

background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。

background-attachment:fixed 防止这种滚动

示例:
所有背景属性在一个声明之中

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 

CSS文本

1、text-indent 缩进文本

这个属性最常见的用途是将段落的首行缩进

p{text-indent: 5em;}

text-indent 还可以设置为负值。(如果对段落设置负值,首行的某些文本可能会超出浏览器窗口的左边界,建议针对负缩进再设置一个外边距或一些内边距:)

p{text-indent: -5em; padding-left: 5em;}

2、水平对齐

text-align

left、right、center、justify(两端对齐)、inherit(从父元素集成text-align属性的值)

3、字间隔

word-spacing

默认值:normal,与设置为0是一样的

正直字间隔增加 负值 字间隔拉近

4、字母间隔

letter-spacing 字符与字符或字母之间的间隔。

5、字符转换

text-transform 处理文本的大小写

none 使用源文档中的原有大小写

uppercase 大写

lowercase 小写

capitalize 只对每个单词的首字母大写

6、文本装饰

text-decoration

none

underline 对元素加下划线

overline 在文本的顶端画一个上划线

line-through 在文本中间画一个贯穿线

blink 让文本闪烁

示例:

去掉超链接的下划线

a{text-decoration: none;}

可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线,又有上划线

a:link a:visited {text-decoration: underline overline};

7、处理空白符

white-space

对源文档中的空格、换行和 tab 字符进行处理

normal :会合并所有的空白符,并忽略换行符

pre : 浏览器不会合并空白符,也不会忽略换行符

nowrap :防止元素中的文本换行,除非使用了一个 br 元素

pre-wrap :保留空白符序列,但是文本行会正常地换行

pre-line :合并空白符序列,但保留换行符。

8、为文本设置阴影

语法text-shadow: h-shadow v-shadow blur color:

h-shadow:水平阴影的位置。允许负值。

v-shadow:垂直阴影的位置。允许负值。

blur:模糊的距离。

color:阴影的颜色。

.h1{
        text-shadow:2px 2px 8px #ff0000;
    }
    .h2{
        text-shadow:2px 2px 4px #000000;
        color:white;
    }
    .h3{
        text-shadow:0 0 3px #ff0000;
    }
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。

CSS字体

在 CSS 中,有两种不同类型的字体系列名称:

  • 通用字体系列 - 拥有相似外观的字体系统组合(比如 “Serif” 或 “Monospace”)
  • 特定字体系列 - 具体的字体系列(比如 “Times” 或 “Courier”)

除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列:

  • Serif 字体
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体

1、指定字体系列

如果用户代理上没有安装 Georgia 字体,就只能使用用户代理的默认字体来显示 h1 元素。我们可以通过结合特定字体名和通用字体系列来解决这个问题

h1{font-family: Georgia,serif;}

2、字体风格

font-style

normal 正常显示

italic 斜体

oblique 倾斜显示

斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。

3、字体变形

font-variant

设定小型大写字母

p {font-variant:small-caps;}

4、字体加粗

font-weight

bold : 粗体

lighter

100~900: 指定9级加粗度

5、字体大小

在所有浏览器中,可以显示相同的文本大小,有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值:

body {font-size:100%;}
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

6、文本与图片垂直对齐方式

img.top{
        vertical-align:text-top;
    }
    img.middle{
        vertical-align:middle;
    }
    img.bottom{
        vertical-align:text-bottom;
    }

text-top 把元素的底端与父元素字体的顶端对齐

middle 把此元素放置在父元素的中部

text-bottom 把元素的底端与父元素字体的底端对齐

%使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。


CSS链接

链接的四种状态:

  • a:link - 普通的、未被访问的链接
  • a:visited - 用户已访问的链接
  • a:hover - 鼠标指针位于链接的上方
  • a:active - 链接被点击的时刻

当为链接的不同状态设置样式时,请按照以下次序规则:

a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后

示例:

文本修饰

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景色

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

向链接添加不同的样式

```
<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:'微软雅黑';}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>请把鼠标指针移动到下面的链接上,看看它们的样式变化。</p>

<p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体尺寸</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本的装饰</a></b></p>
</body>

</html>
```

创建连接框

<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}

a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>

<body>
<a href="/index.html" target="_blank">W3School</a>
</body>
</html>

CSS 列表

ul {list-style-type : square}

ul li {list-style-image : url(xxx.gif)}

li {list-style : url(example.gif) square inside}
属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。square 实心方块circle 空心圆none 不显示标记项
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
marker-offset

CSS 表格

1、表格边框

table, th, td{
    border: 1px solid blue;
}

2、折叠边框

border-collapse 属性设置是否将表格边框折叠为单一边框:

table
{
border-collapse:collapse;
}

table,th, td
{
border: 1px solid black;
 }

3、表格宽度和高度

table
{
width:100%;
}

th
 {
 height:50px;
}

4、表格文本对齐

text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中:

td
{
 text-align:right;
}

vertical-align 属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐:

td
 {
height:50px;
vertical-align:bottom;
}

5、表格内边距

如需控制表格中内容与边框的距离,请为 td 和 th 元素设置 padding 属性:

td
 {
padding:15px;
}

6、表格颜色

下面的例子设置边框的颜色,以及 th 元素的文本和背景颜色:

table, td, th
{
border:1px solid green;
}

th
 {
 background-color:green;
 color:white;
 }

CSS轮廓

属性 描述
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
p 
{
border:red solid thin;
**outline:#00ff00 dotted thick;**
}

元素隐藏:
display:none 隐藏不占用空间
visibility:hidden 隐藏但是占用空间
visibility:visible 元素可见 默认值

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:36965次
    • 积分:912
    • 等级:
    • 排名:千里之外
    • 原创:23篇
    • 转载:8篇
    • 译文:33篇
    • 评论:4条
    最新评论