[Web] HTML与CSS——CSS简介

Varitall

已于 2023-09-24 17:59:44 修改

阅读量64

点赞数

分类专栏： Web 文章标签：前端 html css

于 2023-07-27 10:57:08 首次发布

本文链接：https://blog.csdn.net/joyride_run/article/details/131948620

版权

Web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、CSS简介

CSS是【层叠样式表单】。是用于（增强）网页样式并允许将样式信息与网页内容分离的一种标记行语言。

二、CSS语法规则

（1）选择器

浏览器根据“选择器”决定受CSS样式影响的HTML元素。

（2）属性

（3）多个声明

三、CSS与HTML结合使用的方式

1、直接定义标签中的style属性

<body>

<div style="border-width: 1px;border-style: solid;border-color: red;">一个div标签</div>
<!-- 或者 style="border:1px solid red" -->

</body>

显然这种方式只适合少量情况，且可读性差，无复用性。

2、head标签中定义

在head标签中，使用style标签来定义各种自己需要的CSS样式。而且在style标签中，如果需要注释，要按照CSS的规则去注释（/**/）。

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- style标签专门用来定义CSS样式代码 -->
    <style type="text/css">
        div { /*所有的div标签都有效*/
            border: 1px solid red;
        }
        span {
            border-width: 1px;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>

<body>
    <div>一个div标签</div>
    <span>一个span标签</span>
</body>

显然这种方法只能在一个文件中复用，不好维护。

3、link标签引入

CSS文件：

div {
    border: 1px solid red;
}

span {
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

HTML文件：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./css/test_01.css"/>
</head>

<body>
    <div>一个div标签</div>
    <span>一个span标签</span>
</body>

这样即可实现复用以及维护。

四、CSS选择器

1、标签名选择器

标签名选择器，可以决定哪些标签被动的使用这个样式。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            border:5px solid yellow;
            color:blue;
            font-size:30px;
        }
        span{
            border:5px dashed blue;
            color:yellow;
            font-size:20px;
        }

    </style>
</head>

<body>
    <div>一个div标签</div>
    <span>一个span标签</span>
</body>

标签名选择器，只要引用到html文件中，就会对所有的标签生效。

2、id选择器

id选择器，可以让我们通过id属性选择性的去使用这个样式。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* id选择器，用#开头，后面接名字，在标签中通过id="名字"调用 */
        #id01{
            color:blue;
            font-size:30px;
            border:1px yellow solid;
        }
        #id02{
            color:red;
            font-size:20px;
            border:5px blue dotted;
        }
    </style>
</head>

<body>
    <div id="id01">一个div标签</div>
    <span id="id02">一个span标签</span>
</body>

3、class选择器（类选择器）

class类型选择器，可以通过class属性有效的选择性地去使用这个样式。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .class01{
            color:blue;
            font-size:30px;
            border:1px solid yellow;
        }
    </style>
</head>

<body>
    <div class="class01">一个div标签</div>
    <span class="class01">一个span标签</span>
</body>

那这里有一个问题，id选择器和class选择器有什么区别呢？我们看下面一张图：

显然可以看出，一个id选择器只能给一个标签使用，而一个class选择器可以给多个标签使用。

4、组合选择器

组合选择器可以让多个选择器共用一个CSS样式。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div, span, #id01, .class01 {
            color:pink;
            font-size:30px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div>一个div标签</div>
    <span>一个span标签</span>
    <div id="id01">一个div标签</div>
    <span class="class01">一个span标签</span>
</body>

五、常用样式

1、颜色

<style type="text/css">
    div {
        color:pink;
    }
</style>

2、宽度和高度

宽度和高度设置的是标签的边框的宽高，所以要想看到效果，需要给边框设置样式。

<style type="text/css">
    div {
        border:1px solid black;
        width:200px;
        height:100px;
    }
</style>

3、背景颜色

<style type="text/css">
    div {
        background-color:pink;
    }
</style>

4、字体样式

<style type="text/css">
    div {
        color:pink;
        font-size:30px;
    }
</style>

5、标签居中

指的是标签相对于父容器的居中。

注意：必须要设置width和height才能看到效果，否则边框本来就填充整个容器，居中无意义。

<style type="text/css">
    div {
        width:200px;
        height:100px;
        margin-left: auto;
        margin-right: auto;
    }
</style>

6、文本居中

边框内的文本居中。

<style type="text/css">
    div {
        border:1px pink solid;
        text-align: center;
    }
</style>

7、超链接去掉下划线

<style type="text/css">
    a {
        text-decoration: none;
    }
</style>

8、表格细线

将单元格和表格的线合并。

<style type="text/css">
    table {
        border:1px solid black;
        border-collapse:collapse;
    }
    td, th {
        border:1px solid black
    }
</style>

9、去除无序列表的点

<style type="text/css">
    ul {
        list-style:none;
    }
</style>

Varitall

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[Web] HTML与CSS——CSS简介

">一个div标签-- 或者 style="border:1px solid red" -->
复制链接

扫一扫

专栏目录