前端之CSS列表及背景类属性

一、列表类属性:

1.列表符号样式:

list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号样式);

2.使用图片作为列表符号:

list-style-image:url(图片路径);

3.列表符号位置:

list-style-position:outside(默认值,在外边)|inside(在里边);

4.去掉列表符号样式:

list-style:none;

常用写法:  ol,ul{list-style:none;}

二、背景类属性:

1.背景颜色:

background-color:颜色值;

注:颜色值设置方法同字体颜色

2.背景图片:

background-image:url(背景图片路径);

注:网页中常见的两种图片:img标签引入图片和背景图片

a)网页中常进行更换的数据型图片使用img标签插入

b) 用来装饰网页,不需要经常更换的图片使用背景图插入

c) 我们可以在背景图上显示任何的文本,图片

3.背景图平铺属性:

background-repeat:no-repeat(不平铺)|repeat(平铺)|repeat-x(横向平铺)|repeat-y(纵向平铺);

4.背景图位置:

background-position:left|center|right|数值  top|center|bottom|数值;

注:a)第一个值代表水平方向,第二个值代表垂直方向

b)当两个值都为center时,可以省略第二个值

c)当设置为数值时,水平方向向右为正值,向左为负值,垂直方向向下为正值,向上为负值

5.背景属性简写方式:

background:背景色 背景图 背景平铺属性 背景图位置;

eg: background:#f00 url(1.jpg) repeat-x left center;

6.背景图固定:

background-attachment:scroll(默认值)|fixed(固定);

注:当页面出现滚动条时,背景图不跟随滚动条滚动,设置为fixed

7.背景图显示原则:

(a)当容器尺寸等于背景图尺寸时,背景图正好显示在容器中

(b)当容器尺寸大于背景图尺寸时,背景图默认平铺,直至铺满整个容器

(c)当容器尺寸小于背景图尺寸时,背景图只能显示容器范围以内的部分

8.网页中常见的图片格式:

a)jpg:适用于色彩数量比较丰富的图片,像素点越多越清晰

b) gif:支持动画,支持透明

c) png:支持透明

原文地址:https://www.cnblogs.com/21-forever/p/10849665.html

时间: 2024-11-07 06:17:41

前端之CSS列表及背景类属性的相关文章

css的应用背景的属性以及图片的定位

css中要注意三种样式:行内样式,内部样式表,外部样式表以及选择器的优先级问题! 行内样式就是代码写在具体网页中的一个元素内:比如:<div style="color:#f00"></div> 内嵌式:就是在</head>前面写:比如:<style type="text/css">.div{color:#F00}</style> 外部式:就是引用外部css文件:比如:<link rel=‘styles

CSS入门(背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解)

一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复. 提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果. 属性值:url('URL') 指向图像的路径.none 默认值.不显示背景图像.inherit  规定应该从父元素继承 background-image 属性的设置. 2.background-s

前端学习 -- Css -- 字体的几个属性学习

font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique它们的效果往往是一样的 - 一般我们只会使用italic font-weight可以用来设置文本的加粗效果 可选值: normal,默认值,文字正常显示 bold,文字加粗显示 该样式也可以指定100-900之间的9个值, 但是由于用户的计算机往往

好程序员web前端分享css常用属性缩写

好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 pr

CSS基础(背景、文本、列表、表格、轮廓)

CSS 背景属性 属性 描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其余部分滚动. background-color 设置元素的背景颜色. background-image 把图像设置为背景. background-position 设置背景图像的起始位置. background-repeat 设置背景图像是否及如何重复. CSS 文本属性 属性 描述 color 设置文本颜色 directi

CSS背景颜色属性值转换

<!DOCTYPE html> <html><head><meta charset="UTF-8"> <title>CSS背景颜色属性值转换</title> <style type="text/css"> .top_tips { position:relative; width:1000px; margin:20px auto; padding:10px; color:#272727

前端之CSS的属性引入方式、选择器、选择器优先级

目录 1011 前端之CSS的属性引入方式.选择器.选择器优先级 一.CSS介绍 二.CSS语法 2.1CSS实例 2.2 CSS注释 三.css属性的引入方式 3.1 行内样式 3.2 内部样式 3.3 外部样式 四.CSS选择器 4.1 元素(标签)选择器 4.2 id选择器 4.3 类选择器 4.4 通用选择器 4.5 后代选择器 4.6 儿子选择器 4.7 毗邻选择器 4.8 兄弟选择器 4.9 属性选择器 4.10 分组和嵌套选择器 4.11 伪类选择器 4.12 伪类元素选择器 五.

css背景及css列表

CSS背景 background是一个综合属性,它分为以下几个属性. background-color 背景色 background-image 背景图片 background-repeat 设置背景图的平铺方式 属性值:no-repeat repeat-x repeat-y background-position 设置或检索对象的背景图像位置 background-size 设置背景图的尺寸 background-attachment 设置或检索背景图像是随对象内容滚动还是固定的 fixed 

前端学习 -- Css -- 有序列表和无序列表

列表就相当于去超市购物时的那个购物清单, 在HTML也可以创建列表,在网页中一共有三种列表: 1.无序列表 2.有序列表 3.定义列表 无序列表 - 使用ul标签来创建一个无序列表 - 使用li在ul中创建一个一个的列表项, 一个li就是一个列表项 通过type属性可以修改无序列表的项目符号 可选值: disc,默认值,实心的圆点 square,实心的方块 circle,空心的圆 注意:默认的项目符号我们一般都不使用!! 如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置 ul和li