CSS样式

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 元素可见 默认值

阅读更多
版权声明:本文为博主原创文章,欢迎转载~ https://blog.csdn.net/safiri/article/details/51543308
文章标签: css html5 css样式
个人分类: HTML5
想对作者说点什么? 我来说一句

css样式 比较好的CSS样式

2009年01月20日 152KB 下载

css样式中文手册css样式中文手册

2008年08月26日 536KB 下载

常用CSS样式和效果

2008年11月11日 68KB 下载

常用的css样式

2011年12月31日 10KB 下载

CSS样式重写.css

2018年04月20日 981B 下载

jqueryCSS样式

2010年07月29日 26KB 下载

CSS样式按钮CSS样式按钮

2011年01月23日 4KB 下载

CSS样式参考.rar

2009年08月08日 12KB 下载

css样式实例,用法

2011年03月10日 123KB 下载

没有更多推荐了,返回首页

不良信息举报

CSS样式

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭