CSS基础知识

最新推荐文章于 2024-02-23 11:19:04 发布

皮卡丘#￥%3￥&

最新推荐文章于 2024-02-23 11:19:04 发布

阅读量551

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_47280394/article/details/126979559

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

主要是跟着pink老师上课做的笔记。

一、基础选择器

1.1标签选择器

<style>
       /* 选择器{样式} */
       /* 给谁修改样式{修改什么要素} */
       p {
           color: red;
           /* 文字大小，一定要加px */
           font-size: 100px;
       }
    </style>

选择这个标签的所有的语句

1.2 类选择器（重点）

<style>
        .red {
            color: red;
        }
</style>


<body>
    <ul>
        <li class="red">快乐</li>
        <li>开心</li>
        <li class="red">幸福</li>
        <li>激动</li>
    </ul>
</body>

样式点定义，结构类调用，一个或多个，开发最常用
定义不能用已经有的标签
不要使用纯数字或者中文进行命名，尽量使用英文单词或者拼音
如果命名过长，可以使用-进行命名，eg：star-sing

1.3 类选择器特殊应用-多类名

<style>
        .box {
            width: 100px;
            height: 100px;
        }
        .pink {
            background-color :pink ;
        }
        .gray {
            background-color :gray ;
        }
    </style>


<body>
    <div class="pink box"></div>
    <div class="gray box"></div>
    <div class="pink box"></div>
</body>

在标签 class 属性中写多个类名
多个类名中间必须用空格分开
这个标签就可以分别具有这些类名的样式
多类名开发中使用场景：
1. 可以把一些标签元素相同的样式(公共的部分)放到一个类里面
2. 这些标签都可以调用这个公共的类，然后再调用自己独有的类
3. 从而节省CSS代码，统一修改也方便

1.4 id类选择器

<style>
        #pink {
            color: pink;
        }
</style>


<body>
    <div id="pink">迈克尔杰克逊</div>
</body>

id选择器：样式#定义，结构id调用，只能调用一次，别人切勿使用

1.5 通配符选择器

<style>
        * {
            color: pink;
        }
</style>

通配符选择器是将页面中的html body li div 等等都改变样式
一般是用于清楚元素标签的内外边距

1.6 基础选择器总结

在这里插入图片描述

二、字体属性

2.1font-family 字体是什么

 h2 {
          font-family: 'Microsoft Yahe',Arial;
    }

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
最常见的几个字体： “Microsoft Yahe”,tahoma,arial,“Hiragino Sans GB”

2.2 font-size字体大小

body {
             font-size: 25px;
     }

标题比较特殊，需要单独指定
谷歌浏览器默认的文字大小为 16px

2.3 font-weight字体粗细

h2 {
             font-weight: 400;
 }

bold和700等价，更推荐使用数字
normal和400等价，更推荐使用数字

2.4 font-style字体倾斜

em {
             font-style: normal;
             /* 让倾斜的字体不倾斜 */
}

平时我们很少给文字加斜体，反而要给斜体标签( em , i )改为不倾斜字体

2.5 字体属性的复合写法

div {
             font: italic 700 16px 'Microsoft yahei';
}
         /* 想要div 文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */

顺序：文字样式文字粗细文字大小文字字体
使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略(取默认值)，但必须保留font-size 和font-family属性，否则 font 属性将不起作用

2.6 字体属性总结

在这里插入图片描述

三、文本属性

3.1 color颜色

div {
            /* color: pink; */
            /* color: #ffff03; */
            color: rgb(44, 214, 206);
 }

3.2 text-align水平对齐方式

 h1 {
            text-align: center;
}

本质是让盒子里面的文字居中对齐，而不是盒子居中

3.3 text-decoration文本装饰

给文本添加下划线，删除线，上划线等
重点记住如何添加下划线，如何删除下划线，其余了解即可。

添加下划线：

div {
            text-decoration: underline;
        }

去掉下划线：

div {
            text-decoration: none;
        }

3.4 text-indent 段落首行缩进

 p {
            /* text-indent: 20px; */
            text-indent: 2em;
        }

通过设置该水属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
em是一个相对单位，就是当前元素(font-size)1个文字的大小

3.5 line-height 行间距

p {
            line-height: 25px;
        }

行间距包括上间距、文本高度、下间距

四、CSS引入方式

4.1 内部样式表

上面的那种方法就是内部样式表

4.2 行内样式表

<em style="color: pink;">粉红色</em>

4.3 外部样式表（推荐使用）

先创建一个.css文件：
这个css文件里面没有标签，只有样式

em {
    color: pink;
}

在html文件中的head中再用link引用.css文件：

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

五、Emmet语法

5.1. 快速生成HTML标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DE5hzz0C-1663761135322)(C:\Users\ZHAOZI~1\AppData\Local\Temp\WeChat Files\aae2514bc1b7f68e4d22e6ae0ac9042.jpg)]

5.2. 快速生成CSS标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XvN5LUdT-1663761135325)(C:\Users\ZHAOZI~1\AppData\Local\Temp\WeChat Files\3a3ceb398653ced8208b5b64a173de0.jpg)]

六、CSS复合选择器

6.1 后代选择器 (重要)

ol li {
            color: pink;
        }
 ul li a {
            color: yellow;
        }

可以选择父元素里面的子元素
元素1 和元素2 中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
两个相同的标签里的东西有一个需要修改时，添加类

.two li {
            color: red;
        }
        
    <ul>
        <li>ul1的后代</li>
        <li>ul1的后代</li>
        <li><a href="#">黄色</a></li>
    </ul>
    <ul class="two">
        <li>ul2的后代</li>
        <li>ul2的后代</li>
    <li>ul2的后代</li>

6.2 子元素选择器

div>a {
            color: red;
        }

子元素选择器只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素，不能选中孙子元素
元素1 和元素2 中间用大于号隔开
元素2必须是亲儿子，其孙子、重孙之类都不归他管

6.3 并集选择器（重要）

div,
p,
ol li {
            color: red;
        }

并集选择器可以选择多组标签，同时为它们定义相同的样式
并集选择器是各选择器通过英文逗号连接而成,可以理解为和的意思
任何形式的选择器都可以作为并集选择器的一部分

6.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
伪类选择器书写最大的特点是用冒号

6.4.1链接伪类选择器（重点）

1.未访问过的链接 a:link 把没有点击过的链接选出来

a:link {
            color: #333;
            text-decoration: none;
       }

2.a:visited 把已经点击过的链接选出来

a:visited {
            color: orchid;
        }

3.a:hover 选择鼠标经过的那个链接

a:hover {
            color: powderblue;
        }

4.a:active 鼠标按下还没松开鼠标的那个链接

a:active {
            color: green;
        }

顺序不能改变，必须是LVHA这个顺序

6.4.2 focus伪类选择器

input:focus {
            background-color: greenyellow;
            color: red;
        }

:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说

七、CSS元素显示模式

在这里插入图片描述

7.1 转换成块元素display: block

a {
            width: 230px;
            height: 50px;
            background-color: rgb(83, 78, 83);
            color: white;
            text-decoration: none;
            text-indent: 2em;
            line-height: 50px;
            display: block;
        }

7.2 转换为行元素display: inline

div {
            display: inline;
        }

7.3 转换为行内块元素display:inline-block

 span {
            width: 100px;
            height: 100px;
            background-color: turquoise;
            display:inline-block;
        }

八、CSS背景

8.1 背景颜色

background-color:red

background-color: transparent;

8.2 背景图片

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

背景图片后面的地址，千万不要忘记加URL，同时里面的路径不要加引号

8.3 背景平铺

background-repeat: no-repeat;

8.4 背景位置（重点）

background-position: x y;

参数：X坐标 Y坐标
可以使用方位名词或者精确单位，也可以两者混用
方位名词

background-position: bottom right;

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
精确坐标

background-position: 20px 50px;

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

8.5 背景固定

background-attachment : scroll | fixed

8.6 背景属性复合写法

background : transparent url(image.jpg) repeat-y fixed top;

顺序没有要求，但一般来说，背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

8.7 背景颜色半透明

background-color: rgba(0, 0, 0, 0.5);

最后的参数为透明的度
背景半透明是指盒子背景半透明，盒子里面的内容不受影响

九、盒子模型

盒子的构成：边框，内容，内边距，外边距

9.1 边框

边框粗细

 border-width: 5px;

边框样式，solid实线；dashed虚线；dotted点线

border-style: solid;
border-style: dashed;  
border-style: dotted;

边框颜色

 border-color: rgb(154, 143, 165);

边框复合写法

border : 1px dashed red;

边框的四条边可以分别设定

border-top : 5px solid skyblue;

表格的细线边框，表示边框的合并

 border-collapse: collapse;

边框会额外增加盒子的实际大小，因此我们有两种方案解决：
1. 测量盒子大小的时候，不量边框
2. 如果测量的时候包含了边框，则需要 width/height 减去边框宽度

9.2 内边距padding

padding-left: 5px; 
padding-top: 10px;

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

9.3 外边距margin

margin: 20px auto;

margin 简写方式代表的意义跟 padding 完全一致
外边距可以让块级盒子水平居中，但是必须满足两个条件
1. 盒子必须制定了宽度(width)
2. 盒子左右的外边距都设置为 auto
3. 以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可。
嵌套块元素垂直外边距的塌陷

解决方案：
1. 可以为父元素定义上边框
2. 可以为父元素定义上内边距
3. 可以为父元素添加 overflow: hidden

overflow: hidden;

9.4 圆角边框

圆形的设置方法

.yuanxing {
            width: 100px;
            height: 100px;
            background-color: tomato;
            /* 半径设置为长宽的一半 */
            /* border-radius: 50px; */
            /* 半径设置成50% */
            border-radius: 50%;
        }

圆角矩形的设置方法

 .yuanjiaojuxing {
            width: 200px;
            height: 100px;
            background-color: tomato;
            /* 半径设置成宽的一半 */
            border-radius: 50px;
        }

9.5 盒子阴影

.nav:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
        }

十、浮动

CSS 提供了三种传统布局方式：

普通流（标准流）
浮动
定位

10.1 浮动

选择器 {
    float: 属性值;
}

浮动最典型的应用：可以让多个块级元素一行内排列显示
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
网页布局第二准则：先设置盒子大小，之后设置盒子的位置。
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

10.2 浮动特性

脱标：浮动元素会脱离标准流
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
浮动元素会具有行内块元素特性

10.3 浮动元素搭配标准流父盒子

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

10.4 清除浮动

额外标签法

<style>
	.clear {
            clear: both;
        } 
</style>

<body>
	<div class="clear"></div>
</body>

要求这个新的空标签必须是块级元素
实际工作可能会遇到,但是不常用

父级添加 overflow 属性
```
 overflow: hidden;
```
- 代码简洁，但无法显示溢出的部分
父级添加 after 伪元素

<style>
	.clearfix:after {
            content: "";
            display: block;
            height: 0; 
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            *zoom : 1; 
             /* IE6,7专有*/
        } 
</style>

<body>
	<div class="box clearfix"></div>
</body>

父级添加双伪元素

<style>
	.clearfix:before,.clearfix:after{
            content:"";
            display:table;
        }
        .clearfix:after {
            clear:both;
        }
        .clearfix {
            *zoom:1;
            }
</style>

<body>
	<div class="clear"></div>
</body>

十一、定位

11.1 定位

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位 = 定位模式 +边偏移
定位模式用于指定一个元素在文档中的定位方式
边偏移则决定了该元素的最终位置

11.2 静态定位static (了解)

静态定位是元素的默认定位方式，无定位的意思
静态定位按照标准流特性摆放位置，它没有边偏移

11.3 相对定位relative （重点）

position: relative;
top: 50px;
left: 100px;

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
特点：
- 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待。（不脱标，继续保留原来位置）
- 因此，相对定位并没有脱标，它最典型的应用是给绝对定位当爹的

11.4 绝对定位absolute（重点）

position: absolute;
top: 50px;
left: 100px;

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的
特点：
- 如果没有祖先元素，或者祖先元素没定位，则以浏览器为准进行定位(Document 文档)
- 如果祖先元素父级有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不再占用原先的位置（脱标）
小技巧（绝对定位盒子水平居中）
- left:50% ；让盒子的左侧移动到父级元素的水平中心位置
- margin-left: -100px; 让盒子向左移动自身宽度的一半

.box {
    position: absolute;
    /* 1.left走50%，父容器宽度的一半 */
    left: 50%;
    /* 2.margin 负值往左边走 自己盒子宽度的一半 */
    margin-left: -xx;
}

11.5 子绝父相

子级使用绝对定位，父级则需要相对定位
因为父级需要占有位置，因此是相对定位，子盒子不要占有位置，则是绝对定位

11.6 固定定位fixed（重点）

.dj {
            position: fixed;
            top: 100px;
            left: 40px;
        }

固定定位是元素固定于浏览器的可视区的位置
主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
特点
- 以浏览器的可视窗口为参照点移动元素
  - 跟父元素没有任何关系
  - 不随滚动条滚动
  - 固定定位不再占有原先的位置(脱标)
小技巧（固定在版心右侧位置）
- 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。
- 让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置

11.7 粘性定位sticky（了解）

特点：
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位的特点）
- 必须添加top，left，right，bottom其中一个才有效

选择器 {
    position:sticky;  
	top: 10px;
}

11.8 定位叠放次序z-index

选择器 {
    z-index: 1; 
}

数值可以是正整数，负整数或者0，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性

十二、显示与隐藏

12.1 display（重点）

display: none;  /*隐藏对象*/

display: block; /*除了转换为块级元素之外，同时还有显示元素的意思*/

display隐藏元素后，不再占有原来的位置

12.2 visibility

visibility: visible; /*元素可视*/

visibility: hidden;  /*元素隐藏*/

visibility 隐藏元素后，继续占有原来的位置
区分：
- 如果隐藏元素想要原来位置，就用 visibility：hidden
- 如果隐藏元素不想要原来位置，就用 display：none (用处更多重点）

12.3 overflow溢出显示隐藏

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用 overflow:hidden 因为它会隐藏多余的部分。

-CSS高级技巧

一、精灵图

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

background: url(images/sprites.png);
 background-position: -182px 0;

要点
- 移动背景图片的位置，此时可以使用 background-position
- 移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同（x轴右边走是正值，左边走是负值，y轴下边走是正值，上边走是负值）
- 一般情况下都是往上往左移动，所以数值是负值
- 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

二、字体图标iconfont

使用场景：主要用于显示网页中通用、常用的一些小图标。展示的是图标，本质属于字体
字体图标与精灵图：
- 如果遇到一些结构和样式比较简单的小图标，就用字体图标
- 如果遇到一些结构和样式复杂一点的小图片，就用精灵图
具体方法见：
[https://blog.csdn.net/Augenstern_QXL/article/details/119172527]:

<style>
        /* 字体声明 */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?7kkyc2');
            src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
            url('fonts/icomoon.woff?7kkyc2') format('woff'),
            url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        
        span {
            font-family: 'icomoon';
            font-size: 20px;
            color: brown;
        }
</style>
    
    
<body>
    <span></span>
</body>

三、CSS三角

.box {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top-color: tomato;
            margin: 100px auto;
        }

四、CSS用户界面样式

4.1 鼠标样式cursor

li {
    cursor: pointer; 
}

4.2 轮廓线outline

给表单添加 outline:0; 或者outline: none;样式后，就可以去掉默认的蓝色边框

input {
    outline: none;
}

4.3 防止拖拽文本域

textarea {
    resize: none;
}

五、vertical-a

5.1 使用场景

使用场景：经常用于设置图片或者**表单（行内块元素）*和*文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效

中线对齐

div img {
            /* 中线对齐 */
            vertical-align: middle; 
}

textarea {
            vertical-align: middle;
        }

顶线对齐

div img {
            /* 顶线对齐 */
            vertical-align: top;            
 }

底线对齐

div img {            
            /* 底线对齐 */
            vertical-align: bottom;            
        }

基线对齐（默认）

div img {          
            /* 基线对齐（默认） */
            vertical-align: baseline;
        }

5.2 图片底侧空白缝隙解决

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐（给图片加边框就可以看见）
解决办法
- 给图片添加 vertical-align : middle | top |bottom 等
- 把图片转换为块级元素 display:block;，因为块级元素不会有vertical-align 属性

六、溢出文字省略显示

6.1 单行文字溢出省略号显示

/* 1.先强制一行内显示文本  */
  white-space: nowrap;
/* 2.超出的部分隐藏 */
  overflow: hidden;
/* 3.文字用省略号替代超出的部分 */
  text-overflow: ellipsis;

6.2 多行文字溢出省略号显示（了解）

	overflow: hidden;
	text-overflow: ellopsis;
/* 弹性伸缩盒子模型显示 */
	display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
	-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
	-webkit-box-orient : vertical;

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

七、常见布局技巧

7.1 margin负值的运用

让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框

margin-left: -1px;

鼠标经过某个盒子的时候，提高当前盒子的层级即可

如果没有定位，则加相对定位(保留位置)

li:hover {
        border-color: yellow;
        position: relative;
    }

如果有定位，则加 z-index

li:hover {
        border-color: yellow;
        z-index: 1;
    }

7.2 文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性

.box .pic {
            float: left;
            width: 150px;
            height: 100px;
 }

7.3 行内块巧妙运用

页码在页面中间显示：
1. 把这些链接盒子转换为行内块，之后给父级指定 text-align: center
2. 利用行内块元素中间有缝隙，并且给父级添加 text-align: center ，行内块元素会水平居中

7.4 CSS三角巧妙运用–直角三角

.box {
            width: 0;
            height: 0;
            /* 1.上边框变大,变透明 */
            border-top: 100px solid transparent;
            border-right: 50px solid blue; 
            /* 2.下边框，左边框变成0 */
            border-bottom: 0px solid green;
            border-left: 0px solid red; 
       }

简便写法

.box {
            width: 0;
            height: 0;
            /* 1.只保留右面的颜色 */
            border-color: transparent red transparent transparent;
            /* 2.样式都是solid */
            border-style: solid;
            /* 3.上大，右小，其余0 */
            border-width: 100px 50px 0 0; 
       }