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

目录

 

创建CSS

创建边框和背景

CSS选择器

创建文本样式

创建文本过度

使用变换

盒子模型


创建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>

运行结果:

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

创建边框和背景
<!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基本操作详解及截图演示

CSS选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style type="text/css">
        a {/*这是a元素的效果,这里可以用a,同时也可以用自定义的.class1或#id还有属性[href]来特定指定某个元素*/
            font-size: 40px;
            color: #9e61ff;
        }
        a:hover{/*冒号属性是当鼠标经过的时候的样式*/
            font-size: 60px;
            color: red;
        }
        p {/*这是p元素的效果,如果这里的p换成*就是所有元素的效果*/
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
<a class="class1">hello world</a><!--这里的class属性是所有的元素都具有的属性,class属性的值可以重复使用-->
<br>
<a id="id">hello world</a><!--这里的id的值不能重复使用,使用的话会有红线,因为id是唯一标识-->
<br>
<a href="https://blog.csdn.net/HeZhiYing_">hello world</a>
<p>hello world</p>
<h1>hello world</h1>
</body>
</html>

运行结果:

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

创建文本样式
<!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>

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

<!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>

运行结果:

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

创建文本过度
<!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>

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

使用变换
<!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>

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

盒子模型
<!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>

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

上一篇:2021-01-04


下一篇:content:“\26A1“特殊字符和图标记录