css样式入门学习

一、css是什么

css 又叫层叠样式表

Cascading style sheets

CSS层疊样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；

没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；

这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为(CSS预处理器）的工具，提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。

什么是css预处理器

css预处理器定义了一种专门的编程语言，其中的基本思想是为CSS增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”

常用的 CSS 预处理器有哪些

SASS:基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高

LESS:基于 NodeJS，通过客户端处理，使用简单。功能比SASS 简单，解析效率也低于SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用 LESS。

https://less.bootcss.com/

css主要用来表现美化网页

**字体，颜色，边距，高度，宽度，背景颜色，网页定位，浮动，dispaly布局等等**
**使用css样式的一个好处是通过定义某个样式，可以让不同的网页位置的字体有着统一的字体，字号或者颜色等**

发展史

css1.0 就是直接在html代码里面写

css2.0 div（块）＋css ，html与css分离，网页变得简单

css2.1添加了浮动和定位

css3.1添加了圆角，阴影，动画，和浏览器兼容问题

快速开始

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<!--规范,<style> 可以编写css代码每一个声明,最好以分号(;)结尾-->

<!--语法:-->

<!--    选择器{声明1;声明2;声明3;}-->

<style>

h1 {

    color: blue;

}

</style>

</head>

    <body>

    <h1>这是一个标题</h1>

    </body>

</html>

css样式的优势：
1. 内容和变现分离
2. 网页结构表现统一，可以实现复用
3. 样式十分丰富
4. 建议使用独立于html的css文件
5. 利用SEO,容易被搜索引擎收录

二、css怎么用三种引入方式

行内样式

内联式css样式，直接写在现有的html标签中

<p style="background-color:red">行内式</p>

内部样式

嵌入式css样式，写在当前的文件中

<html>

<head>

    <style>

        div {

        background-color:red;

        }

        div p {

        background-color:green;

        }

    </style>

</head>

<body>

    <div>sdfasdfasdfsdf

   		 <p>asdfasfasdf</p>

    </div>

</body>

</html>

外部样式

外部式css样式，写在单独的一个文件中，使用link引入

<link href="test.css" type="text/css" rel="stylesheet"></link>

导入式（一般不用）

引入外部标签的方式导入式css2.0中的

网速或者网站大的话就先出骨架再出页面效果

<head>

    <style type="text/css">

    	@import "test.css"

    </style>

</head>

注意：

推荐使用外链式，简洁明了。
外链式中的rel="stylesheet"不能省略，type="text/css"可以省略。
@import引入文件时，有数量限制，而link没有。
导入式会在整个网页加载完成后再加载CSS文件，因此如果文件非常大的话，网页会有闪烁的情况出现。外链式一开始网页就会加载，所以不会有闪烁出现。

三、css选择器

基本选择器

标签选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>标签选择器</title>

    <style>

        /*标签选择器,会选择页面上所有的这个标签的元素*/

        h1{

            font-size: 1.5vw;

            color: #936245;

            background: #3cdda6;   /*背景*/

            border-radius: 100px;   /*圆角*/

        }

        p{

            fond-size:1.6vw;

            color: blue;

        }

    </style>

</head>

<body>

<h1>JAVA</h1>

<h1>SSM</h1>

<h1>Servlet</h1>

<p>这里是段落标签</p>

</body>

</html>

id选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<style>

    /*

    id选择器   :id保证全局唯一

    #id的名称{}

    不遵循就近原则,固定顺序

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

    */

    #Waves{

        color: #247860;

    }

    .tao{

        color: blueviolet;

    }

    h1{

        color: black;

    }

</style>

</head>

<body>

<h1 id="Waves">标题一</h1>

<h1 class="tao">标题二</h1>

<h1 class="tao">标题三</h1>

<h1 class="tao">标题四</h1>

<h1>标题五</h1>

</body>

</html>

类选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>2.类选择器</title>

<style>

    /*类选择器的格式  .class的名称{}

    优势,可以多个标签归类,是同一个class(就是class的名称相同)

    */

    .Waves{

        color: #1d1f9e;

        font-size: 1.5vw;

    }

    .tao{

        color: aquamarine;

    }

</style>

</head>

<body>

<span class="Waves">不努力你什么都没有</span>

<br/>

<span class="tao">努力,屏幕前的你</span>

<br/>

<span class="Waves">加油,屏幕前的你</span>

<br/>

<span>牛啊牛啊</span>

</body>

</html>

优先级比较：id>class>标签

高级选择器

层次选择器

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

 /*后代选择器 body标签后面的都包括,可以是多代*/

        body p{

           background: red;

        }

子选择器

/*子选择器*/

        body>p{

            background: #1d1f9e;

        }

相邻兄弟选择器：相邻小弟选择器

 /*  相邻选择器:只有一个相邻(对下不对上,只对该标签的下面的标签生效)*/

        .active + p{

            background: #936245;

        }

通用选择器下面的所有这个标签

  /*  通用选择器 不包含当前标签，向下的所有p标签生效 */

        .active~p{

            background: beige;

        }

所有代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*

        p{

        background:#02ff00;

        }

        */

        /*后代选择器 body标签后面的都包括,可以是多代*/

     /*   body p{

           background: red;

        }*/

        /*子选择器*/

     /*   body>p{

            background: #1d1f9e;

        }*/

    /*  相邻选择器:只有一个相邻(对下不对上,只对该标签的下面的标签生效)*/

   /*     .active + p{

            background: #936245;

        }*/

    /*  通用选择器  */

        .active~p{

            background: beige;

        }

    </style>

</head>

<body>

<p>p1</p>

<p class="active">p2</p>

<p>p3</p>

<p>p9</p>

<ul>

    <li>

        <p>p4</p>

    </li>

    <li>

        <p>p5</p>

    </li>

    <li>

        <p>p6</p>

    </li>

</ul>

<p class="active">p7</p>

<p>p8</p>

</body>

</html>

结构伪类选择器

伪类：条件

不是重点知道就可以了对于后端程序员

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<!--不使用 class id选择器 -->

    <style>

        /*ul的第一个子元素*/

        ul li:first-child{

            background: cornflowerblue;

        }

        /*ul的最后一个子元素*/

        ul li:last-child{

            background: aqua;

        }

        /*选中p1:定位到父元素,选择当前的第一个元素

        选择当前p元素的父元素,选中父元素的第一个,并且元素是当前类型的元素才生效

        例: p1 生效    如果是h1  就不生效

        */

        p:nth-child(3){

            background: blueviolet;

        }

        /*选中父元素,下的p元素的第二个,类型p*/

        p:nth-of-type(3){

            background: red;

        }

        /*鼠标移动到654321上面会显示底色*/

        a:hover{

            background: blue;

        }

    </style>

</head>

<body>

    <a href="">654321</a>

    <p>p1</p>

    <p>p2</p>

    <p>p3</p>

    <ul>

        <li>li1</li>

        <li>li2</li>

        <li>li3</li>

    </ul>

</body>

</html>

属性选择器

id+class结合

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .demo a{

            float: left;

            display: block;

            height: 50px;

            width: 45px;

            border-radius: 10px;

            background: #1d1f9e;

            text-align: center;

            color: #17dc0a;

            text-decoration: none;

            font: bold 20px/50px "Arial Narrow";

        }

        /*属性名 属性名 = 属性值（正则）

        =绝对等于

        *= 包含这个

        ^= 以这个开头

        $+ 以这个结尾

        */

        /*存在id属性的元素    a[]{}*/

      /*  a[id]{

            background:darkslategray;

        }*/

        /*id为first2的元素*/

      /*  a[id=first2]{

            background: #17dc0a;

        }*/

        /*class中带有links的元素*/

      /*  a[class*="links"]{

            background: #3cdda6;

        }*/

        /*选中href中以http开头的元素*/

       /* a[href^=http]{

            background: #3cdda6;

        }*/

        /*以pdf结尾的*/

        a[href$=pdf]{

            background: #fa82c3;

        }

    </style>

</head>

<body>

<p class="demo">

    <a href="https://www.baidu.com" class="links item first" id="first">1</a>

    <a href="" class="links item active" target="_blank" title="test" id="first2">2</a>

    <a href="doc/asas.jpg" class="links item ">3</a>

    <a href="doc/sadapng.png" class="links item ">4</a>

    <a href="asd" class="links item ">5</a>

    <a href="index.html" class="links item ">6</a>

    <a href="/a.pdf" class="links item ">7</a>

    <a href="/ff.doc" class="links item "> 8</a>

    <a href="doc/sss.doc" class="links item " >9</a>

    <a href="adsda.java" class="links item last">10</a>

</p>

</body>

</html>

四、美化网页

字体

fond-family: 控制字体的例如:楷体.微软雅黑

fond-size:50px: 字体大小

font-weight: bold: 字体粗细

color:字体颜色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            font-family: "Arial Narrow",楷体;

            color: #936245;

        }

        h1{

            fond-size:50px;

            font-weight: bold;

            color: #1d1f9e;

        }

        header{

            background: #936245;

        }

    </style>

</head>

<body>

<h1>变形金刚</h1>

<h2>美国</h2>

<p>

《变形金刚》是美国科幻动作系列电影，改编自起源于20世纪80年代的变形金刚品牌系列。该电影系列由派拉蒙影业公司和梦工厂发行。

</p>

<p>

迈克尔·贝执导了前五部 [1]  ：《变形金刚》（2007）、《变形金刚2》（2009）、《变形金刚3》（2011）、《变形金刚4：绝迹重生》（2014）、《变形金刚5：最后的骑士》（2017）。2018年12月21日，由特拉维斯·奈特执导的衍生电影《大黄蜂》上映。

</p>

<p>

该系列排名系列电影影史总票房第13名，总收入为48亿美元，其中第3、4部票房均超过10亿美元 [2-3]  。

</p>

<p>i love you ,welcome to , go out  </p>

</body>

</html>

文本样式

font: oblique lighter 20px "楷体";

斜体细体大小字体

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--字体风格-->

    <style>

        p{

            font: oblique lighter 20px "楷体";

        }

    </style>

</head>

<body>

<p>

    《变形金刚》是美国科幻动作系列电影，改编自起源于20世纪80年代的变形金刚品牌系列。该电影系列由派拉蒙影业公司和梦工厂发行。

</p>

</body>

</html>

超链接伪类

a:link{color:#FF0000} 未访问的链接颜色（状态）

a:visited{color:#00FF00} /已访问的链接/

a:hover{color:#FF00FF} /当鼠标悬停在链接上/ 常用

a:active{color:#0000FF} /被选择的链接/

/*字体默认颜色*/

a{

    text-decoration: none; /*去除字体下划线*/

    color: #000000;

}

/*鼠标放上去的状态*/

a:hover{

    color: blueviolet;

}

/*鼠标按住未松开的状态*/

a:active{

    color: red;

}

阴影

h-shadow 必需。水平阴影的位置。允许负值阴影颜色

v-shadow 必需。垂直阴影的位置。允许负值水平偏移

blur 可选。模糊的距离垂直偏移

color 可选。阴影的颜色。阴影半径

#price{text-shadow:h-shadow v-shadow blur color;

}

列表

#nav{

    width: 300px;

    height: 243px;

    background: orangered;

}

#navs{

    font-weight: bold;

    width:300px;

    height: 300px;

    background: #1d1f9e;

}

.title{

    font-size: 20px;    /*字体大小*/

    font-weight: bold;  /*字体粗细*/

    text-indent: 1em;   /*首行缩进*/

    line-height: 35px;  /*字体高度*/

     /* rebeccapurple颜色  url图片  270px 10px图片位置  no-repeat平铺方式 */

    background: rebeccapurple url("../images/xia.gif") 270px 10px no-repeat ;

    margin-top: auto;

}

/*ul  li*/

/*

list-style:

    none     不要样式

    circle   空心圆

    decimal  数字

    square   正方形

*/

ul li{

    height: 30px;

    list-style: none;

    text-indent: 1em;

    /*图片*/

    background-image: url("../images/zuo.gif");

    /*平铺方式*/

    background-repeat: no-repeat;

    /*调整图片位置*/

    background-position: 236px 2px;

}

/* text-decoration: none; 去除样式*/

a{

    text-decoration: none;

    font-size: 15px;

    color: #000;

}

/*  text-decoration: underline; 字体下添加下划线样式*/

a:hover{

    color: #17dc0a;

    text-decoration: underline;

}

背景

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!-- border:  1px solid red;  宽度  实线 边框线的颜色-->

    <style>

        div{

            width: 1000px;

            height: 600px;

            border:  1px solid red;

            background-image: url("images/a1.jpg");

            /*默认是把这个空间全部用图片平铺铺满*/

        }

        .div3{

            background-repeat:repeat-x ; /*水平平铺*/

        }

        .div2{

            background-repeat:repeat-y ; /*垂直平铺*/

        }

        .div4{

            background-repeat:no-repeat ; /*不平铺，只有一张*/

        }

    </style>

</head>

<body>

<div class="div1"></div>

<div class="div2"></div>

<div class="div3"></div>

<div class="div4"></div>

</body>

</html>

<img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716183210068.png" alt="image-20250716183210068" style="zoom:33%;margin-left:10px" />
### 渐变
[网站](https://grabient.com/)
## 五、盒子模型
### 什么是盒子
<img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716183649992.png" alt="image-20250716183649992" style="zoom:33%; margin-left:10px" />
margin：外边距
padding：内边距
border ：边框
### 边框
边框粗细
边框的样式
边框的颜色
<img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716183916843.png" alt="image-20250716183916843" style="zoom:33%;margin-left:20px" />
<img src="https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716184018109.png" alt="image-20250716184018109" style="zoom: 50%; margin-left: 10px;" />
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>

    /*body自己总有一个默认的外边距margin：0  常见操作，进行去除*/

    h1,ul,li,a,body{

        margin: 0;

        padding: 0;

        text-decoration: none;

    }

    /*border:粗细，样式，颜色*/

    #box{

        width: 300px;

        border: 1px solid red;

    }

    h2{

        font-size: 18px;

        background: #FF0000;

        line-height: 30px;

        margin: 0;

    }

    form{

        background: #3cdda6;

    }

    div:nth-of-type(1) input{

        border: 2px solid #1d1f9e;

    }

    div:nth-of-type(2) input{

         border: 2px dashed #FF0000;

     }

</style>

会员登录

用户名：

密码：

```
### 内外边距
顺时针旋转，上右下左
margin:0 上右下左外边距都为0
margin: 0 1px 上下为0 左右为一
margin: 0 2px 1px; 上为0 左右为2 下为1
margin: 0 1px 2px 3px
内边距同理

计算盒子有多大box-size

margin+border+padding+内容宽度

圆角边框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <STYLE>

        /*

        左上 右上  右下 左下，顺时针方向

        圆圈： 圆角 = 半径！

        */

        div{

            width: 100px;

            height: 100px;

            border: 10px solid red;

            border-radius:100px ;

        }

    </STYLE>

</head>

<body>

<div>~</div>

</body>

</html>

同理可以画出半圆和扇形等图

阴影

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            width: 100px;

            height: 50px;

            border: 10px solid red;

            box-shadow: 10px 10px 15px yellowgreen;

        }

        img{

            margin: 0 auto;

            border-radius: 100px;

            box-shadow: 10px 10px 15px #665f5f;

        }

        #waves{

            height: 50px;

            border: 10px solid red;

            box-shadow: 10px 10px 15px yellowgreen;

        }

    </style>

</head>

<body>

<div></div>

<br/>

<img src="data:images/psc.jpg" alt="">

<br/>

<div id="waves" style="width: 1080px;display: block;text-align: center">

<img src="data:images/psc.jpg" alt="">

</div>

</body>

</html>

六、浮动

网页布局

行内元素可以包含在块级元素里面
但是块级元素不能报在行里面
### display布局（重点需要重复练习）
+ block：块级元素，换行显示，可设置宽高。
+ inline：行内元素，不换行，宽高由内容决定。
+ inline-block：行内块元素，不换行，但可设置宽高。
+ flex：弹性布局容器。
+ grid：网格布局容器。
+ none：隐藏元素（不占据空间）。
### 浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动可以理解成ps的图层

### 清除浮动**父元素塌陷**
塌陷解决方案
1. 增加父级元素的高度固定（不建议）
2. 增加一个新div在下面
3. 在父级元素中添加一个overflow：hidden属性
4. 父类添加一个伪类，标准解法也差不多是添加一个div意思但是没有加代码

## 七、定位
### 相对定位
position：relative；
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

### 绝对定位
position：absolute；
设置为绝对定位的元素框会从文档流完全删除，并相对于其父级元素定位，父级元素可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位使元素的位置与文档流无关（类似float的效果），因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：
1. 没有父元素定位的前提
![image-20250716191657006](https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716191657006.png)
2. 有父元素定位的前提
![image-20250716191707542](https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716191707542.png)
### 固定定位
position：fixed
看与绝对定位的比较移动浏览器固定定位就不会动比如搜索栏之类的返回顶部的
![image-20250716191846201](https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716191846201.png)
移动之后主要是看他两位置
![image-20250716192000704](https://gitee.com/wwwzhangxusen/typora---graph-bed/raw/master//images/image-20250716192000704.png)
### z-index
图层的概念

### opcity
opacity：透明度

### 总结
相对定位是“相对于”元素在文档中的初始位置，元素原来的空间还会占用；
而绝对定位是“相对于”最近的已定位父级元素，如果不存在已定位的父级元素，那么“相对于”最初的包含块，且绝对定位类似float，元素不存在原来空间一说。
fixed经常用于网站的顶部固定。
提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。