第六篇 CSS样式 背景、背景图、文本、链接
来源:互联网 发布:金融行业待遇 知乎 编辑:程序博客网 时间:2024/05/20 00:49
元素背景、文本(字体)样式、链接
这里我们只学习常用的一些,更多的扩展就要同学们自己去了解,或者下方评论。
这里我们为了简便,用的是CSS的内嵌形式。
元素背景:
我们写模块的时候,有的时候为了区别多个模块,我们会采用一些明显的方式,比如背景(background)。
背景颜色:
<div style="background:#dedede;">我是浅灰色背景</div>
因为div是块级元素,所以背景会覆盖整行,那么我们我们将 div换成span试试呢
<span style="background:#dedede;">我是span浅灰色背景</span>
换成行级元素,它的宽,只有它内容那么大。
背景图片:
<div style="background-image: url('949282.jpg');"></div>
同学们要看好格式哦,image是图片,url则是地址,里面的文件名要用单引号或双引号包起来,否则会报错,因为我们是内嵌形式,所以不能用双引号。但是这里有问题,图片不出来,是没找到图片,还是没有图片,还是这句话有错呢?答案是,图片找到了,也出来了,只是它是背景图片,是作为一个背景存在的,如果你div里面没有内容,那它则也不显示出来。那我们再给div加内容:
<div style="background-image: url('949282.jpg');">我这里有背景图</div>
这样的话,背景图就会出现,但是只有一行,并不是图片本身那么大(高),那么怎么办呢?我们可以去检查图片的高度,然后给div一个高度:
<div style="background-image: url('949282.jpg');height:1200px;"></div>
我这里的1200px,是老师演示的图片的高度,同学们可以自己照一张图片,看它的大小做一下测试,这样图片就会铺满它的高度,它还会自动去匹配它的宽度,如果它本身是1920px(宽)*1200px(高),你设置了它的高1200,那么他会自动设置宽为1920px。我们拉动浏览器,图片不会变小,而是少去一部分,那么我们再给它加一个属性:
<div style="background-image: url('949282.jpg');height:1200px;background-size: 100% 100%;"></div>
background-size 是指它的大小,那么我们给了两个 100% 就是说,第一个它的宽度是页面的100%,第二个是高度为100%,如果少给一个100%,它的高则会随着页面而变化,则会形式“重复”,图片会变多,沾满这个div的高。
那么举一反三,行级元素用背景图,会怎么样呢?同学们自己试试。
文本样式:
<div style="color:red;">我是红色的字</div><!--font-weight 是设置字体的粗细,值区间为 100-900 越高字体越粗--><div style="font-weight: 700;">我是加粗的字</div><!--font-size 是设置字体大小的,单位有px em等--><div style="font-size: 21px;">我是设置过了大小的字</div><div style="text-decoration: overline;">我是有顶划线的</div><!--常见商城里,原价多少,被删除,就可以用这个--><div style="text-decoration: line-through;">我是被删除的字</div><div style="text-decoration: underline;">我是有下划线的</div>
链接:
超链接 a标签,它还有几个属性,其他标签也可以使用,但因为其他标签没有跳转的操作,所以属性不能完全测试,需要用到之后的js动态才行,所以这里我们还是用a标签来演示:
这里使用的是内联或外联。
css:
a:hover{ /*这里我们采用元素控制器,在其后方跟 :hover 意思是:鼠标指针位于链接的上方*/ color:red;}a:link{ /*这里我们采用元素控制器,在其后方跟 :link 意思是:普通的、未被访问的链接*/ color:fuchsia;}a:visited{ /*这里我们采用元素控制器,在其后方跟 :visited 意思是:用户已访问的链接*/ color:#ffff00;}a:active{ /*这里我们采用元素控制器,在其后方跟 :active 意思是:链接被点击的时刻*/ color:darkcyan;}
html:
<a href="aa.html">我是超链接</a>
阅读全文
0 0
- 第六篇 CSS样式 背景、背景图、文本、链接
- CSS背景;链接;文本
- CSS样式笔记_背景文本字体链接
- CSS样式——文本、链接、鼠标、滚动条、背景
- CSS样式_背景&文本
- CSS边框、背景、文本样式
- 3.CSS基本样式:背景、文本、字体、链接、列表、表格、轮廓
- CSS列表 背景图样式
- CSS入门之背景样式实例,背景图滚动:background-attachment,background复合样式
- Css样式详解--背景样式【已经熟记,形成文本】
- 背景图及链接应用样式
- CSS样式背景样式
- CSS样式(背景、文本、字体)学习笔记
- CSS温故第二天【样式】-背景 文本 字体
- css背景样式css背景样式
- Css样式详解--字体样式和链接样式【已经熟记,形成文本】
- CSS样式之背景样式
- CSS之背景样式
- 《HTTP权威指南》读书笔记之前两章
- HDU 1166 敌兵布阵(线段树)
- 用matplotlib作图——颜色与线型控制
- Maven及Eclipse配置Maven
- 【剑指offer】剑指offer 练习笔记
- 第六篇 CSS样式 背景、背景图、文本、链接
- Webstorm中使用babel转码器
- 学问Chat UI(3)
- LeetCode-Easy-Java-Non-decreasing Array
- STM32之内存分布与总线
- (转) arcgis for flex 画的graphic面,在其面上也能移动地图(及补充)
- Android Studio遇到的问题:Your CPU does not support required features (VT-x or SVM)
- POJ 1389 Area of Simple Polygons 线段树 扫描线
- ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException