Web前端:CSS篇(二)背景,文本,链接

CSS 背景

背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

body {background-color:#b0c4de;}

CSS中,颜色值通常以以下方式定义:

  • 十六进制 - 如:"#ff0000"
  • RGB - 如:"rgb(255,0,0)"
  • 颜色名称 - 如:"red"

以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

PS:一般来说,如果用的是好用点的文本编辑器,这个颜色是可以直接选择的

背景图像

background-image 属性描述了元素的背景图像.

默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.

页面背景图片设置实例:

body {background-image:url('图片文件URL');}

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,

下面可以使图像只在水平方向平铺 (repeat-x)

body
{
background-image:url('图片文件URL'');
background-repeat:repeat-x;
}

背景图像- 设置定位与不平铺

如果你不想让图像平铺,你可以使用 background-repeat 属性:

body
{
background-image:url('图片文件URL'');
background-repeat:no-repeat;
}

以上实例中,背景图像与文本显示在同一个位置,为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

补充:CSS3 多重背景(multiple backgrounds)

多重背景,也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加,缩写时为用逗号隔开的每组值;用分解写法时,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值。

语法缩写如下:

background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

可以把上面的缩写拆解成以下形式:

background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

注意:

  •  用逗号隔开每组 background 的缩写值;
  •  如果有 size 值,需要紧跟 position 并且用 "/" 隔开;
  •  如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。
  •  background-color 只能设置一个。

CSS 文本效果

文字颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

  • 十六进制值 - 如: #FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red



 
test 




这是标题 1

这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。

这是一个类为"ex"的段落。这个文本是蓝色的。

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。




 
test 




CSS text-align 实例

2024.8.17

这是文本内容

注意: 重置浏览器窗口大小查看 "justify" 是如何工作的。

文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线,使界面更佳美观:




 
test 




链接到: 百度

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母,或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

字体系列

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。

多个字体系列是用一个逗号分隔指明:

p{font-family:"Times New Roman", Times, serif;}

字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值:

  • 正常 - 正常显示文本
  • 斜体 - 以斜体字显示的文字
  • 倾斜的文字 - 文字向一边倾斜(和斜体非常类似,但不太支持)

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

字体大小

font-size 属性设置文本的大小。

能否管理文字的大小,在网页设计中是非常重要的。但是,你不能通过调整字体大小使段落看上去像标题,或者使标题看上去像段落。

请务必使用正确的HTML标签,就

-

表示标题和

表示段落:

字体大小的值可以是绝对或相对的大小。

绝对大小:

  • 设置一个指定大小的文本
  • 不允许用户在所有浏览器中改变文本大小
  • 确定了输出的物理尺寸时绝对大小很有用

相对大小:

  • 相对于周围的元素来设置大小
  • 允许用户在浏览器中改变文字大小

 如果你不指定一个字体的大小,默认大小和普通文本段落一样,是16像素(16px=1em)。

设置字体大小像素

设置文字的大小与像素,让您完全控制文字大小:

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。

虽然可以通过浏览器的缩放工具调整文本大小,但是,这种调整是整个页面,而不仅仅是文本

用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em




 
test




This is heading 1

This is heading 2

This is a paragraph.

使用 em 单位,允许在所有浏览器中调整文本大小。 不幸的是,仍然是IE浏览器的问题。调整文本的大小时,会比正常的尺寸更大或更小。

在上面的例子,em的文字大小是与前面的例子中像素一样。不过,如果使用 em 单位,则可以在所有浏览器中调整文本大小。

不幸的是,仍然是IE浏览器的问题。调整文本的大小时,会比正常的尺寸更大或更小。

使用百分比和EM组合

在所有浏览器的解决方案中,设置 元素的默认字体大小的是百分比:

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

CSS 链接

不同的链接可以有不同的样式。

链接样式

链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。

特别的链接,可以有不同的样式,这取决于他们是什么状态。

这四个链接状态是:

  • a:link - 正常,未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻



 
test 



这是一个链接

注意: a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。

注意: a:active 必须在 a:hover 之后。

当设置为若干链路状态的样式,也有一些顺序规则:

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

常见的链接样式

根据上述链接的颜色变化的例子,看它是在什么状态。

让我们通过一些其他常见的方式转到链接样式:

文本修饰

text-decoration 属性主要用于删除链接中的下划线:




 
test 




This is a link

注意: hover必须在:link和 a:visited之后定义才有效.

注意:active必须在hover之后定义是有效的.

背景颜色

背景颜色属性指定链接背景色:

a:link {background-color:#B2FF99;}    /* 未访问链接 */
a:visited {background-color:#FFFF85;} /* 已访问链接 */
a:hover {background-color:#FF704D;}   /* 鼠标移动到链接上 */
a:active {background-color:#FF704D;}  /* 鼠标点击时 */

你可能感兴趣的:(Web前端,前端,css)