一、字体样式

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. cglib源码分析--转

    原文地址:http://www.iteye.com/topic/799827 背景 前段时间在工作中,包括一些代码阅读过程中,spring aop经常性的会看到cglib中的相关内容,包括BeanCo ...

  2. RWD Table Patterns – 响应式表格解决方案

    在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况.RWD Table Patterns 是一个很好的响应式表格解决方案.它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏 ...

  3. Javascript内存泄露

    在过去一些的时候,Web开发人员并没有太多的去关注内存泄露问题.那时的页面间联系大都比较简单,并主要使用不同的连接地址在同一个站点中导航,这样的设计方式是非常有利于浏览器释放资源的.即使Web页面运行 ...

  4. 坑人的微信新版支付(V3.3.6)

         现在微支付的需求越来越多,最近刚接到一个需要微支付的项目,于是身为程序猿的我拿到最新的微信支付接口文档(3.3.6)就开始研究微信支付.本以为应该跟支付宝差不多的感觉结果被坑了.恕在下无能, ...

  5. Windows Azure Cloud Service (10) Role的生命周期

    <Windows Azure Platform 系列文章目录> 在上一章内容中,我们提到了Windows Azure会依次调用角色(Role)实例的OnStart()方法和Run()方法. ...

  6. JavaScript之旅（三）

    JavaScript之旅(三) 三.函数 在JavaScript中,定义函数的方式如下: function abs(x) { ... return ...; } 如果没有return,返回结果为und ...

  7. 使用laravel一分钟搭建CURD后台页面

    配置即一切 一切皆于需求,后台从0开始搭建,但是写了一两个页面后发现太多的是对单表的增删改查操作,于是就想到了,能不能做一个快速搭建的后台.想到一句话,配置即一切.如果一个CURD后台能只进行配置就自 ...

  8. Moon转告给你一个比Log4net更好日志框架--TracerX Logger 及其对应的日志查看器

    一.介绍 TracerX logger是一个易于上手,且拥有众多高级特性的.NET日志框架. 它能够发送输出结果到多目的地(循环文件.事件日志等....).它也能生成文本和二进制文件.它拥有一个强大的 ...

  9. 背水一战 Windows 10 (9) - 资源: 资源限定符概述, 资源限定符示例

    [源码下载] 背水一战 Windows 10 (9) - 资源: 资源限定符概述, 资源限定符示例 作者:webabcd 介绍背水一战 Windows 10 之 资源 资源限定符概述 资源限定符示例 ...

  10. Cygwin的安装

    Android开发要用到NDK,装了一个虚拟机,老是不行. 后来安装了一个cygwin,安装完毕后unset home,再export NDK,就可以使用了,非常方便,不用像虚拟机那样经常切换.