一、字体样式

1、font-style:设置或检索对象中的文本字体样式。

取值:

normal:指定文本字体样式为正常的字体

italic:指定文本字体样式为斜体。对于没有斜体变量的特殊字体,将应用oblique

oblique:指定文本字体样式为倾斜的字体

2、font-variant:设置或检索对象中的文本是否为小型的大写字母。

取值:

normal:正常的字体

      small-caps:小型的大写字母字体
3、font-weight:设置或检索对象中的文本字体的粗细。
  取值:
  normal:正常的字体。相当于number为400
      bold:粗体。相当于number为700。
      bolder:特粗体。也相当于strong和b对象的作用
      lighter:细体
      integer:用数字表示文本字体粗细。取值范围:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

4、font-size:设置或检索对象中的字体尺寸。

  取值:

  absolute-size:根据对象字体进行调节。可选参数值:xx-small | x-small | small | medium | large | x-large | xx-large

relative-size:相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。可选参数值:smaller | larger

length:用长度值指定文字大小。不允许负值。

percentage:用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

5、font-family:设置或检索用于对象中文本的字体名称序列。

  取值:

  family-name:字体名称。可以有多个值,以逗号隔开。浏览器以先后顺序依次使用字体。

  generic-family:字体序列名称。

6、font-stretch:设置或检索对象中的文字是否横向拉伸变形。

  取值:

  ultra-condensed:比正常文字宽度窄4个基数。

extra-condensed:比正常文字宽度窄3个基数。

condensed:比正常文字宽度窄2个基数。

semi-condensed:比正常文字宽度窄1个基数。

normal:正常文字宽度

semi-expanded:比正常文字宽度宽1个基数。

expanded:比正常文字宽度宽2个基数。

extra-expanded:比正常文字宽度宽3个基数。

ultra-expanded:比正常文字宽度宽4个基数。

注:也可以直接用font:[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] 简写的方式。

下面举个综合以上属性的例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#p1{
font-family: "微软雅黑";
font-size: 15px;
font-style: italic;
font-stretch:extra-condensed;
font-weight: bold;
font-variant: normal;
}
     

/* #p1{
              font:italic normal bold 15px "微软雅黑";
                 }*/

        </style>
</head>
<body>
<p id="p1">翦翦风,鸳鸯灯。星月无眠,鹊桥筑梦。</p>
</body>
</html>

效果如下:

翦翦风,鸳鸯灯。星月无眠,鹊桥筑梦。

二、元素样式

1、宽度

width:auto|length

例:p{ width:100px;}

  div{width:50%;}

height:auto|length;

例:p{height:200px;}

  div{height:50%;}

3、外边距

margin:auto|length

取值:

margin-top:   设置上边的外边距

margin-right:  设置右边的外边距

margin-bottom: 设置下边的外边距

margin-left:   设置左边的外边距

缩写形式:

margin:上边距  右边距  下边距  左边距

margin:上下边距   左右边距

margin:上边距  左右边距   下边距

例子如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div1{
width:200px;
height: 100px;
background:pink;
}
#div2{
width: 110px;
height: 80px;
margin-top:20px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
background: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id ="div2">
我是里边的内容。
</div>
</div> </body>
</html>
我是里边的内容。

4、内边距

padding:auto|length

取值:

padding-top:   设置上边的内边距

padding-right:  设置右边的内边距

padding-bottom: 设置下边的内边距

padding-left:   设置左边的内边距

缩写形式:

padding:上边距  右边距  下边距  左边距

padding:上下边距   左右边距

padding:上边距  左右边距   下边距

例子如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div3{
width: 100px;
height: 100px;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 10px;
background-color: #0000FF;
}
</style>
</head>
<body> <div id="div3">
我是里面的内容
</div>
</body>
</html>
我是里面的内容

三、颜色

color 检索或设置对象的文本颜色。无默认值。

颜色属性值分三种值的格式

(1)、英文单词,比如 red , yellow ,green …

(2)、十六进制表示方式,#开头,6个十六进制的字符或数字 组合。比如:#FFFFFF,#000000,#CCCAAA,#22BCAD。十六进制: 0-9 和 a-f RGB模式,红 0-255,绿 0-255,蓝 0-255。比如: RGB(120,33,234)。

RGBA(255,0,0,.5) RGBA模式,最后的A表示透明度50%小数点前的0可以省略不写。

例:

<style>
#p11{
color: red;
}
#p22{
color:#eee;
}
#p33{
background: rgba(0,0,0,0.5);
}
</style>
<body>
<p id="p11">段落1</p>
<p id="p22">段落2</p>
<p id="p33">段落3</p>
</body>

段落1

段落2

段落3

CSS常用样式(一)的更多相关文章

  1. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  2. CSS常用样式(四)之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  3. 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...

  4. css常用样式对文本的处理演练

    CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...

  5. css常用样式font控制字体的多种变换

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

  6. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  7. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  8. CSS常用样式整理

    元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器. 浏览器渐变背景颜色: FILTER: p ...

  9. css 常用样式命名规则

    大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap  ——用于最外层 头部:header  ——用于头部 主要内容:mai ...

  10. CSS常用样式--font

    CSS font 属性 参考:W3school- CSS font 所有浏览器都支持 font 属性,可在一个声明中设置所有字体属性,各属性需按顺序,语法如下: selector{ font:styl ...

随机推荐

  1. 数据可视化(7)--D3基础

    一直想写写D3,觉得D3真心比较强大,基本上你能想出来的图表都能绘制出来,只不过使用起来比前几个要稍麻烦一点. 正好最近读完了<数据可视化实战>,将关于D3的知识梳理了一遍,写这篇博客记录 ...

  2. ASProtect注册码使用教程|ASProtect SKE(加壳脱壳工具) 2.56 汉化注册版

    ASProtect 是功能非常完善的加壳.加密保护工具.能够在对软件加壳的同时进行各种保护.如:反调试跟踪.自校验及用密钥加密保护等:还有多种限制使用措施,如:使用天数限制.次数限制及对应的注册提醒信 ...

  3. [转载]PhotoShop性能优化

    现在随着Photoshop版本越来越高功能也越来越强大,而往往强大的功能需要电脑有好的配置运行,比如HDR.图像合成或者3D和视频等类似的功能,还有处理比较大尺寸的图像时,如果电脑配置不够强往往非常卡 ...

  4. 借助 CSS Colorguard 来避免使用重复的颜色

    每一个 CSS 项目开始时愿望都是很美好的,但不可避免地,多人协作的项目相互之间可能重复使用了相似的颜色,而你从来不知道它们的存在.CSS Colorguard 帮助您保持您想要的颜色设置,当你添加的 ...

  5. Java中的逆变与协变

    看下面一段代码 Number num = new Integer(1); ArrayList<Number> list = new ArrayList<Integer>(); ...

  6. 基于HTML5的Drag and Drop生成图片Base64信息

    HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...

  7. 【Swift学习】Swift编程之旅---可选链(二十一)

    可选链Optional Chaining是一种可以在当前值可能为nil的可选值上请求和调用属性.方法及下标的方法.如果可选值有值,那么调用就会成功:如果可选值是nil,那么调用将返回nil.多个调用可 ...

  8. a[href$=".pdf"]解释

    看过书上的解释,其中$的意思其实是ends with的意思,解释起来就是说选择所有链接指向PDF文件的链接标签,当然还可以是其他类型的文件(.mp4,.doc,.mp4): 当然,这个需要你的浏览器支 ...

  9. MVC的路径查找顺序

    使用MVC的朋友们,知道MVC的funny之处. 但是如果出现路径找不到,请记住以下的页面路径寻找顺序. http://www.cnblogs.com/sosoft/ 首先,知道你的Controlle ...

  10. 割点和桥---Tarjan算法

    使用Tarjan算法求解图的割点和桥. 1.割点 主要的算法结构就是DFS,一个点是割点,当且仅当以下两种情况:         (1)该节点是根节点,且有两棵以上的子树;         (2)该节 ...