CSS各属性表

1、CSS 背景属性(Background)

属性描述CSS
background在一个声明中设置所有的背景属性。1
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。1
background-color设置元素的背景颜色。1
background-image设置元素的背景图像。1
background-position设置背景图像的开始位置。1
background-repeat设置是否及如何重复背景图像。1

设定顺序为:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

 

eg:

   background-color: #FFCC66;
   background-image: url("butterfly.gif");
   background-repeat: no-repeat;
   background-attachment: fixed;   //固定在屏幕上,scroll:表示背景图随着页面移动,即固定在页面上。
   background-position: right bottom;


2、颜色的几种定义和输入方式

描述
color_name规定颜色值为颜色名称的背景颜色(比如 red)。
hex_number规定颜色值为十六进制值的背景颜色(比如 #ff0000)。
rgb_number规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。
transparent默认。背景颜色为透明。
inherit规定应该从父元素继承 background-color 属性的设置。

 

 

CSS 边框属性(Border 和 Outline)

属性描述CSS
border在一个声明中设置所有的边框属性。1
border-bottom在一个声明中设置所有的下边框属性。1
border-bottom-color设置下边框的颜色。2
border-bottom-style设置下边框的样式。2
border-bottom-width设置下边框的宽度。1
border-color设置四条边框的颜色。1
border-left在一个声明中设置所有的左边框属性。1
border-left-color设置左边框的颜色。2
border-left-style设置左边框的样式。2
border-left-width设置左边框的宽度。1
border-right在一个声明中设置所有的右边框属性。1
border-right-color设置右边框的颜色。2
border-right-style设置右边框的样式。2
border-right-width设置右边框的宽度。1
border-style设置四条边框的样式。1
border-top在一个声明中设置所有的上边框属性。1
border-top-color设置上边框的颜色。2
border-top-style设置上边框的样式。2
border-top-width设置上边框的宽度。1
border-width设置四条边框的宽度。1
outline在一个声明中设置所有的轮廓属性。2
outline-color设置轮廓的颜色。2
outline-style设置轮廓的样式。2
outline-width设置轮廓的宽度。2
1、图示:

code eg:

body {
      margin-top:100px;
      margin-right:40px;
      margin-bottom:10px;
      margin-left:70px;
}
2、border-style

 

不同样式的边框

 

 

CSS 文本属性(Text)

属性描述CSS
color设置文本的颜色。1
direction规定文本的方向 / 书写方向。2
letter-spacing设置字符间距。1
line-height设置行高。1
text-align规定文本的水平对齐方式。1
text-decoration规定添加到文本的装饰效果。1
text-indent规定文本块首行的缩进。1
text-shadow规定添加到文本的阴影效果。2
text-transform控制文本的大小写。1
unicode-bidi设置文本方向。2
white-space规定如何处理元素中的空白。1
word-spacing设置单词间距。1

CSS 字体属性(Font)

属性描述CSS
font在一个声明中设置所有字体属性。1
font-family规定文本的字体系列。1
font-size规定文本的字体尺寸。1
font-size-adjust为元素规定 aspect 值。2
font-stretch收缩或拉伸当前的字体系列。2
font-style规定文本的字体样式。1
font-variant规定文本的字体样式。1
font-weight规定字体的粗细。1
说明:
1、字体族名称(family-name)
字体族名称(通常所说的“字体”),包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等。
族类(generic family)
一个族类是一组具有统一外观的字体族。sans-serif就是一例,它代表一组没有“脚”的字体。

如:

三个族类及其字体族的例子

2、font-style定义所选字体的显示样式:normal(正常)、italic(斜体)或oblique(倾斜)。

3、font-variant(字体变化)的值可以是:normal(正常)或small-caps(小体大写字母),small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体。

4、font-weight指定字体显示的浓淡程度。其值可以是normal(正常)或bold(加粗)。

5、font-size字体大小,后面两种可以随着浏览器改变字体大小。 
   h1 {font-size: 30px;}
  h2 {font-size: 12pt;}
  h3 {font-size: 120%;}
  p {font-size: 1em;}

font属性的值应按以下次序书写:

font-style | font-variant | font-weight | font-size | font-family

 

CSS 外边距属性(Margin)

属性描述CSS
margin在一个声明中设置所有外边距属性。1
margin-bottom设置元素的下外边距。1
margin-left设置元素的左外边距。1
margin-right设置元素的右外边距。1
margin-top设置元素的上外边距。1

CSS 内边距属性(Padding)

属性描述CSS
padding在一个声明中设置所有内边距属性。1
padding-bottom设置元素的下内边距。1
padding-left设置元素的左内边距。1
padding-right设置元素的右内边距。1
padding-top设置元素的上内边距。1

CSS 列表属性(List)

属性描述CSS
list-style在一个声明中设置所有的列表属性。1
list-style-image将图象设置为列表项标记。1
list-style-position设置列表项标记的放置位置。1
list-style-type设置列表项标记的类型。1
marker-offset 2

内容生成(Generated Content)

属性描述CSS
content与 :before 以及 :after 伪元素配合使用,来插入生成内容。2
counter-increment递增或递减一个或多个计数器。2
counter-reset创建或重置一个或多个计数器。2
quotes设置嵌套引用的引号类型。2

CSS 尺寸属性(Dimension)

属性描述CSS
height设置元素高度。1
max-height设置元素的最大高度。2
max-width设置元素的最大宽度。2
min-height设置元素的最小高度。2
min-width设置元素的最小宽度。2
width设置元素的宽度。1

CSS 定位属性(Positioning)

属性描述CSS
bottom设置定位元素下外边距边界与其包含块下边界之间的偏移。2
clear规定元素的哪一侧不允许其他浮动元素。1
clip剪裁绝对定位元素。2
cursor规定要显示的光标的类型(形状)。2
display规定元素应该生成的框的类型。1
float规定框是否应该浮动。1
left设置定位元素左外边距边界与其包含块左边界之间的偏移。2
overflow规定当内容溢出元素框时发生的事情。2
position规定元素的定位类型。2
right设置定位元素右外边距边界与其包含块右边界之间的偏移。2
top设置定位元素的上外边距边界与其包含块上边界之间的偏移。2
vertical-align设置元素的垂直对齐方式。1
visibility规定元素是否可见。2
z-index设置元素的堆叠顺序。2

CSS 打印属性(Print)

属性描述CSS
orphans设置当元素内部发生分页时必须在页面底部保留的最少行数。2
page-break-after设置元素后的分页行为。2
page-break-before设置元素前的分页行为。2
page-break-inside设置元素内部的分页行为。2
widows设置当元素内部发生分页时必须在页面顶部保留的最少行数。2

CSS 表格属性(Table)

属性描述CSS
border-collapse规定是否合并表格边框。2
border-spacing规定相邻单元格边框之间的距离。2
caption-side规定表格标题的位置。2
empty-cells规定是否显示表格中的空单元格上的边框和背景。2
table-layout设置用于表格的布局算法。2

 

 

 

 

 

转载于:https://www.cnblogs.com/lovemo1314/archive/2012/08/03/2622179.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/302345.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入探讨编程到底需要知道多少数学知识

全世界只有3.14 % 的人关注了数据与算法之美这篇文章中我会深入探讨编程中所需要的数学知识。你可能已经都知道了。对于基本的编程,你需要知道下面的:加减乘除 — 实际上,电脑会帮你作加减乘除运算。你仅需要知道什么时候运用它们。模运算 —…

zabbix2.0安装与配置

一、zabbix服务端安装:官方下载:http://www.zabbix.com/download.php1.安装配置所需要软件(zabbix需要一个lamp环境)[rootlocalhost ~]# yum install httpd php php-devel php-gd php-bcmath php-mbstring mysql-devel mysql-serverphp-xml php-mysql gd…

BeetleX.FastHttpApi之控制器调度设计

为了可以更灵活地在Webapi应用服务中分配线程资源,BeetleX.FastHttpApi在线程调度上直接细化到Action级别;组件不仅可以精准控制每个Action的最大RPS限制,还能精细到控制使用多少线程资源来处理这些API的请求。接下来详细讲解组件针对这一块的…

Java类加载机制深度分析

为什么80%的码农都做不了架构师?>>> Java类加载机制 类加载是Java程序运行的第一步,研究类的加载有助于了解JVM执行过程,并指导开发者采取更有效的措施配合程序执行。研究类加载机制的第二个目的是让程序能动态的控制类加载&…

北大清华团队编写!200多个科学实验+视频,和爸爸一起在家做

自从2017年2月份教育部从小学一年级起将科学课列入必修课,学校、家长都意识到科学素养对于孩子成长的重要性。好多家长都跃跃欲试,想陪孩子把科学“玩”起来。可是具体到如何给孩子做科学启蒙,面对的问题还真不少:生活中有哪些科学…

如何搭建一个指标体系

2019独角兽企业重金招聘Python工程师标准>>> 今天跟大家聊聊,如何搭建一个指标体系。 1、什么是指标体系 “指标体系”这个概念是应用比较广泛的,我们从正式出版物中摘取一个定义: 指标体系,即统计指标体系&#xff0c…

2018年最后一个月最值得关注的13个优质公号

全世界有3.14 % 的人已经关注了数据与算法之美在这个知识千变万化的时代只有不断学习、充实自我,才能跟上时代以下13个顶级公众号能让你扩宽视野,紧跟时代的潮流近现代史研究通讯ID:jxsdyjtx2015▲长按二维码“识别”关注设置为星标近现代史研…

.NET Worker Service 如何优雅退出

上一篇文章中我们了解了 .NET Worker Service 的入门知识[1],今天我们接着介绍一下如何优雅地关闭和退出 Worker Service。Worker 类从上一篇文章中,我们已经知道了 Worker Service 模板为我们提供三个开箱即用的核心文件,其中 Worker 类是继…

大数据告诉你,中国女人有多勤奋

全世界只有3.14 % 的人关注了数据与算法之美前段时间,美国国家统计局发布了一组关于世界各国劳动参与率的数据,中国赫然位列世界第一,劳动总量世界第一,劳动参与率世界第一。所谓劳动总量,就是所有工作的人的工作时间的…

get+php+mysql_Apache+PHP+MySql 的安装及配置

每一项技术用的人多了,就会有人将其进行优化,做成一个简单、实用、大众化的工具,这对于初识者来说是非常方便的,但是对于长久学习或工作这方面的人技术人员来说是不可取的,所以还是要学习基础的实用方法。因此&#xf…

记一次 .NET 车联网云端服务 CPU爆高分析

一:背景 1. 讲故事前几天有位朋友wx求助,它的程序CPU经常飙满,没找到原因,希望帮忙看一下。这些天连续接到几个cpu爆高的dump,都看烦了????????????,希望后面再来几个其他方面的dump&#xff0…

java swing 示例_JAVA简单Swing图形界面应用演示样例

JAVA简单Swing图形界面应用演示样例package org.rui.hello;import javax.swing.JFrame;/*** 简单的swing窗体* author lenovo**/public class HelloSwing {public static void main(String[] args) {JFrame framenew JFrame("hello Swing");frame.setDefaultCloseOpe…

.NET上海社区线下Meetup - 5.22 Blazor Day

Blazor 是一个 Web UI 框架,Blazor 旨在简化快速的单页面 .Net 浏览器应用的构建过程,它虽然使用了诸如 CSS 和 HTML 之类的 Web 技术,但它使用 C#语言和 Razor 语法代替 JavaScript 来构建可组合的 Web UI 。通过提供用于编译到 …

入门机器学习,开启人工智能大门!

AI这个词相信大家都非常熟悉,近几年来人工智能圈子格外热闹,光是AlphoGo就让大家对它刮目相看。今天小天就来跟大家唠一唠如何进军人工智能的第一步——机器学习。在机器学习领域,Python已经成为了主流。一方面因为这门语言简单易上手&#x…

java集合框架的结构_集合框架(Collections Framework)详解及代码示例

简介集合和数组的区别:数组存储基础数据类型,且每一个数组都只能存储一种数据类型的数据,空间不可变。集合存储对象,一个集合中可以存储多种类型的对象。空间可变。严格地说,集合是存储对象的引用,每个对象…

Unity3D OpenVR 虚拟现实 保龄球打砖块游戏开发

据说水哥买了 Valve Index 设备,既然这个设备这么贵,不开发点有(zhi)趣(zhang)游戏就感觉对不起这个设备。本文将来开始着手开发一个可玩性不大,观赏性极强的保龄球打砖块游戏。这仅仅只是一个入…

mac mysql 移动硬盘_MAC一些高能过程记录(一些没必要的坑)

搞计算机的,谁电脑上没个数据库,不管用不用的着,有时候总需要,比如调试下博客呀之类的, 毕竟一般都会觉得数据库很好玩啊1.MySql安装:dmg、pkg什么的直接装吧,结束后会给你一个提示,上面会有密…

数学思维比数学运算更重要

全世界只有3.14 % 的人关注了数据与算法之美数学的证明依靠严密的逻辑推理,一经证明就永远正确,所以,数学证明是绝对的。相对而言,科学的证明则依赖于观察、实验数据和理解力,科学理论的证明难以达到数学定理证明所具有…

多年前那些优秀的工程师,后来都去哪儿了?

这是头哥侃码的第241篇原创上周末,我读初中的儿子突然问我:“爸爸,你是不是从好买离职了?”我听完,忙惊讶地问他是怎么知道的。他朝我做了个鬼脸,然后指了指我的手机说:“你的文章写的如此生动&…

使用easyUI 格式化datagrid列

author YHC 以下示例格式化在easyui DataGrid 里的列数据,和使用自定义列formatter ,如果价格小于20就将文本变为红色. 查看 Demo 格式化一个DataGrid 列,我们需要设置formatter 属性它是一个函数,这个格式化函数包含三个参数: value: 当前列对应字段值.row: 当前的row(行)记录…