css图标样式,图标的样式

css图标的写法

html代码部分

成都创新互联公司专业为企业提供阜城网站建设、阜城做网站、阜城网站设计、阜城网站制作等企业网站建设、网页设计与制作、阜城企业网站模板建站服务，10余年阜城做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

!doctype html

html

head

meta charset="utf-8"

title图标写法/title

/head

body

div id="icon"

span class="price"#65509;89.0/span

a href="#" class="btn"去开团nbsp;gt;/a

/div

/body

/html

下面是css代码部分,处理了浏览器的兼容

style

#icon{display:inline-block;}

.price{display:inline-block; background:#E60012; font-size:40px; color:#fff; float:left; padding:0px 60px; height:86px; line-height:86px; -moz-border-radius-topleft:43px; -moz-border-radius-bottomleft: 43px; -webkit-border-top-left-radius:43px; -webkit-border-bottom-left-radius:43px; border-top-left-radius:43px; border-bottom-left-radius:43px;}

.btn{display:inline-block; background:#000; font-size:40px; color:#fff; text-decoration:none; float:left; padding:0px 60px; height:86px; line-height:86px; -moz-border-radius-topright:43px; -moz-border-radius-bottomright: 43px; -webkit-border-top-right-radius:43px; -webkit-border-bottom-right-radius:43px; border-top-right-radius:43px; border-bottom-right-radius:43px;}

/style

效果图

CSS-自定义鼠标图标

解析：前面的url是自定义鼠标图标的路径，可以为相对/绝对路径。第二个参数是css标准的cursor样式。可换成其他属性（如pointer/crosshair/default/等）

注意：w3school推荐第二个参数必须定义一个普通的光标，以防止url定义的光标有备用选项。另外，IE下第二个参数可以省略。

自定义鼠标图标，需要注意以下几点:

① 图标的格式

IE支持cur,ani,ico这三种格式，FF支持bmp,gif,jpg,cur,ico这几种格式，不支持ani格式，也不支持gif动画格式，因此一般将url引用的图标存为ico或cur格式比较好。

② 图标的大小

鼠标图标的尺寸推荐32*32，否则可能出现大小不一致问题。

参考文章： 使用自定义的鼠标图标

这种图标用css怎么做

可以在阿里图库中下载相应的图标，下到本地后

第一步：拷贝项目下面生成的font-face

@font-face {font-family: 'iconfont';

src: url('iconfont.eot');

src: url('iconfont.eot?#iefix') format('embedded-opentype'),

url('iconfont.woff') format('woff'),

url('iconfont.ttf') format('truetype'),

url('iconfont.svg#iconfont') format('svg');

}

第二步：定义使用iconfont的样式

.iconfont{

font-family:"iconfont" !important;

font-size:16px;font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;}

第三步：挑选相应图标并获取字体编码，应用于页面

i class="iconfont"#x33;/i

font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。

相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。

因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。

不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

第一步：拷贝项目下面生成的fontclass代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑选相应图标并获取类名，应用于页面：

i class="iconfont icon-xxx"/i

html5 css3样式图标怎么做

html5 css3样式图标制作方法：

1、html代码：

div id="boxes"

div id="boxShortcode"border-radius: 40px (shortcode)/div

div id="box1"border-top-right-radius: 40px (same on both axis)/div

div id="box2"border-top-right-radius: 20px 40px (x y) /div

div id="box3"border-top-right-radius: 40px 20px (x y) /div

/div

2、css样式代码：

#boxes div { margin-bottom: 20px; height: 50px; padding-left: 20px }

#boxShortcode {

background: cyan;

border-radius: 40px;

}

#box1 {

background: red;

border-top-right-radius: 40px;

}

#box2  {

background: yellow;

border-top-right-radius: 20px 40px;

}

#box3 {

background: lime;

border-top-right-radius: 40px 20px;

}

3、运行结果：

常用重要CSS样式的属性

盒子模型是CSS中一个很重要的概念，页面中的所有元素都可以看成一个盒子，并占据一定的页面空间，一个页面由很多盒子组成，盒子之间会互相影响。只有掌握盒模型以及其中每个属性的用法，才能真正控制好页面元素。

盒子模型主要定义四个区域： 内容(content)、内边距/填充(padding)、边框(border)和外边距(margin) 。

盒子的内容区域存放文本和图片等页面元素，拥有如下属性：

边框基本属性：

通过一个属性设置四个方向边框的宽度、样式、颜色

属性：border

取值：width style color;

只设置某一条边框的宽度、样式、颜色

语法：border-方向（top/right/bottom/left）：width style color;

只设置边框的宽度、样式、颜色中的一种

语法：border-属性（width/style/color）：取值;

只设置某一条边框的宽度、样式、颜色中的一种

语法：border-方向（top/right/bottom/left）-属性（width/style/color）：取值;

属性：border-radius

作用：设置倒角位置处圆的半径，半径越大，弧度越大。

取值：

属性：border-image

语法：

border-image-source ：引入背景图片

取值：

默认值：无图片

url(图片URL地址)

border-image-slice ：切割引入背景图片，把边框背景切成9份

取值：

number：默认单位px

百分比：

fill：保留边框图像的中间部分

border-image-width ：指定边框图片的宽度

border-image-repeat ：指定边框背景图片的排列方式，可定义2个参数，即水平和垂直方向

取值：

Stretch：默认值，拉伸

Repeat：平铺

Round：取整平铺

内容区域和边框（边缘）之间的距离

语法：padding: 值；

单边设置：padding-方向（top/right/bottom/left）:值；

取值：

数值px

百分比

内边距的简写方式：

padding:value;

四个方向内边距的值均为value

padding:value1 value2;

Value1为上下内边距的值，value2为左右内边距的值

padding:value1 value2 value3;

Value1为上内边距的值，value2为左右内边距的值，value3为下内边距的值

padding:value1 value2 value3 value4;

上右下左内边距的值分别为value1， value2， value3， value4

外边距指元素与元素之间的距离，即围绕在元素边框之外的空白区域，通过外边距可以为元素创建额外的“空间”。默认不能被其他元素所占据，用于拉伸两个元素间的距离。

语法：margin: 值；

单边设置：margin-方向（top/right/bottom/left）:值；

取值：

重新制定元素尺寸计算模式

属性：box-sizing

取值：

属性：resize

取值：

位于元素边框之外的一条线

属性：

outline：width style color;

属性：box-shadow

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

取值：由一组值构成的值列表

属性：background-color

取值：颜色值或transparent

注意：背景颜色是从边框位置处开始绘制

属性：background-image

取值：url(背景图像URL)

属性：background-repeat

取值：

属性：background-attchment

取值：

scroll：默认值，滚动

fixed：固定

属性：background-position

取值：

属性：background-size

取值：

属性：background-origin

取值：

属性：background-clip

取值：

CSS3多背景通过为每个背景属性提供多个属性值实现。

font 简写属性语法：

将所有字体属性合写为一行，其中font-family是复合属性中必不可少的属性。

可以不设置其中的某个值，如果省略值地话，就使用属性的默认值。

②文本属性：

（2）CSS3文本阴影属性：

属性：text-shadow

作用：产生阴影和模糊主体

语法：

作用：定义列表的编号样式

属性：list-style-type

作用：用于设置列表项的图像属性

语法：

图像URL地址：图像的相对路径或绝对路径

none：默认值，不指定图像

注意：图片图标与文字之间的距离在不同浏览器中是不一样的，因此，一般情况下不采用这种方式来设置列表的图片样式。

通过设置li的背景图片的方式来设置列表图片基本步骤：

设置list-style-type属性值为none

设置li标记的背景属性backgruond

作用：用于声明列表标志相对于列表项内容的位置

语法：

作用：可以同时设定列表样式类型、列表样式位置、列表样式图片等属性的值。

语法：

注意：

可以不设置其中的某个值，未设置的属性采用默认值

同时指定list-style-image和list-style-type时，list-style-image优先显示，除非list-style-image设置为none，或图片路径错误无法显示

当列表与列表项目同时使用样式时，列表项目的样式优先显示

特点：

可以设置宽度和高度

默认情况下每个块级元素独占一行

作用：

块级元素主要用于页面布局

常用块级元素：

div、p、h1~h6、ol、ul等

特点：

不可以设置宽度和高度，其宽度就是自身文字或图片的宽度

默认情况下多个行内元素会在一行内显示，遇父元素边界时会自动换行

作用：

行内元素主要用于设置文样式

常用行内元素：

a、span、em、b、i、strong、img、input等

作用：控制页面元素脱离原有文档流，实现向左或向右移动，直到该元素外边缘碰到其包含框或另一个浮动框的边缘停止，标准流中的其他盒子将顶到浮动盒子的位置。浮动的元素不占据实际空间。

属性： float

取值：

浮动元素不会相互重叠；

浮动元素不会上下浮动，如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前任何浮动元素的位置。

作用：规定元素的哪一侧不允许出现其他浮动元素。

取值：

作用：控制页面元素在页面中的位置。

属性：position

取值：static/relative/absolute/fiexed

默认属性值，元素按照标准文档流进行排列，块级元素独占一行， 行内元素位于一行内显示，一行显示不下，自动换行。

特点：

相对于自身原有位置进行偏移

仍处于标准文档流中

随即拥有偏移属性和z-idex属性

偏移属性:

left:数值px;

right:数值px;

top:数值px;

bottom:数值px;

当元素相对定位后会产生Z轴上的堆叠，不设置z-index属性时，默认该元素出现在X轴和Y轴构成的平面上。

特点：

建立了以包含块为基准的定位

绝对定位的元素的位置相对于最近的已定位祖先元素（设定了绝对定位、相对定位或固定定位中的任何一种），如果元素没有已定位的祖先元素，则该元素的位置相对于浏览器窗口。

完全脱离了标准文档流

随即拥有偏移属性和z-idex属性

偏移属性：

left:数值px;

right:数值px;

top:数值px;

bottom:数值px;

绝对定位未设置偏移量的特点：

无论是否存在已经定位的祖先元素，都保持在元素的初始位置

脱离了标准文档流

设定固定定位的元素框的表现类似于将position设置为absolute，不过其包含块是浏览器窗口本身。

在计算机显示中把垂直于屏幕平面的方向称为Z方向，CSS绝对定位容器的z-index属性即对应该方向。

作用：用于控制元素的层叠次序，使得某个元素浮于其他元素之上。

语法：

auto：遵循其父元素的定位

number：整数，可负，值大者叠加在上层

注意：使用z-index属性时，要求该元素的position属性值为absolute、relative或fixed。

作用：用于定义建立布局时元素生成的显示框类型

语法：dispaly:值;

作用：用于定义建立布局时元素生成的显示框类型

语法：visibility:值;

如何用css显示一个图片中多个小图标？

CSS显示一个大图片中的多个小图标，主要是用background-position这个属性来控制的。

首先先将放置背景小图标的元素的大小设置成图片里图标的实际大小，用width和height设置，然后用background-image把背景图片放进去，比如：

.showImage{

background-image: url(9pic2.jpg);

width: 100px;

height: 100px;

}

然后用background-position属性调整背景图片的位置，它有两个值分别表示背景图片沿着x和y轴移动的距离。

扩展资料

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），每个属性都有一个值，属性和值用冒号分隔。CSS 声明总是以分号 ; 结束，声明组以大括号 {...} 括起来。为了让 CSS 可读性更强，可以每行只描述一个属性。

CSS 注释是用来解释代码，并且可以随意编辑，浏览器会忽略它。CSS注释以 "/*" 开始，以 "*/" 结束。

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法：内联样式、内部样式、外部样式。