CSS属性

CSS样式属性

一、字体

1.font-family:Tahoma,Arial,"Hiragino Sans GB";
字体,第一种字体不能显示时,用第二种字体

2.font-size:xx-small or 10px
字体大小:
绝对大小:xx-small、x-small、medium、large、x-large、xx-large、x-large、xx-l
相对大小:large smaller

使用数字和度量单位
绝对单位:
px:显示器像素个数
mm、cm、in:毫米 厘米 英寸,使用这类单位,字体大小不随显示器的分辨率而改变
pt:windows系统定义的字体大小单位
pc:
相对单位:
em:2em指字体的原始大小的2倍
ex:x,y字体告诉不一样,x为y的一半
%:300%指字体原始大小的3倍

3.font-style:Italic
字体样式:
normal:
Italic:斜体字体用的斜体
Oblique:正常字体用的斜体

4.text-decoration:underline overline;
添加横线:
underline:下划线;
overline:上划线;
line-through:中划线
none:无;

5.font-weight:bold;
指定粗体
normal bold bolder lighter

6.font-variant:small-caps
区域内的所有字母大写显示
small-caps:小型大写字母
normal:普通

7.text-transform:uppercase
capitalize:首字母大写
uppercase:所有字母大写
lowercase:所有字母转换消协
none:不转换

8.color:#ffffff
定义文本颜色
1)#RRGGBB #ff0000:红色 #ffff00:黄色
2)rgb rgb(255,00,00)红色 rgb(255,255,0)黄色
3)red:红色 yellow:黄色

9.font:italic bold 12pt Times,serif;
字体为Times或serif,粗体加斜体,大小12pt

二、背景
1.background-color:red
transparent:透明的

2.background-image:url(/img/photo.gif);
设置背景图片

3.background-repeat:no-repeat;
确定背景图像是否以及如何重复。
no-repeat:不重复,只出现一次
repeat:在水平和垂直方向上重复平铺背景图像
repeat-x:水平方向上重复
repeat-y:垂直方向上重复

4.background-attachment:scroll
确定背景图像是否随内容滚动
fixed:固定背景图像
scroll:随内容的移动而移动

5.background-position:left bottom;
指定背景图像水平位置和垂直位置
水平位置:left,center,right,20px
垂直位置:top,center,bottom,20px

6.table{background:#00cc00 url(logo.jpg) no-repeat bottom right}

三、文本
文字间距、对齐方式、上标、下标、排列方式、首行缩进
1.word-spacing:10px;
设置单词之间间距

2.letter-spacing:10px;
设置字符之间的间距

3.vertical-align:middle;
指定文本的垂直对齐方式,
sub(下标)、super(上标)、top(与顶端对齐)、middle(居中)、bottom(与底端对齐)

4.text-align:left;
设置文本的水平对齐方式
left right center justify(两端对齐)

5.text-indent:2px;
设置文本第一行的缩进值,负值用于将文本第一行向外拉

6.white-space:pre
处理元素内的空白符
normal:将空白符全部压缩,多个空格折叠成一个
pre:想<pre>一样预处理
nowrap:指定文本只有遇到<br>标签时才换行

7.line-height:10px;
设置文本所在行的行高。
140%:行高等于文字大小的1.4倍

四、位置
1.position:absolute;
设置对象的定位方式
absolute:绝对定位,能精确定位元素在页面的独立位置,而不考虑页面上的其他元素的定位设置。
relative:相对定位,所设定的位置是相对于元素通常应在的位置的编译来。
static:无特殊定位,默认值。

2.left top width height

3.z-index:99 使用定位后,才有效
设置发生堆叠的各元素的层叠顺序
99:正值,显示在没有设置z-index属性的元素的上面
-99:负值,显示在下面
若都没有设置,那么后出现的元素堆叠在早出现的元素上面

五、布局
1.visibility:inherit
设定元素的可见状态
inherit:继承父层的显示属性
visible:显示在网页中
hidden:隐藏元素

2.display:block
设定元素的显示状态
block:在元素前和后都会有换行,块级元素
inline:行内元素
list-item:与block相同,但增加了目录列表项标记
none :不显示元素

visibility与display
隐藏元素(visibility:hidden)不会减少浏览器显示一页所需的时间,
当一个元素被隐藏后,它仍然要占据浏览器窗口中的原有空间。
所以,如果将文字包围在一个隐藏元素周围时,其显示效果将是文字包围
一块空白区域
display:none 浏览器会忽略这个元素,浏览器显示包括不显示元素的页面是,
会比显示原始被隐藏的页面要快。

3.overflow:hidden;
如果元素中的内容超出了元素的大小时,处理溢出
visible:增加元素的显示空间大小,从而将元素中的所有内容显示出来
hidden:不现实超出显示空间的内容
scroll:显示滚动条
auto:只有在超出元素的显示大小时才显示滚动条

4.float:left
定义网页中其他文本如何环绕该元素
left:表示文本浮在这个元素的左边
right:
none :表示这个元素两边不允许有文本

5.clear:left
控制是否允许其他对象漂浮在元素的旁边。
left:不允许左边有浮动对象,元帅会移动到在其左边的漂浮对象的下面显示
right:
none:允许两边都可以有浮动对象
both:不允许有浮动对象。

6.边缘
boder-width:10px;
border-color:red;
border-style:none;
none:无边框;dotted:点线;dashed:虚线;solid:实线;double:双线;groove:凹槽;

a:active{border:thick double red}

六、列表
1.list-style-type:none;
指定目录列表项标记的样式类型
disc(实心圆) circle(空心园) square(方块) decimal(阿拉伯数字)
lower-roman(小写罗马数字) upper-roman(大写罗马数字)

2.list-style-image:url(/logo.gif)

3.list-style-position:inside
设置列表项标记是在文本内还是文本外
inside(内部):相当于文本的一部分,会缩进两格
outside(外部)

七、其他
1.cursor:hand;
设置当鼠标移动到某个元素上时的形状
hande(手型) crosshair(十型)

CSS属性,布布扣,bubuko.com

时间: 2024-10-13 22:29:11

CSS属性的相关文章

CSS属性选择器

属性选择器 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="./css/属性选择器.css&qu

Day49:CSS属性操作(文本、背景、边框、列表、display、边距)

一.CSS属性操作 1.CSS text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如:  red p { color: rebeccapurple; } 水平对齐方式 text-align 属性规定元素中的文本的水平对齐方式. left       把文本排列到左边.默认值:由浏览器决定. right     把文本排列到右边. center 把文

可用于jquery animate()方法的css属性

* backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWidth * borderTopWidth * borderSpacing * margin * marginBottom * marginLeft * marginRight * marginTop * outlineWidth * padding * paddingBottom * paddingLeft * paddi

与换行相关的css属性简单介绍

与换行相关的css属性简单介绍:在css布局中可能需要人为的进行操作是否换行,如何换行,本章节就就做一下简单介绍.一.word-break属性:此属性用来设定文本如何进行换行.语法结构: word-break:normal | break-all | keep-all 参数解析:1.normal:默认值,原则上规定在断字点换行,通俗的说就是在单词与语单词之间可以进行换行,但是如果单词特别的长,超出了行的长度,可以从单词内部断开进行换行.2.break-all:此属性值能够实现强制将单词从内部截断

JS里引用CSS属性时候的命名

????如果JS代码中设置<p>元素的另一个CSS属性font-family.这个属性的获取方式与color属性略有不同,因为 font和family之间的连字符与JS中减法操作符相同,JS会把它解释为减号.如果你像下边这样访问名为 font-family 的属性,会收到一条出错信息: ????Element.style.font-family ????JS将减号前边的内容解释为"元素的style属性的font属性",把减号后的内容解释为一个名为family的变量,将整个表

前端学习 -- Css -- 属性选择器

属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]:选取属性值以指定内容开头的元素 [属性名$="属性值"]:选取属性值以指定内容结尾的元素 [属性名*="属性值"]:选取属性值中包含指定内容的元素 demo:(注:这么尴尬的诗句肯定不是我写的) <!DOCTYPE html> <html> &l

jQuery修改操作css属性实现方法

在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了,下面我来给各位同学详细介绍介绍. css()方法在使用上具有多样性,我们先来了解css()方法基本知识. css() 方法设置或返回被选元素的一个或多个样式属性. 返回 CSS 属性如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname");下面的例子将返回首个匹配元素的 background-color 值: 实例 $("p").css("b

CSS属性之字体(Font)

CSS属性之字体(Font) font:[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ]  复合属性,各属性见下文. 必须同时包含font-size和font-family,且这两个值顺序不能变,其他关键字的值放到这两个值的前面,顺序可以随意打乱. 可以在字号值(font-siz

html文字css属性

color:设定一个标签中的文字的颜色,颜色值可以使用英文单词,16进制语法和rgb语法: font-size: 设定文字大小,单位通常为像素(px)—— 一般的商业网站的文字大小通常都是12px. font-weight: 设置文字粗体(bold)或非粗体(normal). font-style: 设置文字斜体(italic) 或非斜体(normal) font-family:设置文字的字体名字,可以使用多个字体名,中间用逗号分开,表示的含义是:首先使用第一个字体,如果用户电脑中没有第一个,则