CSS入门

最新推荐文章于 2025-04-14 13:07:29 发布

原创最新推荐文章于 2025-04-14 13:07:29 发布 · 244 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

java 同时被 2 个专栏收录

35 篇文章

订阅专栏

web

4 篇文章

订阅专栏

本文作为CSS入门教程，介绍了CSS的基本概念，如其负责网页的美化，以及三种使用方式：行内样式、内部样式和外部样式。重点推荐了外部样式以实现更好的代码组织和复用。接着，文章详细讲解了CSS语法，包括选择器、属性和值，并列举了一些常用的选择器和CSS属性，如文本、字体、背景、边框等。最后，文章探讨了CSS的盒子模型和定位，这些都是CSS布局的关键部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 CSS入门
1.1 引入
html：负责网页的结构
css：负责网页的美观（样式）
1.2 体验

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
    a{
        font-size:34px;
        color:#393}

</style>
<body>
<a href="">超链接1<br/></a>
<a href="">超链接2<br/></a>
<a href="">超链接3<br/></a>
<a href="">超链接4<br/></a>
</body>
</html>

1.3 定义
CSS（Cascading Style Sheet 层叠样式表）简称，样式。
主要负责网页的美观。
1.4 css的使用方式
1）行内样式
注意：
1）使用标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式

    <a href="xxxx" style="font-size:19px;color:#090">超链接</a>

2）内部样式
注意：
1）使用style的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式
3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用

    <style type="text/css">
                    a{
                        font-size:24px;
                        color:#0F0;
                    }
                </style>

3）外部样式（推荐使用）
注意：
1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件

<!-- 导入外部css文件
                    href  : 表示外部css文件的位置
                    rel: 表示关联的是样式表
                -->
                <link href="01.css" rel="stylesheet"/>

2 CSS语法

a{
            font-size:24px;
            color:#F00;
    }

选择器（selector）：使用选择器来选择需要添加样式的标签。
CSS属性（property）：给选择的标签添加什么样式。例如，字体大小，颜色，背景…..
CSS值（value）：添加样式的具体值。12px , 红色，背景图片….
2.1 选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--
css中的选择器:
1.标签选择器:选中同名的所有标签    
语法:标签名称{ css代码}
2.类选择器:选中所有同名的类的标签
使用规则:标签内部必须有class属性
使用语法:
.类名{css代码}
注意:当一个标签同时被标签选择器和类选择器同时选中的时候,类选择器起作用,类选择器相对于标签选择器的优先级更高
3.id选择器
使用规则:标签内必须有id属性,选中对应的id的值的标签进行样式的设定
语法:#id值{css样式}
注意:
1.当一个标签同时被标签选择器,类选择器,id选择器同时选中的时候,id选择器起作用,此时id选择器的优先级最高
2.在一个网页中不允许存在同名的id值,以后我们在我们js中经常会通过标签的id属性去点对点的找到对应的标签

4.并集选择器
当多个选择器中的css代码相同的时候,我们可以使用并集选择器,对这些css代码进行抽取

5.交集选择器:作用是选中某一个标签中的子标签(外标签 内标签)
语法:
    外部选择器 内部标签选择器{css代码}
-->
<!--/*标签选择器*/
-->
<style type="text/css">
/*类选择器,给div1和div2设置样式*/
.c1{
    font-size:14px;
    color:#C90}
    /*使用id选择器给div1设置样式*//
#i1{
    font-size:14px;
    color:#C90}
/*将div4和div5的c2样式设置为和c1完全相同*/
.c2{
    font-size:14px;
    color:#C90}
/*当c1和c2中的css代码相同的时候,我们就可以使用并集选择器将两个选择其中的代码进行抽取,形成一个并集选择器*/ 
.c1,.c2{

    font-size:14px;
    color:#C90}
/*给div中的span标签设置一个样式,交集选择*/
div span{
    font-size:14px;
    color:#C90}
    }   
</style>
</head>
<body>
<div class="c1" id="i1">我是div1</div><br/>
<div class="c2">我是div2</div><br/>
<div>我是div3</div><br/>
<div class="c2">我是div4</div><br/>
<div class="c2">我是div5</div><br/>
<div><span>我是div里面的span标签</span></div>
</body>
</html>

伪类选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伪类选择器</title>
<!--
        作用； 选择所有的标签
                伪类选择器
                作用：控制标签在不同状态下的样式。

        标签有四种状态：
                link: 没有访问过的状态
                hover: 鼠标经过的状态
                active:鼠标激活（按下但没有松开）的状态
                visited: 已经被访问过的状态（鼠标点下且松开）
                设置伪类选择器的时候,设置不同状态是有一定的顺序的(link-visited-hover-active)
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
这里的意思就是如果不按这个顺序的话，你所设置的属性只能显示一次。
-->
<style type="text/css">
        a:link{
            font-size:18px;
            color:#609;
            }

        a:visited{
            font-size:18px;
            color:#003;
            }
        a:hover{
            font-size:18px;
            color:#3F0;
            text-decoration:line-through;
            }
        a:active{
            font-size:18px;
            color:#F03;
                }
</style>
</head>
<body>
<a href="24-第二十四天作业/2.css使用方式.html">伪类选择器2</a>
</body>
</html>

2.2 常用的CSS属性和值
CSS文本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
    /*设置字符间距*/
    letter-spacing:28px;
    /*设置文本的位置*/
    text-align:center
    /*给文本设置上划/下划/中划线*/
    text-decoration:underline;
    /*设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开*/
    word-spacing:14px;
    }
</style>
</head>
<body>
<div>我爱 学习，学习 使我 快乐！</div>
</body>
</html>

CSS字体

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> css字体</title>
<style>
div{
    /*设置字体*/
    /*font-family:"黑体";*/
    /*设置字体大小*/
    /*font-size:12px;*/
    /*设置字体样式*/
    /*font-style:italic;*/
    /*设置字体的粗细*/
    /*font-weight:bold;*/
    /*字体设置的简写属性,一定要注意属性的顺序,注意这里面要用空格隔开，不是逗号。*/
    font:italic bold 12px "黑体"； 
    }
</style>
</head>
<body>
<div>我爱学习，学习使我快乐！</div>
</body>
</html>

CSS背景
图片位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css背景</title>
<style type="text/css">
    body{
        /*给标签设置背景颜色*/
        background-color:#006;

        /*将背景设置为图片*/
        background-image:url(%E5%90%B4%E4%BA%A6%E5%87%A1.JPEG);

        /*设置背景图片的重复规则
        repeat:默认显示的重复方式,x,y方向都重复
        repeat-x:设置图片仅在x方向上重复
        repeat-y:设置图片仅在y轴方向上进行重复
        no-repeat:图片不重复
        图片位置有：top,center,bottom.
        背景位置：left,center,right.
        */
        background-repeat:no-repeat;

        /*设置图片的位置*/
        background-position:bottom center ;

        /*设置图片背景的简写样式*/
        /*background:#006 url(../%E5%90%B4%E4%BA%A6%E5%87%A1.JPEG) repeat top right;*/
        }

</style>
</head>
<body>
</body>
</html>

CSS列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css列表</title>
<style type="text/css">
 ul{ 
    /*设置图片背景的简写样式*/
     list-style-type:circle;
     /*设置列表符号的图这里的url路径比较长，是因为我自己设置的图片位置的原因片，*/
     list-style-image:url(24%EF%BC%8D%E7%AC%AC%E4%BA%8C%E5%8D%81%E5%9B%9B%E5%A4%A9/05.%E7%B4%A0%E6%9D%90/start.jpg)
     /*列表样式的简写属性,这里的url路径比较长，是因为我自己设置的图片位置的原因*/
     list-style:url(24%EF%BC%8D%E7%AC%AC%E4%BA%8C%E5%8D%81%E5%9B%9B%E5%A4%A9/05.%E7%B4%A0%E6%9D%90/start.jpg)
     }

</style>
</head>
<body>
<ul>
<li>吴亦凡</li>
<li>薛之谦</li>
<li>高圆圆</li>
</ul>
</body>
</html>

CSS表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{
    /*合并表格的边框*/
    border-collapse:collapse;
    }
    </style>
</head>

<body>
<table align="center" height="300" width="400" border="2" >
<tr>
<td>姓名</td>
<td>科目</td>
<td>成绩</td>
</tr>
<tr>
<td>呼呼</td>
<td>数学</td>
<td>89</td>
</tr>
<tr>
<td>乐乐</td>
<td>数学</td>
<td>98</td>
</tr>
<tr>
<td>欢欢</td>
<td>数学</td>
<td>67</td>
</tr>
</table>
</body>
</html>

CSS边框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css边框</title>
<style type="text/css">
div{
    height:300px;
    width:400px;
    /*边框样式(注意： 边框只有加了border-style才会显示出来颜色，也就是说要先写它的样式属性)
            solid: 单话线
            dashed:虚线
            dotted: 点
            double: 双实线*/
    /*border-top-style:dashed;
    border-left-style:dotted;
    border-right-style:double;
    border-bottom-style:solid;*/
    /*边框颜色*/
            /*简写属性
              1) 默认设置方向属性： 上 右 下 左
              2）如果当前方向没有设置颜色，那么取对面的颜色*/
    /*border-top-color:#666;
    border-bottom-color:#633;
    border-left-color:#6FC;
    border-right-color:#F00;*/
    /*边框宽度*/
    /*border-top-width:2px;
    border-left-width:3px;
    border-right-width:12px;
    border-bottom-width:5px;*/ 
    /*所有边框属性的简写属性,必须记住的，并要按这个顺序border:border-width border-style       border-color*/ 
    border:3px dashed #0F3;


    }
</style>
</head>
<body>
<div>我是div标签</div>
</body>
</html>

3 盒子模型
这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--
        可以把html页面上每个标签看做是一个盒子。
        盒子相关的属性：
                宽度和高度（width和height）： 决定这个盒子的容量
                内边距（padding）： 盒子边框与内容的距离
                边框（border）： 盒子的厚度
                外边距（margin）： 盒子与盒子之间的距离
-->
<style>
div{
    /*1.将盒子的宽高变为之前的两倍
        2.将盒子厚度变为原来的两倍
        3.盒子里面的内容距顶部内10px
        4.盒子里面的内容距离左内边10px
        5.下面的盒子距离上面的盒子10px(两种方式实现)*/
        width:100px;
        height:100px;
        border:10px dashed #393;
    }
#d1{
        width:100px;
        height:100px;
        padding-top:10px;
        padding-left:10px;
        margin-top:30px;
    }
</style>
</head>

<body>
<div>我是一个盒子</div>
<div id="d1">我是老大</div>
</body>
</html>

4.CSS定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css定位</title>
<!--相对定位：relative（相对自己之前的位置）
    绝对定位：abosolute（相对父标签的位置）
    固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)-->
<style type="text/css">
div{
    height:200px;
    width:300px;
    border:10px solid #F33;
    }
#d1{
    position:relative;
    top:200px;
    left:200px;

    /*position:absolute;
    top:300px;
    left:400px;*/

    /*position:fixed;
    top:300px;
    left:400px;*/

    }
</style>
</head>
<body>
<div>div1</div>
<div id="d1">div2</div>
<br /><b<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />r /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>