【零基础学习web前端】之css文字属性,背景设置，内外边框

Amy

【零基础学习web前端】之css文字属性,背景设置，内外边框


【零基础学习web前端】教程目录导航 http://www.sufeinet.com/thread-24027-1-1.html



一、文字属性

---

[HTML] 纯文本查看 复制代码

p{
        /* 字体颜色设置,三种颜色方式*/
        color: red;
        color: #999999;
        color:rgb(0,0,255);
        /* 字体大小*/
        font-size: 20px;
        /* 字体样式：斜体、正常、倾斜*/
        font-style: italic;
        font-style: normal;
        font-style: oblique;
        /* 行高 */
        line-height: 20px;
        /* 字体正常、加粗、细体 */
        font-weight: normal;
        font-weight: bold;
        font-weight: lighter;
        /* 字体设置 */
        font-family: 宋体;
        /* 字间距 */
        letter-spacing: 2px;
        /* 字体左对齐、右对齐、居中对齐、分散对其 */
        text-align: left;
        text-align: right;
        text-align: center;
        text-align: justify;
        /* 文本修饰:下划线、加顶线、删除线、删除下划线、闪烁的文本*/
        text-decoration: underline;
        text-decoration: overline;
        text-decoration: line-through;
        text-decoration: none;
        text-decoration: blink;
        /* 首字母大写、大写字体、小写字体、无 */
        text-transform: capitalize;
        text-transform: uppercase;
        text-transform:lowercase;
        text-transform: none;                
        /* 首行缩进2个字符 */
        text-indent: 2em;
        /* 设置文本阴影效果 */
        /* 四个值分别表示：水平阴影的位置（必填）、垂直阴影的位置（必填）、模糊的距离（可选）、阴影的颜色（可选） */
        text-shadow: 5px 5px 5px #FF0000;
    }

二、背景设置

---

[HTML] 纯文本查看 复制代码

 /* 背景颜色 */
        background: #999999;
        /* 背景图：背景图片路径、不重复 */
        background: #00FF00 url(bgimage.gif);
        /* 背景重复、不重复、X轴上重复、Y轴上重复 */
        background-repeat: repeat;
        background-repeat: no-repeat;
        background-repeat: repeat-x;
        background-repeat: repeat-y;

三、外边距和内边距（margin、padding）

---

我们在进行网页制作时都会遇到为元素设定边距的情况，边距又分为外边距和内边距，即margin和padding.

[HTML] 纯文本查看 复制代码

/* 内边距分别是以顺时针排列：上填充1px、右填充2px、下填充3px、左填充4px */
        padding: 1px 2px 3px 4px;
        /* 分别表示如下 */
        padding-top: 1px;
        padding-right: 2px;
        padding-bottom: 3px;
        padding-left: 4px;

        /* 外边距分别是以顺时针排列：上边距1px、右边距2px、下边距3px、左边距4px */
        margin: 1px 2px 3px 4px;
        /* 分别表示如下 */
        margin-top: 1px;
        margin-right: 2px;
        margin-bottom: 3px;
        margin-left: 4px;

惜

加上效果图 会更好哦

竹林风

楼主加油，我们都看好你哦。

Amy

明天再继续补充一些

竹林风

看着很厉害哦，我们加个好友吧，以后常联系

liu

强烈支持楼主ing……

站长苏飞

这个帖子的标题写的不错，建议楼主以后都安这样的格式写，方便我们查找学习

Amy

竹林风 发表于 2018-11-29 21:24
看着很厉害哦，我们加个好友吧，以后常联系

好的呢

惜

真是被感动的痛哭流涕……

范范

真是难得给力的帖子啊。