CSS常见的样式

最新推荐文章于 2024-07-25 16:45:46 发布

Hh....

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量231

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_51129678/article/details/117535569

版权

字体样式

font-size	设置字体大小
color	设置字体颜色
font-family	设置字体
line-height	设置字体的行高
font-width	设置字体粗细（normal/ 400，正常 bold/700加粗）
font-style	字体样式（normal 正常，italic斜体，oblique倾斜）

简写	font-style font-variant font-weight font-size/line-height font-family 可简写成 font:font-style font-variant font-weight font-size/line-height font-family;

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-size: 20px;
            color: crimson;
            font-family: 宋体;
            font-weight: 700;
            font-style: italic;
        }
        span {
            color: crimson;
            font: italic bold 20px 宋体;
        }
    </style>
</head>
<body>
    <p>一个例子</p>
    <span>一个例子</span>
</body>
</html>

效果：

文本样式

text-indent	段落开头缩进单位是px /em
text-align	水平对齐方式有 center left right 三种方式
white-space	指定如何处理元素内的空白
text-decoration	设置文本装饰有none（默认）， underline，overline，blink，inherit，line-through等样式
text-transfrom	控制文本内容的大小写
vertical-align	指定文本垂直方式

text-shadow	设置文本的阴影效果（blur 模糊，color 颜色)
word-spacing	设置单词间距
text-overflow	指定如何向用户示意未显示的溢出内容

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 0 auto;
            text-align: center;
        }
        .p1 {
           text-indent: 2em;
           text-decoration: underline;
           text-shadow: 1px 1px greenyellow ;
           vertical-align: auto;
        }
        .p2{

            text-transform: uppercase;
            word-spacing: 10px;
        }
    </style>
</head>
<body>
    <div>
        <p class="p1">
究竟是什么塑造了真正的你？电影将聚焦乔伊·高纳（杰米·福克斯配音）。这位中学音乐老师获得了梦寐以求的机会——在纽约最好的爵士俱乐部演奏。但一个小失误把他从纽约的街道带到了一个奇幻的地方“生之来处”（the Great Before）。在那里，灵魂们获得培训，在前往地球之前将获得他们的个性特点和兴趣。决心要回到地球生活的乔伊认识了一个早熟的灵魂“二十二”（蒂娜·菲 配音），二十二一直找不到自己对于人类生活的兴趣。随着乔伊不断试图向二十二展示生命的精彩之处，他也将领悟一些人生终极问题的答案</p>
        <p class="p2">　My name is . I am from . There are people in my family. My father works in a computer company. He is a computer engineer. My mother works in a international trade company. She is also a busy woman. I have a older sister and a younger brother. My sister is a junior in National Taiwan University. She majors in English. My brother is an elementary school student. He is 8 years old.
            　　Because of my father, I love surfing the Internet very much. I play the on-line game for about 2 hours every day. I wish I could be a computer program designer in the future. And that is why I am applying for the electronics program in your school.</p>
    </div>
</body>
</html>

效果：

边框样式

border-image	边框设置图片装饰
border-width	设置边框宽度
border-style	设置边框的样式·dotted solid double dashed 4个样式
border-color	设置边框颜色
border-radius	设置边框的圆角
简写	`border-width border-style`（必需填写） `border-color 简写顺序：border:order-width order-style border-color;`

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {

            float: left;
            margin: 20px;
            height: 50px;
            width: 100px;
            border-color: hotpink;
            border-width: 5px;
            border-radius: 20px;
            border-style: solid;
        }
        .d2 {
            float: left;
            margin: 20px;
            height: 50px;
            width: 100px;
            border: 3px solid deepskyblue;
        }
    </style>
</head>

<body>
    <div class="d1">
    </div>
    <div class="d2">
    </div>
</body>
</html>

效果：

边距设置

margin	设置外边距（取4个值 top right bottom left 按顺时针的顺序，设置3个值 top right&left bottom 设置两个值 top&bottom right&left 设置一个值时四个方向边距一样）
padding	设置内边距（设置方法同上）

padding 和margin 区别：

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离；即外边距。 padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离；即内边距。 margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。

实列：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {

            float: left;
            padding:20px;
            height: 50px;
            width: 100px;
            border-color: hotpink;
            border-width: 5px;
            border-radius: 20px;
            border-style: solid;
        }
        .d2 {
            float: left;
            margin: 20px;
            height: 50px;
            width: 100px;
            border: 3px solid deepskyblue;
        }
    </style>
</head>

<body>
    <div class="d1">
    </div>
    <div class="d2">
    </div>
</body>
</html>

效果：