1. CSS背景

1.1 基本属性

background-color

背景颜色可以那些颜色值，包括RGB函数来设置它

background-image

背景图片我们需要添加一个url函数，url括号双引号内是图片的完整路径和文件名，如果同时添加背景图片和背景颜色，那么背景图片会覆盖掉背景颜色，但是如果背景图片没有被显示出来，这个时候背景颜色就会起作用

注：当我们做一个空元素，它只有标签而没有里面的内容，这个时候我们要先定义这个元素它的高度和宽度，然后才能显示出来你所添加的背景颜色和背景图片的效果

background-repeat

repeat：它表示的就是背景图片的一个填充方式，在做背景图片的时候，通常做很小的一幅背景图片，然后我们再填充的时候，要让它作为背景图片填充满整个页面，使用的是棋盘格填充,在水平和垂直的方向上重复填充整个网页

repeat-x：横向填充一行

repeat-y：纵向填充一列

no-repeat：只显示一次，不重复填充，适合使用一幅很大的背景图片填充

background

上面所有属性可以用background属性来统一的设置，设置时按照背景颜色、背景图片、重复填充方式的顺序

1.2 文件组织形式

images内含名为bg1.gif的1px*30px的图片：

1.3 测试代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻页面</title>
<style type="text/css">#newstitle{height:30px;background:url(images/bg1.gif) repeat-x;
}
#newstitle h1{font: bold 16px "幼圆";text-align: center;line-height: 30px;/*垂直居中对齐*/
}
</style>
</head><body><div id = "newstitle"><!----新闻标题----><h1>金融危机下欧洲华商陷窘境 变思维逆境突破</h1></div></body>
</html>

1.4 效果图

图片高度为30px，因此设置div的高度为30px，水平横向填充

2. CSS超链接

2.1 链接的四种状态

第四种状态超链接点击的时刻就是什么时候超链接被激活，就是当你按下鼠标的时候，这个时候超链接处于激活状态，还有如果这个超链接是需要下载文件，在整个文件下载过程中，超链接都属于活动的超链接

这四种样式的名字都是a开头一个冒号隔开，后面是一个状态，我们把这种超链接或者是这种选择器的类型，称为是伪类选择器，所以超链接的这四种状态下，我们用的是伪类选择器作为它的样式的名字，那么当然如果你要设置在任何状态下，超链接的样式挪么直接去设置a标签

2.2 链接的次序

可以用love and hate这两个单词来记住这个顺序，love里面的l就表示link，v表示visited，hate里面的就表hover，a就表示active。

2.2 测试代码

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title>
<style type="text/css">#othernews {text-align:left;font-size:14px;line-height:1.5em;}a:link {color: #09f;/*浅蓝*/text-decoration: none;}a:visited {text-decoration: none;color: #935;/*红*/}a:hover {text-decoration: underline;color: #03c;/*深蓝*/font-size:150%;}a:active {text-decoration: none;color: #03c;/*深蓝*/}
</style>
</head><body> <div id = "othernews">相关阅读:<p><a href="#" >迪拜华商财富缩水 瞻望前景信心犹豫</a></p><p><a href="#" >全球华商总资产恢复增至3.9万亿美元</a></p><p><a href="#" >华商基金胡宇权：行业不平衡将带来投资机会</a></div>
</body>
</html>

2.3 效果图

运行后显示的普通状态下全部是浅蓝色

鼠标悬停时会有下划线 ,且字号放大到150%

访问过则显示红色

Web前端开发——CSS样式（Ⅱ）背景、超链接样式相关推荐

Web前端开发——CSS样式（Ⅰ）文本与文字样式
目录 1. 单位 2. 颜色 3. 文本 3.1 字符间距letter-spacing 3.2 行高line-height 3.2.1 基本概念 3.2.2 行高的应用--居中垂直对齐效果 3.3 对 ...
Web前端开发——CSS样式之CSS选择器
1. CSS选择器类型 css选择器可分为标签选择器.类别选择器.ID选择器,这里的三种类型主要针对内嵌样式和单独文件样式而言 1.1 标签选择器 1.1.1 测试代码 <!DOCTYPE ht ...
Web前端开发css基础样式总结
颜色和单位的使用颜色用颜色的名字表示颜色,比如:red 用16进制表示演示比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间一般都用16进制表示颜色单 ...
WEB前端学习:CSS学习_用户界面样式
用户界面样式文章目录用户界面样式一.鼠标样式二.轮廓三.防止文本域拖拽四.去除图片底侧空白间隙五.溢出文字隐藏 1. work-break 2. white-space 3. text- ...
Web前端开发CSS基础(2)
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
快来学习一下吧！Web前端开发CSS居中的五大方式
学习css大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望 ...
【web前端开发 | CSS】页面布局之盒子模型
思维导图文章目录思维导图 1:边框 2:内边距 3:外边距外边距合并 1. 相邻块元素垂直外边距的合并 2. 嵌套块元素垂直外边距的塌陷所谓盒子模型:就是把 HTML 页面中的布局元素看作是 ...
【web前端】CSS的背景
补: 文字的垂直居中:文字的高度等于盒子的高度文字偏上:行高小于盒子高度文字偏下:行高大于盒子高度 1.背景颜色一般,默认的背景颜色为transparent(透明) 2.背景图片 logo 装 ...
【web前端开发 | CSS】css元素的显示模式
思维导图一:元素显示模式分类 *网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页. *元素显示模式就是元素(标签)以什么方式进行显示,比如<div> ...

Web前端开发——CSS样式（Ⅱ）背景、超链接样式

1. CSS背景

1.1 基本属性

1.2 文件组织形式

1.3 测试代码

1.4 效果图

2. CSS超链接

2.1 链接的四种状态

2.2 测试代码

2.3 效果图

Web前端开发——CSS样式（Ⅱ）背景、超链接样式相关推荐

最新文章

热门文章