CSS入门

最新推荐文章于 2025-12-01 16:00:16 发布

原创最新推荐文章于 2025-12-01 16:00:16 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

前端专栏收录该内容

1 篇文章

订阅专栏

CSS样式：层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS作用：CSS就是网页的化妆师，可以让页面变得更加美观。
使用方法：1. 直接写在标签 2. 写在style 标签内 3. 使用外部 .css 文件
外部css文件：<link rel="stylesheet" href="index.css">
css选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*优先级  id>class >标签*/
        /*简单选择器  ：id 选择器   class选择器  标签选择器*/

        /*id 选择 #作为标识  */
        #p1 {
            color: green;
        }

        /*标签选择器*/
        /*p {*/
        /*    color: red;*/
        /*}*/
        #p3 {
            color: purple;
        }

        /*class 选择器 .class标识 北斗帅帅  */
        .p2 {
            color: yellow;
        }

        /* 群组选择器*/
        span, #p1, #p3 {
            color: blue;
        }
        /*全选选择器*/
        * {
            /*字体大小*/
            font-size: 36px;
        }
    </style>
</head>
<body>

<p id="p1">以前我只想致富，现在我只想脱贫1</p>
<p class="p2" id="p3">以前我只想致富，现在我只想脱贫2</p>

<span class="ap">别说晚上要节食</span>
<p class="ap">不然冰箱里会有灯</p>
<div class="ap">宝，我今晚去运动了，什么运动，</div>
</body>
</html>

伪类选择器
实现网页中链接点击变色的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*未访问时*/
        a:link {
            color: black;
        }

        /*鼠标悬浮时*/
        a:hover {
            color: red;
        }

        /*鼠标点击手*/
        a:active {
            color: purple;
        }

        a:visited {
            color: yellow;
        }

        #boss  span {
            color: red;
        }

       #boss .box1 span {
            color: green;
        }
    </style>
</head>
<body>
<a href="#">点击一下 清都山水郎</a>


<div class="box" id="boss">
    <div class="box1">
        <span> 颜色</span>
    </div>
</div>

</body>
</html>

字体样式和文本样式
给网页中的文本修饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*字体样式*/
        p {
            /*字体类型*/
            /*font-family: 楷体;*/
            /*!*字体大小*!*/
            /*font-size: 36px;*/
            /*!*字体粗细*!*/
            /*font-weight: bold;*/
            /*!*斜体*!*/
            /*font-style: italic;*/
            /*!*字体大小写*!*/
            /*font-variant: small-caps;*/
            /*颜色*/
            color: red;
            /*复合样式*/
            /*字体样式 字体大小写   字体粗细  字体大小  字体的类型*/
           
            /*font: italic  bold   36px 宋体  ;*/

            /*文本样式*/
            /*字体居中*/
            /*text-align: center;*/
            text-indent: 2em; /*缩进2个中文的长度*/
            /*下划线*/
            /*text-decoration: underline;*/
            text-decoration: line-through; /*删除线*/
            /*字体行高*/
            line-height: 40px;
            /*词据*/
            word-spacing: 10px;

        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>

<p>宝 输了液 什么液 想你的夜</p>
<a href="">超链接</a>

</body>
</html>

背景样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /*背景颜色*/
            /*background-color: green;*/
            /*!*背景图片*!*/
            /*background-image:url("../image/1.jpg");*/
            /*!*背景图片大小*!*/
            /*background-size:100px  100px;*/
            /*!*取消平铺*!*/
            /*background-repeat: no-repeat;*/
            /*!*背景定位*!*/
            /*background-position: center;*/
            /*复合样式*/
            background: skyblue url("这里是你的图片路径") no-repeat center/100px 100px ;
            /*背景颜色   背景图片  是否需要平铺   背景定位 /  背景大小*/
            /*边框  solid 实线*/
            border: 2px green solid ;
            border-radius: 10px;
        }
    </style>
</head>
<body>

<button>按钮</button>
<div></div>

</body>
</html>