CSS 样式属性

时间:2022-05-11 16:07:21

大小

width   宽               body {   min-width:1200px;

height  高                      }                            -- 设定页面最小宽度

背景

background-color:____               -- 背景色

background-image :url( 地址  )    -- 背景图

background-repeat: ____           -- 背景图的平铺方式

repert   平铺

no-repert      不平铺

repert-x        x 轴平铺

repert-y        y 轴平铺

background-position :____         -- 背景图片位置

center       居中

right  top   右上角

left 100px  top  200px     距左侧100像素,距离上200像素

background-size : _(像素/百分比)              -- 背景图的大小

background-attachment: _____               -- 背景图片是否浮动

fixed    背景固定锁住

scroll    背景随字体浮动

字体

font-family: ___          --  字体        一般默认为“微软雅黑”

font-size :___             --  字号

font-style:___             -- 字体是否倾斜

italic       倾斜

normal   不倾斜

font-weight____         -- 字体是否加粗

bold       加粗

normal   不加粗

font-decoration____       -- 设置下划线

underline      下划线

overline        上划线

line-trough    删除线

none             去掉超链接的下划线

color      -- 字体颜色

对齐方式

text-align: ____              --  水平对齐方式

center  居中对齐

left   左对齐

right   右对齐

vertical-align: ____           -- 垂直对齐方式

top    顶部对齐

bottom    底部对齐

middle      居中

vertical-align:middle

display:table-cell          -- 两者配合方能垂直对齐。

line-height:____      -- 行高

text-indent:____     -- 缩进

边界边框

margin      -- 外边距,四周边框与外部的距离

margin:10px;                       四个方向的边距都是10像素

margin:50px  0 ;                  上下 50 像素,左右0

margin-top:10px;                 上边框与其他元素的距离,

margin:10px  0  10px  0 ;      按 上、右、下、左 的顺序与其他元素的距离

padding        -- 内边距,内容与边框的距离

padding:10px;   内容与边框最短的距离是10像素,

--  文字所占的空间大小不变,将四个边框向外延伸10像素

padding: 20px  0  20px  0 ;    上、右、下、左的边距

border  --  边框

border-width:5px;    边框的粗细

border-style:solid;    边框的样式(虚,实等)

border-color:red;      边框的颜色

border: 2px  solid  red ; (简写)

列表方块

list-style:none       将序列的序号图案去掉

list-style-image:url( 图片地址 );  将序号变为图片

隐藏

display: none;       隐藏     -- 隐藏位置不保留

block;       显示

visibility: hidden;   隐藏    -- 隐藏后位置保留

visible;   显示

overflow: hidden                -- 超出部分隐藏

scroll      加滚动条

透明

opacity:0.5;                       -- 对谷歌,360等高等浏览器有用

-moz-opacity:0.5;               -- 针对火狐浏览器

flter:alpha (opacity=50);     -- 针对 IE 浏览器

圆角                                                         -- 无法用于IE浏览器

border-radius:5px;        将边框的角削去5个像素

阴影                                                         -- 无法用于IE浏览器

box-shadow: 50px  0  30px  black

--  左右偏移(右正左负)、上下偏移(上正下负)、阴影扩散成度、阴影颜色