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,一经查实,立即删除!

相关文章

java接口课程_用java定义一个接口,用于查询课程

定义一个类Stu,包括如下属性:学号、姓名、性别、专业、课程,实现以下方法:每个属性的获取和定义,要求至少包含一个构造函数。定义一个接口类,定义方法qcc()用来查询课程。编写一...定义一个类 Stu&#xff…

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

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

sql server和mysql的区别是什么

开源MySQL是一个开源关系数据库管理系统(RDBMS);而SQL Server不是开源的,是商业的。程序MySQL主要用C和C 编程语言编程。SQL Server主要用C 编程,但在C语言中也有一些部分。平台SQL Server仅支持Linux和Windows平台&am…

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…

sql java 创建数据库_java动态创建数据库(sql server)

public static void main(String[] args) {// TODO Auto-generated method stubString url "jdbc:jtds:sqlserver://127.0.0.1:1433;databaseNamebase_name;usersa;password pas";//sa身份连接Connection con null;Statement stmt null;//ResultSet rs null;bool…

BeetleX.FastHttpApi之控制器调度设计

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

Java类加载机制深度分析

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

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

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

java 枚举工厂_在Java中使用枚举工厂,最佳做法?

Java允许我们在Enum上嵌入数据和行为.我不想在Enum上直接实施一个工厂,因为我认为这不是它的作用.但是我可以把类的引用放在枚举上,并在外部工厂中引用对象.相对于传统的工厂模式,你最好的实现是什么?哪种解决方案在哪种情况下更好?现在,代码.在两种解决…

ASP.Net服务性能优化原则

理理Asp.net性能相关的问题及注意事项。以下这些内容,全部是经验之谈。如果你有别的建议,也可以从后台发给我。服务器性能问题,通常在数据少的时候不会显现,也无需太多关注。但一旦数据量大了,就会变成一个麻烦且必须处…

如何搭建一个指标体系

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

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

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

java thread join()_Java Thread join() 的用法

Java Thread中, join() 方法是让调用该方法的主线程执行run()时暂时卡住,等run()执行完成后, 主线程再调用执行join()后面的代码。示例:class ThreadTesterA implements Runnable {private int counter;Overridepublic void run()…

.NET Worker Service 如何优雅退出

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

NYOJ -123 士兵杀敌(四)

士兵杀敌(四) 时间限制:2000 ms | 内存限制:65535 KB难度:5描述南将军麾下有百万精兵,现已知共有M个士兵,编号为1~M,每次有任务的时候,总会有一批编号连在一起人请战&a…

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

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

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

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

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

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

下载 infoq 网站视频

今天看到 infoq 网站上一个讲 Go 语言的视频&#xff0c;速度太卡了。我家里光纤宽带也没法正常浏览&#xff0c;所以需要研究下如何下载了。 用 FireBug 看了下源代码&#xff0c;抓到其中 flash 播放控件的一个参数里有视频链接如下&#xff1a; <param name"flashva…

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…