文章目录

样式

背景
文本
字体
列表
表格

CSS盒子模型
边框

普通边框
CSS3边框
CSS3圆角属性

外边距和内边距

样式

背景

属性	描述
background-color	设置背景颜色
background-image	设置背景图片，url
background-repeat	设置背景图片是否重复，no-repeat
background-size	放大/缩小背景图片以铺满整个div，cover
background-attachment	设置背景图片是否滚动，默认滚动scoll，fixed固定
background-position	设置背景图片的位置

文本

CSS 文本属性可定义文本的外观。

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

属性	描述
color	设置文本颜色
letter-spacing	设置字符间距
word-spacing	设置字间距
line-height	设置行高，文本垂直居中
text-align	设置水平对齐方式
text-decoration	设置文本修饰
text-shadow	设置文本阴影
text-indent	设置首行缩进
text-transform	设置文本的大小写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 80%;
            margin-left: 10%;
        }
        h1 {
            /* 标签选择器 */
            color: rgb(165, 42, 42);
            /* 颜色的三种形式：英文单词，rgb(x,y,z)，#000000，rgba()中的a代表透明度 */
            text-align: center;
            /* 设置文本水平居中 */
        }
        p {
            margin: 0px;
            text-indent: 2em;
            /* 设置首行缩进 */
            letter-spacing: 0.1em;
            /* word-spacing: 0.1em; */
            font-size: 18px;
        }
        #p1 {
            width: 100%;
            height: 100px;
            line-height: 50px;
            color: purple;
            border: 1px red solid;
            text-decoration: underline;
            /* 设置文本修饰 */
        }
        .p2 {
            margin-top: 50px;
            border: 1px blue solid;
            width: 100%;
            height: 120px;
            line-height: 40px;
            /* 设置文本垂直居中 */
            text-transform: uppercase;
            /* 将英文字母转为大写 */
        }
        [title*=last] {
            /* 属性选择器:包含last单词的标签 */
            /* = ~= *= ^= |= $= */
            margin-top: 50px;
            border: 1px green dashed;
            /* dashed虚线 */
            height: 120px;
            line-height: 30px;
            text-shadow: 2px 2px 5px yellowgreen;
            /* 文字阴影：水平偏移 垂直偏移 阴影半径 阴影颜色 */
        }
    </style>
</head>
<body>
    <h1>RNG和TES训练赛曝光，“全程大乱斗模式，35分钟打出59个人头”</h1>
    <p id="p1">
        就在最近，有的网友找到了Rng战队和tes战队的训练赛数据，能够感觉到rng战队在训练赛中的状态，还是非常不错的，尤其是打野选手，小龙堡在前期的节奏方面非常的不错，两方全城大乱斗模式，35分钟打出59个人头。
    </p>
    <p class="p2">
        Rng战队和tes战队都是lpl赛区的全华班，而且tes战队的打野选手卡萨之前还是RNG战队的，最主要的是这两支队伍的成绩目前相差非常的大，Tes战队几乎是最近一段时间英雄联盟的顶尖实力，而rng战队因为一些核心选手的离开。导致他们目前的状态出现了很大的下滑，在夏季赛中已经拿下了4-3的战绩了，如果在接下来的一段时间里无法获得胜利的话，甚至连今年的季后赛都没有太大的希望。
    </p>
    <p title="last">
        而最近，rng战队和tes战队也是进行了训练赛，按道理来说，这两支队伍目前的实力差距较大，Tes，战队应该可以轻松地获得胜利，但是没想到的是RNG战队凭借着自己前期的节奏成功的获得了这场训练赛的胜利，在游戏开始三分钟的时候，ez就直接在线上击杀小明的扇子妈，随后四分钟左右，小龙堡的挖掘机直接来到下路，配合着双人组直接击杀了ez和巴德。紧接着五分半钟的时候，滑板鞋再次线上击杀巴德。
    </p>
</body>
</html>

在这里插入图片描述

字体

属性	描述
font-family	设置字体系列
font-style	设置字体风格
font-size	设置字体尺寸
font-weight	设置字体的粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:first-child {
            /* :first-child：伪类选择器 */
            font-size: 18px;
            font-family: "黑体";
            font-style: normal;
            font-weight: 600;
            /* 如果是数值型，那么为100-900之间 */

        }
        p:nth-of-type(2) {
            /* :nth-of-type():选择同类型的第2个兄弟标签 */
            font-size: 22px;
            font-family: "楷体";
            font-style: italic;
            /* 斜体 */
            font-weight: bold;
            /* 字体粗细：加粗 */
        }
    </style>
</head>
<body>
    <p>
        世卫组织3日表示，虽然有效新冠疫苗的交付目前暂无确切时间表，但到今年年底可能会有候选疫苗显示出对新冠病毒有效，关键问题是疫苗产能能否跟上需求。世卫组织紧急项目执行主任迈克尔·瑞安表示，虽然目前有些候选疫苗的初步试验数据让人充满希望，但仍无法预测哪一种疫苗在临床上完全有效。
    </p>

    <p>
        【作家曝#福寿螺疯狂入侵洱海#，官方：繁殖不多，正人工清除】近日，作家@半夏心茧 在社交媒体发消息称大理洱海遭福寿螺疯狂入侵，引发关注。福寿螺为世界性最严重的100种入侵生物之一，不仅对许多水生作物危害大，还可能成为疾病和寄生虫的载体，对人类健康产生威胁。大理市洱海管理局相关人员回应，大理温度不高，相比热带地区繁殖少，正人工清除。
    </p>
</body>
</html>

在这里插入图片描述

列表

在HTML中，有两种类型的列表：

无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style-type: square;
            /* 设置无序列表的图标 */
            /* 可以设置为none */
        }
        ol {
            list-style-type: lower-alpha;
            /* 设置有序列表的图标 */
            /* 可以设置为none */
        }
    </style>
</head>
<body>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Juice</li>
    </ul>
    <ol>
        <li>Java SE</li>
        <li>HTML</li>
        <li>CSS</li>
    </ol>
</body>
</html>

在这里插入图片描述

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 70%;
            margin: auto;
        }
        table#customers {
            width: 80%;
            margin: auto;
            border-collapse: collapse;
        }
        #customers th, #customers td {
            text-align: center;
            border: 1px black solid;
            background-color: yellowgreen
        }
        #customers tr th {
            font-size: 25px;
            font-family: "黑体";
            font-weight: bolder;
            font-style: normal;
            color: brown;
        }
        #customers tr td {
            font-size: 20px;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 500px;
            color: blueviolet;
        }
        #customers tr.alt td {
            background-color: white;
        }
    </style>
</head>
<body>
    <div>
        <table id="customers">
            <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
            </tr>
            <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
                <td>Germany</td>
            </tr>
            <tr class="alt">
                <td>Berglunds snabbköp</td>
                <td>Christina Berglund</td>
                <td>Sweden</td>
            </tr>
            <tr>
                <td>Centro comercial Moctezuma</td>
                <td>Francisco Chang</td>
                <td>Mexico</td>
            </tr>
            <tr class="alt">
                <td>Ernst Handel</td>
                <td>Roland Mendel</td>
                <td>Austria</td>
            </tr>
        </table>
    </div>
</body>
</html>

在这里插入图片描述

CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

下面的图片说明了盒子模型：

在这里插入图片描述

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置**内容区域**的宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: lightgrey;
            width: 300px;
            line-height: 20px;
            /* 内容部分 */
            border: 25px solid green;
            /* 边框 */
            padding: 25px;
            /* 内边距 */
            margin: 25px;
            /* 外边距 */
        }
    </style>
</head>
<body>
    <h2>盒子模型演示</h2>

    <p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

    <div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

</body>
</html>

边框

普通边框

边框样式

border-style属性用来定义边框的样式。

none | dashed 虚线边框 | solid 实线边框 |

边框宽度

border-width属性为边框指定宽度。

边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色：

name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”

单独设置各边

p {
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

边框简写属性

border:5px solid red;

CSS3边框

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width:300px;
            line-height: 20px;
            background-color: blueviolet;
            padding: 10px 40px;
            border:2px solid gray;
            border-radius: 25px;
            /* 设置圆角边框 */
        }
    </style>
</head>
<body>
    <div>border-radius 属性允许您为元素添加圆角边框！ </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width:300px;
            height:100px;
            background-color:yellow;
            box-shadow: 10px 10px 5px grey;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

CSS3圆角属性

属性	描述
border-radius	所有四个边角属性的缩写
border-top-left-radius	左上角的弧度
border-top-right-radius	右上角的弧度
border-bottom-left-radius	左下角的弧度
border-bottom-right-radius	右下角的弧度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            background-color: yellow;
            border-top-left-radius: 30px;
            border-top-right-radius: 60px;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

外边距和内边距

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
	        background-color: yellow;
        }
        p.margin {
            margin-top: 100px;
            margin-bottom: 100px;
            margin-right: 50px;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <p>这是一个没有指定边距大小的段落。</p>
    <p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>

在这里插入图片描述

margin属性可以有一到四个值。

margin: 25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin: 25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin: 25px 50px;
- 上下边距为25px
- 左右边距为50px
margin: 25px;
- 所有的4个边距都是25px

padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            background-color: yellow;
        }
        p.padding {
            padding-top:25px;
            padding-bottom:25px;
            padding-right:50px;
            padding-left:50px;
        }
    </style>
</head>
<body>
    <p>这是一个没有指定填充边距的段落。</p>
    <p class="padding">这是一个指定填充边距的段落。</p>
</body>
</html>

在这里插入图片描述

2.3、CSS样式、盒子模型

文章目录

样式

背景

文本

字体

列表

表格

CSS盒子模型

边框

普通边框

CSS3边框

CSS3圆角属性

外边距和内边距

猜你喜欢