【css content属性怎么用】教程文章相关的互联网学习教程文章

css 让文字不被选中之-moz-user-select 属性介绍【代码】

他在ie下也能选中文字,但是选中其他列表,不会选中文字,原来它是在不同div中,属于不同的范围,而同事是放在同一个table中,当然会选中。 而在firefox下,文字不会被选中,查看google calender的css,原来还有-moz-user-select这个属性,很好玩! 最后采用一个了js方法,即onselectstart=function{return false;},不让页面进行选择,呵呵,这是很多网站不让复制采用的方法。 Summary -moz-user-select is a Mozilla property ex...

css3 box-sizing属性【代码】

css3 box-sizing属性box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。content-box,border和padding不计算入width和height之内,浏览器默认也是这样padding-box,padding计算入width内border-box,border和padding计算入width之内,其实就是怪异模式了~ ie8+浏览器支持content-box和border-box;ff则支持全部三个值。 案例 #a1{width:500px;padding: 10px;border:1px solid #ee240f;}问...

CSS列表属性

CSS列表:属性描述list-style简写属性。用于把所有用于列表的属性设置于一个声明中。list-style-image将图象设置为列表项标志。list-style-position设置列表中列表项标志的位置。list-style-type设置列表项标志的类型。marker-offset 1. 列表类型:list-style-type属性(1)作用:修改用于列表项的标志类型;(2)可能的值:值描述none无标记。disc默认。标记是实心圆。circle标记是空心圆。square标记是实心方块。decimal标记是数...

CSS3 border属性的妙用【代码】

.ribbon {background: #45c9c8;position: absolute;width: 75px;height: 25px;line-height: 25px;top: -4px;left: -11px;font-size: 14px;color: #fff;text-align: center;font-style: normal;z-index: 1;&:after{content: "";position: absolute;width: 0;height: 0;border-left: 12px solid transparent;border-top: 5px solid #329c9b;top: 25px;left: 0px;z-index: 0;}&:before{content: "";position: absolute;right: -10px;f...

css变形属性-transform-【代码】

(1)具体常用5种:伸缩-scale、扭曲-skew、旋转-rotate、移动-translate、矩阵-matrix(a)scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩 放);scaleX(x)元素仅水平方向缩放(X轴缩放);scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中 心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小(b)skew(x,y)使元素在水平和垂直方向同时...

CSS padding 属性【代码】

定义和用法padding 简写属性在一个声明中设置所有内边距属性。说明这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。注释:不允许使用负值。 例子 padding:10px 5px 15px;上内边距是 10px右内边距和左内边距...

JS控制css float属性的用法经验总结

JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的。1、对于没有中划线的css属性一般直接使用style.属性名即可。 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等。2、对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等。对在css中有...

采用CSS定位属性实现Html中DIV层叠与悬浮

一般来说,DIV没有悬浮一说,更准确的应为层叠或者固定。最简单的方法是采用CSS定位属性。 1、DIV层叠,即一个层叠加在另外一个层上 利用相对定位和绝对定位来实现: 在父对象上设置:position:relative; 在子对象上设置:position:absolute; top: 10px; left: 10px; 这样如果父对象里面有其他元素的话。上面设置的子对象就可以"悬浮"在父对象上面了。 2、元素固定在窗口的某个位置 使用固定定位: 在需要悬浮的元素上设置:position...

css初始化标签属性--源码【代码】

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin:0; padding:0; } body { font-size:14px; color:#333; font-family: Microsoft YaHei, Simsun;} fieldset, img { border:0; } ol, ul { list-style:none; } h1, h2, h3, h4, h5, h6{ font-size:100%; font-weight: normal;} em { font-style:normal; } input, button, select, textarea { outline:none; ...

html/css/js-个人容易忘的一些属性

1.当div里面的文字超过给定div给定的宽度,div里面的文字自动换行   word-break:break-all;会截断改行最后的单词 word-wrap:break-word;不会截断,该行长度最后不够,直接换行。 原文:https://www.cnblogs.com/zuoluwo/p/9819610.html

CSS下背景属性background的使用方法

背景颜色(background-color) CSS可以用纯色来作为背景,也可以将背景设置为透明,background相当于xhtml中的bgcolor。它的两个值: transparent(默认值,透明) color(指定的颜色,和文本颜色的设置方法相同)示例: body {background-color: black;} h1 {background-color: #00ff00;} h2 {background-color: transparent;} p {background-color: rgb(0,0,255);}背景图片(background-image) 用一张图片作...

CSS 表单元素不继承body的字体属性【图】

很多人喜欢在body中加样式来控制全局字体的样式,像字体、大小、颜色等。这些写可以减少代码,其实并不然,像表单里面元素就无法继承body的字体属性,先看下效果截图:下面是BODY样式写法:<style type="text/css"><!--body { font-family: Arial, Helvetica, sans-serif; font-size:12px;}--></style>上面效果截图中表单里文本框的字面和表格字体并不是一样的效果,为什么会这样呢?是因为所有的表单元素都不继承body的字体属...

CSS背景相关属性【代码】【图】

CSS样式可以精确控制HTML元素的背景、边框的样式和外观,也可以精确控制边框的线型和形状。其中,背景相关属性可以用于控制背景色、背景图片等属性。在控制背景图片的同时还可以控制背景图片的排列方式。  常用的背景相关属性如下:background:设置对象的背景样式,是一个复合属性,可以用于同时设置背景色、背景图片、背景重复模式等属性。  该复合属性可以分开写为以下几个属性:background-color:设置背景色。如果同时设置...

测试css2.1选择器IE6/7/8支持情况,属性选择器/子元素/相邻【代码】【图】

环境 xp ie 8 , ietester<!doctype html><html><head><meta charset="utf-8"/><style rel="stylesheet" type="text/css">*{font-size:19px;}i{color:red; font-weight:bold; margin:0 10px;}b{color:#BF7C17; margin:0 10px;}h2,p{padding:20px;}h2{background:#eee; font-size:20px;}p{font-size:15px;}p[attr]{color:blue;}p[attr="bar"]{color:pink;}p[attr~="go"]{color:green;}p[attr|="some"]{color:red;}.subEle > span { ...

CSS样式position属性的一个小实例:z方向三层布局分析【图】

CSS样式position的一个小实例代码如下: 复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS样式position的一个小实例:z方向三层布局-成功志(www.ok12.net)</title> </head> <body> <div sty...