大小

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

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

CSS 样式属性的更多相关文章

  1. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  2. IE6支持兼容min-width、max-width CSS样式属性

    IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...

  3. HTML布局相关的CSS样式属性

    # 转载请留言联系 注意,样式属性是写进CSS里面的. 布局常用样式属性: width 设置元素(标签)的宽度,如:width:100px; height 设置元素(标签)的高度,如:height:2 ...

  4. CSS样式属性单词之Left

    通常left单独在CSS中设置无效,需要在使用position属性下使用才能生效起作用.left左靠多少距离(距离左边多少)的作用. left 一.left认识与语法 left翻译:左边,左 在CSS ...

  5. 常用CSS样式属性

    01.常用样式 1.1.background背景 设置元素背景的样式 background,更好的衬托内容. 属性 描述 值 background 背景属性简写.支持多组背景设置,逗号,隔开 back ...

  6. IE6支持min-width、max-width CSS样式属性

    1.IE6支持max-width解决方法 IE6支持最大宽度,解决CSS代码: .yangshi{ max-width:1000px; _width:expression((document.docu ...

  7. 11-18网页基础--第二部分CSS样式属性(1)

    第一课:样式属性 style 样式:style样式不仅可以直接在<body>中设置成整个网页的样式.格式:为了将样式.格式多样化,也可以将style单独抽出来,作为一个独立的个体,放在&l ...

  8. CSS样式属性——字体+文本

    CSS属性可分为以下几类:字体.背景.文本.位置.布局.边缘.列表 1. 字体——主要包括文字的字体.大小.颜色.显示效果等基本样式 font-family:用于设置字体系列 font-size:字体 ...

  9. CSS样式属性分类

    A 文字 1 font-family:字体名称 注意: 当指定多种字体时,用“,”分隔每种字体的名称 当字体名称包含两个以上分开的单词是,用“”把该字体名称括起来. 当样式规则外已经有“”时,用‘’代 ...

  10. Jquery中animate可以操作css样式属性总结

    可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...

随机推荐

  1. 在我朝如何为Brackets安装扩展?

    Brackets是Adobe发起的一个开源的HTML编辑器,界面优美简洁.扩展丰富.支持基于Chrome浏览器的实时预览,非常适合对于Web的开发和学习. 但是Brackets的安装包下载和扩展下载, ...

  2. 一个docker容器中运行多个服务还是弄一堆docker容器运行?

    不建议直接在单个 Docker 容器中运行多个程序. 以 2017年 10 月18 日 Docker 官方支持 Kubernetes 为分水岭计算,Kubernetes 赢得容器编排之战的最终胜利已经 ...

  3. 网络编程-socket(三)(TCP长连接和UDP短连接、时间服务器)

    详解地址:https://www.cnblogs.com/mys6/p/10587673.html TCP server端 import socketsk = socket.socket() # 创建 ...

  4. re模块 模块

    import re findall()  烦的奥 import re # 1. findall 查找所有结果,数据不是特别庞大 lst = re.findall('a','abcsdfasdfa') ...

  5. Swift5 语言指南(二十三) 协议

    甲协议定义的该适合特定任务或片的功能的方法,属性和其他要求的蓝图.然后,可以通过类,结构或枚举来采用该协议,以提供这些要求的实际实现.任何满足协议要求的类型都被认为符合该协议. 除了指定符合类型必须实 ...

  6. 一步步Cobol 400 上手自学入门教程01 - 基础概念

    先学习基础概念 1.COBOL字符:包含: User-defined words 用户定义字符 ŸSystem-names ŸReserved words 关键字 2.用户定义字符User-defin ...

  7. 架构模式数据源模式之:数据映射器(Data Mapper)

    一:数据映射器 关系型数据库用来存储数据和关系,对象则可以处理业务逻辑,所以,要把数据本身和业务逻辑糅杂到一个对象中,我们要么使用 活动记录,要么把两者分开,通过数据映射器把两者关联起来. 数据映射器 ...

  8. nginx发布静态网页

    http://www.jb51.net/article/71384.htm 切记不要把项目放在/root下 会出现 nginx open() "" failed (13: Perm ...

  9. odoo开发笔记 -- odoo和postgresql数据库导入相关

    odoo数据库 导入.导出 首先odoo框架下postgresql数据库中,表结构的存储方式: 存在id(小写),并没有所谓的外部ID 例如数据库中的国家表:模块名_tb_country   (注意: ...

  10. (转)学会数据库读写分离、分表分库——用Mycat,这一篇就够了!

    原文:https://www.cnblogs.com/joylee/p/7513038.html 系统开发中,数据库是非常重要的一个点.除了程序的本身的优化,如:SQL语句优化.代码优化,数据库的处理 ...