特色栏目： python 批处理 net编程 Javascript Php Asp Css Html5 Android seo centos

当前位置 : 主页 > 网页制作 > css >

CSS 基本样式

来源：互联网收集：自由互联发布时间：2021-06-13

4.1 CSS 基本概念 CSS： Cascade Style Sheet 层叠样式表。样式表：样式的集合，定义HTML元素显示的方式。 4.2 CSS 的使用使用 CSS 的三种方式：外部样式表：需要配合外部的 CSS 样式文件使用

4.1 CSS 基本概念

CSS：Cascade Style Sheet 层叠样式表。

样式表： 样式的集合，定义HTML元素显示的方式。

4.2 CSS 的使用

使用 CSS 的三种方式：

外部样式表：需要配合外部的 CSS 样式文件使用

index.html 页面

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS 样式</title>
    <!-- 外部样式表 -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="div1"></div>
</body>
</html>

style.css 页面

/* style.css */
#div1{
    width: 200px;
    height: 200px;
    background: #ef5576;
}

内部样式表

index.html

<head>
    ......
    <style type="text/css">
        #div1 {
            width: 400px;
            height: 400px;
            background: blue;
        }
    </style>
</head>

内联样式表

index.html

<body>
    <div style="width: 500px; height:500px; background: yellow">
        ......
    </div>
</body>

优先级： 内联 CSS > 内部 CSS > 外部 CSS

结论：

如果一个样式在多个网页中使用，只能使用外部 CSS 样式表。
如果一个样式只是在一个页面中使用，可以考虑放到内部样式表。
除非有特殊情况，否则一般不建议使用内联样式。

4.3 CSS 的格式

格式：

选择器 {
    属性1: 值;
    属性2: 值;
    ......
}

注释的格式：

/* 这是注释的内容 */

注意：

如果值是字符串，可以使用双引号也可以使用单引号。
如果要声明多个属性，必须通过分号进行隔开。
CSS 中不区分大小写，但是建议使用小写。

4.4 CSS 选择器

描述如何选择HTML氧元素

4.4.1 元素选择器

选择 HTML 文档中的元素

p {
    background: yellow;
}

一旦选择使用，页面中的所有 p 元素都会被选中并变成黄色背景。

4.4.2 类选择器

选择文档中元素指定的类，类是通过 class 属性去指定的；多个元素可以使用同一个类。

html 文件

<div id="div1">
    <p class="c1" id="p1">段落1</p>
    <p class="c1" id="p2">段落2</p>
    <p class="c1">段落3</p>
    <p>段落4</p>
    <p>段落5</p>
</div>

css 文件

.c1 {
    background: green;
}

效果图

4.4.3 id 选择器

选择HTML文档中元素指定的ID

ID是通过id属性去设置的，每一个元素指定的id不能重复。