css--背景,边框,列表,链接等属性

浏览器支持IE为-ms-,Firefox为-moz-,chrome和iPhone自带浏览器为-webkit-,Opera为-o-

1.背景:

  • [background-color]CSS属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent" 二者选其一
  • [background-image]CSS background-image 指定在元素的背景中出现的背景图像。这可以是静态文件,也可以是生成的渐变。
  • [background-position]指定背景应该出现在元素背景中的位置。
  • [background-repeat]CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。 指定背景是否应该被重复(平铺)。
  • [background-attachment]"如果指定了 background-image ,那么 background-attachment 决定背景是在视口中固定的还是随包含它的区块滚动的。值有scroll(页面滚动时,背景随之滚动),fixed(固定不滚动),local(滚动元素时,背景随之滚动)
  • [background]background 是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括 color, image, origin 与 size, repeat 方式等等。
  • [background-size]background-size 设置背景图片大小。允许动态调整背景图像的大小。
    ·详细讲color,image,position,repeat,size
    ·background-color默认背景颜色不是white白色!!!而是透明的,所以你希望元素是白色的,必须要明确的设置它。
    ·background-image静态文件,也可以是生成的渐变
    静态文件background-image:url(网络地址或者本地地址),默认清空下,图像在水平和垂直方向上都是重复的!
    生成的渐变background-image: linear-gradient(方向到哪里结束, 开始的颜色, [可以指定多个颜色站点],结尾的颜色);例如:background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
    结果为(从上到下,黄色开始,向下渐变到#dddd00 的50%,然后到橙色):
    线性渐变

·由于默认情况向图像在水平和垂直方向上都是重复的,所以用background-repeat来解决这个问题,它的默认值是repeat,使得整个元素的背景被填充,常见的值为:
no-repeat: 图像将不会重复:它只会显示一次。
repeat-x: 图像将在整个背景中水平地重复。
repeat-y: 图像会在背景下垂直地重复。
例如:HTML文件中:<p>Exciting box!</p>
CSS 文件中:
p {
font-family: sans-serif;
padding: 20px;
background-color: yellow;
background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
background-repeat: no-repeat;
}
结果如下:

不重复的背景图片

·但是这样看起来怪怪的,它现在重叠了文本。我们需要把它放在一个更好的地方。所以我们用到了background-position在指定任意位置放置背景图片,通常,该属性将使用两个通过空格分隔的值,该空间指定了图像的水平(x)和垂直(y)坐标。图像的左上角是原点(0,0)。把背景想象成一个图形,x坐标从左到右,y坐标从上到下。
常用的值类型有:
图片定位

还应该注意,您可以混合并匹配这些值,比如 background-position: 99% center。还要注意,如果您只指定一个值,那么该值将被假定为水平值,而垂直值将默认为center。
在上面CSS文件的代码p中添加:background-position: 99% center;
结果如下:
图片定位为占据水平99%,垂直方向为center

·background-size:可以使用你期望的所有长度单位来指定你想要的值——px,百分比, rem等,例如:background-size:30% 30%;

2.边框:CSS边框属性允许你指定一个元素边框的样式和颜色。


边框

边框简写属性 border:5px solid red;5px指定border-width,solid指定border-style,red指定了border-color

3.列表:
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}


列表实例
列表的所有属性

4.链接:
伪类a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面


链接样式

text-decoration 属性主要用于删除链接中的下划线:a:link {text-decoration:none;}

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容

  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,309评论 2 66
  • CSS边框属性 元素的边框就是围绕元素内容和内边距的一条或多条线。 元素的边框属性: border 简写属性,用...
    Zd_silent阅读 982评论 0 1
  • 1.CSS简介 Cascading Style Sheet 层叠样式表 主要用来定义页面中的表现,HTML 描述页...
    hyt222阅读 822评论 0 0
  • 七年的时间,我读完了大学,念完了硕士。如今参加了工作,一切的一切都很顺利。可是你不在我身边,不能亲眼看到这一切… ...
    伍槐陆樱阅读 249评论 0 0
  • 学完Android基础之后不知道该怎么办?现在开始实战吧!现在来看看一款简易的Android新闻客户端是怎么做的,...
    宝塔山上的猫阅读 18,152评论 12 52