CSS基本操作详解及截图演示

贺志营

已于 2022-05-15 10:56:12 修改

阅读量1.6k

点赞数

分类专栏：【Web前端的学习】文章标签： css html 前端

于 2019-08-14 16:23:16 首次发布

本文链接：https://blog.csdn.net/HeZhiYing_/article/details/99580064

版权

【Web前端的学习】专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Web前端基础修炼

HTML基本标签详解与运行截图

CSS基本操作详解及截图演示

JavaScript基础(ECMAScript)

创建CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建CSS</title>
    <!--文档内嵌样式表,其中还有一个是外部样式表，那个是在外面新建一个CSS文档把a的内容放里面就行了，它适用于所有的html文件-->
    <!--其中元素内嵌样式表的优先级高于文档内嵌样式表高于外部样式表-->
    <style type="text/css">
        a{
            font-size: 30px;
            color: #9e61ff;
        }
    </style>
</head>
<body>
<a>hello world</a>
<br>
<!--使用元素内嵌样式表，属性可以设置字体大小和颜色,其中颜色是RGB三原色构成-->
<a style="font-size: 40px;color: #ff7e44">hello world</a>
</body>
</html>

运行结果：

创建边框和背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建边框和背景</title>
    <style>
        .c{
            border-width: 5px;
            border-color: #9d59ff;
            border-top-color: #b1ff42;
            border-style: solid;
            border-bottom-style: dashed;
        }
        .s{
            width: 677px;
            height: 677px;
            border: 5px solid red;
            border-top: 10px dashed yellow;
            background: #9d59ff;
            background-image: url("网络头像.JPG");
        }
    </style>
</head>
<body>
<p class="c">hello world</p>
<p class="s">hello css</p>
</body>
</html>

运行结果：

CSS选择器

标签选择器

标签选择器，顾名思义，就是确定是哪个标签的，p标签了，div标签了等等等吧，其特点就是如果你选择了p标签，那么所有的p标签的样式都会服从你的定义，同理div等其他标签也是这样，来看个例子吧

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        p {
            color: #ff00ff;
        }
        div {
            color: blue;
        }
    </style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>

在这里给p标签设置了颜色，给div标签设置了另一种颜色，你会发现，所有的p标签和div标签都改变了颜色，结果如下

类选择器

从上面的标签选择器可以看出，每次设置样式的时候，如果是p标签，那么会把所有的p标签的样式都改变了，很多时候我们只是希望改某些标签的样式，所以就有了类选择器，也就是我们自定义一个类选择器，哪个标签使用，那么在该标签后用class属性调用就可以了，还有一个class属性可以调用多个类选择器，注意类选择器名字前有一个"."，看看下面的例子吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .red {
            color: red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">生僻字</li>
        <li class="red font35">芒种</li>
        <li>过客</li>
    </ul>
</body>
</html>

上面自定义了一个颜色和一个字号，通过不同的li标签去调用，展示出不同的样式，运行如下

id选择器

这个id选择器跟上面的类选择器很相似，在定义的时候是在名字前加"#"，在调用的时候是用id属性，其特点是，你自定义的样式只能被调用一次，具体看下面的例子吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #red {
            color: red;
        }
    </style>
</head>
<body>
<!--id选择器只能被调用一次-->
<div id="red">hello world</div>

<!--由于上面已经调用，所以下面这个会报错-->
<!--<p id="red">hello</p>-->
</body>
</html>

上面那个报错的我已经注释了，你要是想演示，可以在即放开试试，上面的运行结果如下

通配符选择器

通配符选择器就比较厉害了，如果你是以*来定义了一个选择器，那么就是所有的样式都会跟你自定义的一样了，来看效果吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>
    <style>
        * {
            color: green;
            font-size: 20px;
        }
    </style>
</head>
<body>
<h1>啦啦啦啦</h1>
<div>hello</div>
<p>world</p>
</body>
</html>

运行结果如下：

字体属性

字体属性，也就是设置字体倾斜了，加粗了，大小了还有字形，例如微软雅黑或者宋体等，看看效果吧。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        body {
            font-family: 微软雅黑;
            font-size: 25px;
        }
        .bold {
            /*font-weight: bold;*/
            font-weight: 700;
        }
        div {
            /*复合属性，这里四个属性必须按顺序写，其中后两个是必不可少的*/
            /*font: font-style font-weight font-size/line-height font-family;*/
            /*分别是倾斜，加粗，16px大小和微软雅黑字体*/
            font: italic 700 16px 微软雅黑;
        }
        p {
            font-style: italic;
        }

        em {
            font-style: normal;
        }
    </style>
</head>
<body>
<div class="bold">hello world</div>
<p>上课时候的你</p>
<em>下课时候的你</em>
<div>hello</div>
</body>
</html>

运行结果如下：

创建文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建文本样式</title>
    <style type="text/css">
        .class1{
            text-align: center;/*这是居中*/
            direction: ltr;/*从左到右排列*/
            word-spacing: 50px;/*单词间间距*/
            letter-spacing: 10px;/*字母间间距*/

        }
        .class2{
            line-height: 200px;/*设置行高，也是行与行之间的间距*/
            text-indent: 50px;/*设置首行缩进*/
            text-decoration: underline;/*设置下划线，其中overline是设置上划线line-through是设置删除线*/
            text-transform: capitalize;/*设置首字母大写，其中uppercase是全部大写，lowercase是全部小写*/
        }
    </style>
</head>
<body>
<p class="class1">hello world</p>
<p class="class2">hello worldhello worldhello worldhello worldhello worldhello worldhello world</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建文本样式</title>
    <style type="text/css">
        .class1{
            font-family: 微软雅黑;/*设置字体名称*/
            font-size: 40px;/*设置字体大小*/
            font-style: italic;/*设置字体样式*/
        }
        .class2{
            font-variant: small-caps;/*全部小写变大写*/
            font-weight: 900;/*设置加粗，可以自定义，也可以用bolder等*/
            text-shadow: 1px 8px 2px;/*设置水平偏移竖直偏移和模糊程度*/
        }
    </style>
</head>
<body>
<p>hello world</p>
<p class="class1">hello world</p>
<p class="class2">hello world</p>
</body>
</html>

运行结果：

内部样式表

说起来内部样式表，不难想起选择器，只不过这里分定义的位置，首先看看什么样是内部样式表吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式表</title>
    <!--练习的时候常用-->
    <!--内部样式表就是把样式定义在了html内-->
    <style>
        div {
            color: green;
        }
    </style>
</head>
<body>
<div>hello world</div>
</body>
</html>

运行结果：

内部样式表就是定义在html内的，也就是我们上面演示选择器的时候用的

行内样式表

学过内部样式表，行内样式表，是不是能猜出个一二了，行内样式表就是定义在行内的，难以想象吧，看看例子吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式表</title>
</head>
<body>
<p style="color: green; font-size: 20px">要想生活过得去，身上必须带点绿</p>
</body>
</html>

运行结果：

外部样式表

好了，终于到我们的外部样式表了，这也是我们开发中最常用的方式，因为我们大部分时候写的样式会很多，如果都写在html中多不方便呀，想看看html代码，要往后翻上百行代码，当然了，开发中是提倡结构和样式分离的，也就是你写你的html我写我的CSS，来上例子吧，首先我们写一个.css文件，也就是把我们的样式先写好，简单起见，我就写了一个样式。

/*这里只有样式*/
div {
    color: green;
}

这个样式我是跟html文件放在一块的，方便html来引入该css样式，好了，说说怎么引入吧，用到了link标签，该标签里写了两个属性，反别是rel表示链接文档的类型，其中stylesheet代表是样式表文档，href是你写的css的路径，好了看具体操作吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <!--rel表示链接的文档是一个样式表文档，href是css的文件路径-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div>要想生活过得去，身上必须带点绿</div>
</body>
</html>

看看结果是不是我们想要的

创建文本过度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建文本过度</title>
    <style type="text/css">
        p{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
        p:hover{
            width: 200px;
            height: 200px;
            background-color: #864eff;
            transition-delay: 150ms;/*当鼠标点上后的延迟时间*/
            transition-duration: 500ms;/*中间动画的时间*/
        }
    </style>
</head>
<body>
<p></p>
</body>
</html>

使用变换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用变换</title>
    <style type="text/css">
        p{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
        p:hover{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            transform: rotate(30deg);/*默认是以中心点顺时针旋转30度*/
            transform-origin: top right;/*设置以右上角点开始,这里也可以写例如10px 20px为距坐是10px像素距上是20px像素位置*/
            /*transform: scale(2);!*整体放大2倍*!*/
            /*transform: scale(2);!*横向放大2倍*!*/
            /*transform: scale(2);!*纵向放大2倍*!*/
        }
    </style>
</head>
<body>
<p></p>
</body>
</html>

盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style type="text/css">
        .class1{
            border: 1px solid black;
            background-color: antiquewhite;/*背景颜色*/
            background-clip: content-box;/*设置背景只在内容区域显示*/
            padding-top: 20px;/*上边内边距*/
            padding-left: 20px;/*左边内边距*/
            padding-right: 20px;/*右边内边距*/
            padding-bottom: 20px;/*下边内边距*/
            /*padding: 80px 60px 40px 20px;!*距上右下左的距离*!*/

            margin-top: 50px;/*上边外边距*/
            margin-right: 50px;/*右边外边距*/
            margin-left: 50px;/*左边外边距*/
        }
    </style>
</head>
<body>
<div class="class1">hello world</div>
</body>
</html>