CSS的基本样式

Sirius小鑫

已于 2023-02-15 16:42:57 修改

阅读量2.5k

点赞数 4

分类专栏： HTML+CSS+JavaScript 文章标签： css

于 2022-08-19 17:27:55 首次发布

本文链接：https://blog.csdn.net/qq_62283591/article/details/125873091

版权

HTML+CSS+JavaScript 专栏收录该内容

3 篇文章 7 订阅

订阅专栏

CSS

1. 添加CSS的三种方式
2. CSS的长度单位
3. CSS的颜色表示
4. 背景样式
5. 边框样式
6. 字体样式
7. 文本样式

1. 添加CSS的三种方式

(1) 内联样式(行内样式)
在HTML标签中直接通过style属性来添加样式

<!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>
</head>
<body>
    <!-- 行内样式：div的宽度为父元素body宽度的一半，会随body的宽度改变而改变；div的高度固定为500px -->
    <div style="width: 50%; height: 500px; background-color: red;">
        <!-- 行内样式：img的宽度为父元素div宽度的一半 -->
        <img src="./img/landscapeImg01.jpg" alt="landscapeImg01" style="width: 50%;">
    </div>
</body>
</html>

(2) 内部样式
在<style></style>标签中添加样式，让样式可以重复使用，也可以做到结构与样式分离

<!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的宽度为父元素body宽度的一半，会随body的宽度改变而改变；div的高度固定为500px */
        div{width: 50%; height: 500px; background-color: red;}
        /* img的宽度为父元素div宽度的一半 */
        img{width: 50%; border-radius: 14px;}
    </style>
</head>
<body>
    <div>
        <img src="./img/landscapeImg01.jpg" alt="landscapeImg01">
        <img src="./img/landscapeImg02.jpg" alt="landscapeImg02">
    </div>
</body>
</html>

(3) 外部样式
把样式保存在一个.css文件中，通过链接外部文件来引入样式表

<!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">
    <!-- 外部样式用link标签引入 -->
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>
<body>
    <div>
        <span>风景图片</span>
        <img src="./img/landscapeImg01.jpg" alt="landscapeImg01">
        <img src="./img/landscapeImg02.jpg" alt="landscapeImg02">
    </div>
</body>
</html>

外部样式文件index.css相对路径：
外部样式文件路径

index.css外部样式文件：

 body{
    padding: 0;
    margin: 0;
 }
 span{
    /* 父元素body没有设置文本字体大小，一般默认为16px，2em就是32px */
    font-size: 2em;
 }
 /* div的宽度为父元素body宽度的一半，会随body的宽度改变而改变；div的高度固定为500px */
 div{
    width: 50%;
    height: 500px;
    background-color: red;
}
 /* img的宽度为父元素div宽度的一半 */
 img{
    width: 50%;
    border-radius: 14px;
}

2. CSS的长度单位

(1) px：像素(pixel)，固定的长度单位，图像中不可再分割的最小长度，不会随其它因素改变
(2) em：相对的长度单位，相对于父级元素文本字体大小设置元素的文本字体大小
(3) %：百分比，相对长度单位，相对于父级元素来设置元素的长度、宽度和文本字体大小

3. CSS的颜色表示

(1) 单词表示：red，green，blue，yellow…
(2) 十六进制表示：范围：#000000~#FFFFFF
(3) rgb三原色表示：rgb(0,0,0); 范围：(0,0,0)~(255,255,255)

<!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>
</head>
<body>
    <div style="color: blue;">单词对应的颜色表示</div>
    <div style="color: #00ff00;">十六进制颜色表示</div>
    <div style="color: rgb(255,0,0);">rgb三原色表示</div>
</body>
</html>

CSS颜色表示

4. 背景样式

(1) background-color：背景颜色，属性值可以用三种颜色表示方法中的一种表示
(2) background-image：背景图片，属性值：url(图片地址)
(3) background-repeat：背景图平铺方式，属性值：repeat(水平与竖直方向都会重复铺满)、repeat-x(水平方向重复铺满)、repeat-y(竖直方向重复铺满)、no-repeat(水平与竖直方向都不平铺)
(4) background-position：背景图片位置，属性值可以用px和百分比%其中一种表示。background-position-x：单独表示水平方向的平铺方式，用left，center，right其中一个来表示水平方向的特殊位置。background-position-y：单独表示竖直方向的平铺方式，用top，center，bottom其中一个来表示竖直方向的特殊位置
(5) background-attachment：背景图片随滚动条的移动方式，属性值：scroll(默认值，背景图会随滚动条移动而移动，位置按照当前元素偏移)，fixed(背景图不会随滚动条移动而移动，位置按照浏览器偏移)
(6) background：复合样式，前五个属性组合起来简写。但是注意不要混用，background和background-color、background-img、background-position…混用，background写在最后会覆盖掉前面的属性。比如前面设置了background-color: red;，后面又设置background: green …;，背景绿色就会覆盖红色

<!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{
            width: 100%;
            height: 1400px;
            background-color: green;
            background-image: url(./img/landscapeImg01.jpg);
            background-repeat: no-repeat; /* no-repeat就只有一张背景图，不会重复，不管图片是大于还是小于容器 */
            background-position: center center;
            /* background-position-x: center;
            background-position-y: center; */
            /* background-attachment: scroll; 默认值 */
            background-attachment: fixed;
            /* background: green url(./img/landscapeImg01.jpg) no-repeat center center scroll; 复合样式写法 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

当设置background-attachment: scroll;或者不设置该属性时，背景图片会随上下滚动而移动

scroll

scroll
当设置background-attachment: fixed;时，背景图片就不会随上下滚动而移动，但会相对浏览器偏移

fixed

5. 边框样式

(1) border-width：边框大小(粗细)，属性值大小可以用px和%表示
(2) border-style：边框样式，常用属性值有：dashed虚线边框，solid实线边框，dotted点线边框，double双实线边框
(3) border-color：边框颜色，属性值可以用三种颜色表示方法red、#000000、rgb(0,0,0)其中一种表示
(4) border：复合样式，前三个属性组合起来简写，同background一样不要和border-width、border-style、border-color混用。
(5) 也可以单独设置上下左右的边框，border-top、border-bottom、border-left、border-right
(5) border-radius：边框圆角，给一个正方形设置该属性值为边长的一半就可以得到一个圆形

<!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{
            width: 200px;
            height: 200px;
            background-color: red;
            border-width: 10px; /* 边框大小 */
            border-style: dashed; /* dashed虚线边框，solid实线边框，dotted点线边框，double双实线边框 */
            border-color: black; /* 边框颜色 */
            /* border: solid blue 5px; 复合样式写法 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

边框样式

6. 字体样式

(1) font-size：字体大小，属性值大小用px表示，浏览器默认大小一般16px
(2) color：字体颜色，属性值可以用三种颜色表示方法red、#000000、rgb(0,0,0)其中一种表示
(3) font-family：字体类型，有英文和中文字体之分，字体类型名字中含有空格时要用引号，例如’Courier New’。属性值，通常设置多个字体类型以适配更多设备，例如font-family: ‘Courier New’, Courier, monospace;
(4) font-weight：字体粗细，属性值：normal正常，bold加粗
(5) font-style：字体样式，属性值：nomal正常，italic/obliqu倾斜，italic要求字体带有斜体属性，oblique没有斜体属性也可以设置字体倾斜
(6) font：复合样式

7. 文本样式

(1) text-decoration：文本修饰，属性值：underline下划线，overline上划线，line-through删除线，none无修饰，也可以同时添加三种值，例如text-decoration: underline, overline, line-through;
(2) text-transform：文本大小写(针对英文文本)，属性值：capitalize单词首字母大写，lowercase全部小写，uppercase全部大写
(3) text-indent：文本缩进(针对首行缩进)，字体大小确定时，属性值可以用px，也可以用em，缩进会随字体大小改变
(4) text-align：文本对齐方式，属性值：left左对齐，center居中对齐，right右对齐，justify两端对齐
(5) text-height：行高，由一行文本的上、下边距和字体大小组成，行高的默认值也会随当前的字体大小的改变而改变
(6) letter-spacing：字间距；word-spacing：词间距(针对英文文本，中文不起作用)
(7) word-wrap：文本换行(长英文单词和很大的数字不换行会溢出)，换行不强烈，会有一定的空白，属性值：break-word；word-break：强制换行，不会留空白，属性值：break-all