CSS学习指南：从入门到精通-CSDN博客

本文链接：https://blog.csdn.net/weixin_42498439/article/details/123019076

这篇博客详细介绍了CSS的基础知识，包括CSS的简单介绍、发展史、快速入门、选择器、美化网页元素和盒子模型等内容。通过学习，读者可以掌握CSS的选择器使用、页面美化技巧以及CSS的组织方式，帮助提升前端开发能力。

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

CSS学习

1.什么是CSS

1.1.CSS的简单介绍

css全称（Cascading Style Sheets）层叠样式表，它是一种标记语言。为美化网页用的。

css选择器

什么是css选择器
```
h1{ color:red; }
```
h1就是选择器，color为属性，red为值，color:red;为生命
1. 标签选择器（如：body,div,p,ul,li）。
2. 类选择器（如：class=“head”,class=“head_logo”）。
3. ID选择器（如：id=“name”,id=“name_txt”）。
4. 全局选择器（如：*号）。
5. 组合选择器（如：.head .head_logo,注意两选择器用空格键分开）。
6. 继承选择器（如：div p,注意两选择器用空格键分开）。
7. 伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）。
8. 字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含) 。
美化页面(文字、阴影、链接、超链接、列表、渐变…)
盒子模型
定位
浮动
网页动画

1.2.css发展史

css1.0

css2.0 DIV（块）+css，HTML与css结构分离的思想,网页变得简单，SEO（搜索引擎优化）。

css2.1 浮动，定位

css3.0 圆角，阴影，动画… 浏览器兼容性

1.3.CSS的快速入门及优势

1.4使用IDEA编写网页

![屏幕截图 2022-02-17 040151](.\图片\屏幕截图 2022-02-17 040151.png

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ckrhtGSh-1645255669770)(.\图片\屏幕截图 2022-02-17 040449.png)]

选择器示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v908ezaq-1645255669771)(.\图片\屏幕截图 2022-02-17 041933.png)]

四种css导入方式

优先级

就近原则
内行样式>内部样式>外部样式

1.内行样式

<!--行内样式：在标签元素中，编写一个style属性 -->
<h1 style="color:red">标题</h1>

2.内部样式

<!--内部样式 -->
<style>
        h1{
            color:green;
        }
</style>

3.外部样式

3.1连接式（***link属于html标签）

<!--外部样式 -->

<link rel="stylesheet" href="css/style.css">

<!--外部样式 css/style.css与页面在同一目录 -->
h2 {color:blue;}

3.2导入时(css2.1 先展示网页结构，再去渲染网页，***不建议用)

<!--外部样式之导入式 css2.0-->
<style>
        @import url("css/style.css");
</style>

2.选择器

2.1、基本选择器

作用：选择页面上的某一个或某一类元素

标签选择器

:选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color:#a13d30;
            border-radius: 24px;
            background: moccasin;
            width: max-content;
        }
        p {
            font-size: smaller;
        }

    </style>
</head>
<body>
<h1>学java</h1>
<p>听我说</p>
<h1>学java1</h1>
<p>听我说1</p>
</body>
</html>

类选择器（.class）

:选择所有class属性一致的标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .zq{
            color:red;
        }
        .zq1{
            color:green;
        }
    </style>
</head>
<body>

<h1 class="zq">标题1</h1>
<h1 class="zq">标题1</h1>
<h1 class="zq1">标题2</h1>
<h1>标题3</h1>


</body>
</html>

id选择器

: ***全局唯一！ #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            id选择器：id必须保证全局唯一
            #id名称{}
            优先级
            ***:  id选择器>class选择器>标签选择器
        */
        #z1{
            color:red;
        }
        .style{
            color:green;
        }
        h1{
            color:blue;
        }
    </style>
</head>
<body>

<h1 class="style" id="z1">标签1</h1>
<h1 class="style">标签2</h1>
<h1>标签3</h1>
<h1>标签4</h1>

</body>
</html>

优先级

id选择器>class选择器>标签选择器

2.2.层次选择器

1.后代选择器：在某个元素的后面

		/*后代选择器
          body下的p标签都有影响
        */
        body p{
            background: red;
        }

2.子选择器

		/*子选择器
          只有body-->下的p标签有影响
        */
        body>p{
            background: blue;
        }

3.相邻兄弟选择器

		/*
           相邻兄弟选择器：只有一个，class为active的向下			(相邻)一个p标签
         */
        .active+p{
            background: chartreuse;
        }

4.通用选择器

/*通用兄弟选择器
          当前选中原色的向下的所有兄弟元素
         */
        .active~p{
            background: bisque;
        }

2.3.结构伪类选择器

伪类：条件

<h1>hhh</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

		/* ul下的第一个子元素
        >>对li1有影响
        */
        ul li:first-child{background: #a13d30;}

        /* ul下的最后一个子元素
        >>对li3有影响
        */
        ul li:last-child{background: bisque;}

		/* 选中p1：定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个，并且是当前的原色财生效！
        >>对p1有影响
        */
        p:nth-child(2){background: chartreuse;}

        /* 选中父元素，下的p元素的第一个类型
        >>对p2有影响
        */
        p:nth-of-type(2){background: blue;}

2.4.属性选择器（常用）

html代码：

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first" >1</a>
    <a href="http://www.163.com" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href=abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links itm last">10</a>
</p>

css代码：


<style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /* 属性名，属性名=属性值（正则）
        存在id属性的元素   a[]{}
        正则：
        =  绝对等于
        *=  包含等于
        ^=  以等于的值，开头
        $=  以等于的值，结尾
        */
        /*a标签中有id的元素*/
        a[id]{
            /*背景颜色*/
            background: green;
        }
        /* id为first的元素 */
        a[id=first]{
            /*字体颜色*/
            color: red;
        }
        /* class中有links的元素
        =  绝对等于
        *=  包含这个元素
        */
       a[class*="links"]{
           background: yellow;
       }
       /*选中href中以http开头的元素*/
        a[href^="http"]{
            font-size: 70px;
        }
        /*选中href属性中以pdf结尾的元素*/
        a[href$="pdf"]{
            color: blue;
        }

    </style>

如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FyMxSLMl-1645255669772)(.\图片\屏幕截图 2022-02-18 151342.png)]

一些正则表达式

正则：
        =  绝对等于
        *=  包含等于
        ^=  以等于的值，开头
        $=  以等于的值，结尾

3.美化网页元素

3.1.为什么要美化网页

有效传递页面信息
页面漂亮，才能吸引用户
凸显页面主题
提高用户体验

span标签：重点要突出的字，使用span套起来

<style>
        #title1{
            font-size: 50px;
        }
</style>
<body>
欢迎学习<span id="title1">Java</span>
</body>

3.2.字体样式

<style>
        body{
            font-family:  Arial,楷体;/*可以加2种字体*/
            color: #a13d30;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>

3.2.1.font属性的综合写法

字体综合属性(font)写法顺序为：

font-style //字体风格
font-variant //字体变体
font-weight //字体粗细
font-size //字体大小
font-family //字体名称

哪个属性为默认值，可忽略不写

<style>
	p{
      /*1是字体风格，2字体变形,3是粗细，4大小，5字体名字 */
      font: oblique small-caps  bolder 24px "楷体";
  }
</style>

3.2.2 font另一种格式

选择器 { font：font-style font-weight font-size / line-height font-family ；}

<style>
	p{
		/*1是字体风格，2字体变形,3是粗细，4大小，5字体名字 */
		font:italic small-caps bold 12px/30px Arial, 楷体;
  }
</style>

3.3.文本样式

1.颜色 :color rgb rgba

				/*颜色：RGB
              #FF0000  红
              #00ff00  绿
              #0000ff  蓝
              事例：
              color: #0000ff;
              color: rgb(255,0,0);
            */
        /*颜色：RGBA
          A:0~1 透明度
          color: rgba(255,0,0,0.5);
        */

2.文本对齐方式 text-align: center

text-align: center;   /* 文字居中 */

3.首行缩进 text-indent

text-indent: 2em; /* 首行缩进 em为一个字符 */

4.行高 line-height

line-height: 24px;   /* 行高 */

5.装饰（下划线等）text-decoration

text-decoration: overline; /*上划线*/
text-decoration: line-through; /* 中划线 */
text-decoration: underline;  /* 下划线 */

超链接去下划线

<style>
	a{
  	text-decoration: none;  /*超链接去下划线*/
	}
</style>

6.图片文本水平对齐 vertical-align: middle

<img src="images/a.jpeg" width="300" height="400">
<span>今年不打算这些克利夫兰或者恕难从命下，， </span>

<style>
        /*图片文字水平对齐～ 参照物  a，b*/
        img,span{
            vertical-align: middle;  /* middle水平居中 center垂直居中 */
        }
</style>

3.4.阴影

/*text-shadow:1阴影颜色 2水平偏移 3垂直偏移 4 阴影半径*/
        #price{
            text-shadow: aqua 20px -10px 2px;
        }

网页效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6PVAVole-1645255669772)(./图片/截屏2022-02-19 上午11.06.31.png)]

3.5.超链接伪类

a:hover 记住

/*未访问链接状态*/
a:link{
    color:brown;
}
/*已访问过的链接状态*/
a:visited{
    color: dimgrey;
}
/*鼠标悬浮状态  ***记住 */
a:hover{
    color: orange;
}
/*鼠标按住状态*/
a:active{
    color: green;
}

3.6.列表

/*ul li*/
/*list-style:
    none  什么也不显示
    circle  空心圆
    decimal  数字
    square  正方形
*/
ul{
    background: dimgrey;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.7 .背景

背景颜色

.title{
		background: red
}

背景图片

/* background:1颜色 2图片 3 x位置 4 y位置 5平铺方式*/
background: red url("../images/D.png") 255px 10px no-repeat;

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/R.png");
    background-repeat: no-repeat;
    background-position: 226px 3px;
}

导航css页面，示例

CSS=>05.列表=>index.html. 如图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WRaWERx1-1645255669773)(./图片/截屏2022-02-19 下午2.22.35.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>

    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a>
        </li>
    </ul>
</div>

</body>
</html>

css/style.css

#nav{
    width: 300px;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /* background:1颜色 2图片 3 x位置 4 y位置 5平铺方式*/
    background: red url("../images/D.png") 255px 10px no-repeat;
}
/*ul li*/
/*list-style:
    none  什么也不显示
    circle  空心圆
    decimal  数字
    square  正方形
*/
ul{
    background: dimgrey;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/R.png");
    background-repeat: no-repeat;
    background-position: 226px 3px;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

3.8.渐变

可以去这个网站选样： https://www.grabient.com/

示例：

<style>
        body{
            /*background-color: #a80a0a;*/
            background-image: linear-gradient(30deg, #b82323 11%, #078acf 53%, #eea305 90%);
        }
</style>

如图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0LUFuapq-1645255669773)(./图片/截屏2022-02-19 下午2.46.19.png)]

4.盒子模型

数字
square 正方形
*/
ul{
background: dimgrey;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("…/images/R.png");
background-repeat: no-repeat;
background-position: 226px 3px;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}






### 3.8.渐变

可以去这个网站选样： [https://www.grabient.com/](https://www.grabient.com/)

---

示例：

```css
<style>
        body{
            /*background-color: #a80a0a;*/
            background-image: linear-gradient(30deg, #b82323 11%, #078acf 53%, #eea305 90%);
        }
</style>

如图

[外链图片转存中…(img-0LUFuapq-1645255669773)]