CSS学习

最新推荐文章于 2024-05-30 08:41:06 发布

5721487

最新推荐文章于 2024-05-30 08:41:06 发布

阅读量803

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/weixin_51482436/article/details/125764876

版权

CSS是层叠样式表的简称，也是一种标记语言，可以美化HTML，使网页布局更简单。CSS最大价值在于由HTML专注的去做结构，样式交给CSS，即结构与样式相分离。CSS规则由两个主要部分组成：选择器以及一条或多条声明——给谁改样式 {改什么样的样式}，属性和属性值以键值对的形式出现，属性是对指定的对象设置的样式属性，例如字体大小，文本颜色的属性和属性值之间用英文的冒号分开，每一组键值对用分号结尾。在书写时用展开的代码风格书写代码，在开发时用小写的字母书写代码，在每个属性值的前面，冒号的后面打一个空格，在选择器和大括号之间打一个空格。

选择器就是根据不同的需求把不同的标签选择出来，简单来说就是选择标签用的。

选择器分为基础选择器和符合选择器两个大类，我们这里先讲解一下基础选择器，基础选择器是由单个选择器组成的，基础选择器包括标签选择器，类选择器，ID选择器和通配符选择器

1.基础选择器

1.1标签选择器

标签名 {

属性1：属性值；

属性2：属性值；

属性3：属性值 }

标签选择器是指用HTML标签名称作为选择器，按标签名分分类为页面中某一类标签指定统一的css样式标签选择器，可以把某一类标签全部选择出来，不能差异化设置，只能设置全部的标签。

1.2类选择器

如果想要差异化选择不同的标签，单独选择一个或者几个标签，可以使用类选择器

样式点定义，结构类调用，一个或多个，开发最常用

类名是自己定义的，但不能用标签的名字作为类名，长的名词作为类名可以用短横线-分割，尽量不要使用长数字或中文来命名，要用英文来命名

画盒子

多类名的使用：在标签class属性中写多个类名，多个类名中间必须用空格分开

1.3ID选择器

ID选择器可以为标有特定ID的HTML元素指定特定的样式。HTML元素以ID属性来设置ID选择器，css中ID选择器以“#”来定义。样式#定义，结构ID调用，只能调用一次，别人切勿使用（一次性）

#id名 {

属性1: 属性值1;

属性2: 属性值2;

}

1.4通配符选择器

在CSS中，通配符选择器用*定义，它表示选取页面中的所有元素（标签），通配符选择器不需要调用，自动就给所以的元素使用样式

属性1: 属性值1;

}

2.CSS字体属性

字体系列

body {font-family: Arial,"Microsoft YaHei","微软雅黑";}

执行时依次查找，各种字体之间必须使用英语状态下的逗号隔开，一般情况下如果有空格隔开的多个单词组成的字体加引号，单引号、双引号都可以，尽量使用系统默认自带字体，保证在任何用户的浏览器中都正确显示

字体大小

p {font-size: 16px;}

px像素大小是我们网页的最常用的单位，谷歌浏览器默认的文字大小为16px，不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值，不要默认大小，可以给body指定整个页面文字的大小，但这个时候标题标签比较特殊，需要单独指定文字大小。

字体粗细

font-weight: bold;或font-weight: 700;

实际开发中我们更提倡用数字表示加粗或变细（normal400，bold700）

字体样式

font-style: nornal/italic(倾斜)

字体复合属性

/*必须按照font:font-style font-weight font-size/line-height font-family的顺序来写*/

不需要设置的属性可以省略，但必须保留font-size和font-family属性值，否则font属性不起作用

li {

font: italic 700 30px "Microsoft yahei";

}

3.CSS文本属性

文本颜色color

三种表现颜色的方式，开发中最常用十六进制

对齐文本text-align

只能设置水平对齐方式，默认为左对齐（text-align: left）

居中对齐（text-align: center），右对齐（text-align: right）

想要图片居中对齐要给它的父标签<p></p>标签加text-align，给图片加是居中对齐不了的

单行文字垂直居中：让文字的行高等于盒子的高度

装饰文本text-decoration

none 默认，没有装饰线（常用，取消a默认的下划线）

underline 下划线

overline 上划线

line-through 删除线

文本缩进text-indent

用来指定文本的第一行的缩进，em就是当前文字一个大小，如果此时写了2em，则是缩进两个文字大小的距离，如果此时文字没有设置大小，则会按照父元素的一个文字大小

p {

text-indent: 20px;

}

行间距line-height

用来指定文本

p {

line-height: 16px;

}

4.CSS引入方式

按照css样式书写的位置或者引入的方式，css样式表可以分为三大类

1.行内样式表（行内式）

2.内部样式表（嵌入式）

3.外部样式表（链接式）

4.1内部样式表

4.2行内样式表

4.3外部样式表

5.复合选择器

在CSS中可以根据选择器的类型把选择器分为基础选择器和复合选择器。复合选择器是建立在基础选择器基础之上，对基础选择器进行组合形成的。复合选择器可以更准确更高效的选择目标元素（标签）复合选择器是由2个或多个基础选择器通过不同的方式组合而成的。常用的复合选择器包括后代选择器、子选择器、并集选择器、伪类选择器等等

5.1Emment语法快速生成HTML标签

右键格式化文档可快速调整格式

5.2后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。元素1是父级，元素2是子级，最终选择的是元素2 ，元素2可以是儿子也可以是孙子，只要是元素1的后代即可。元素1和元素2可以是任意基础选择器，不是标签选择器也行

元素1 元素2 {样式说明}

例如： ol li { color: pink; }

再例如 <li><ahref="#">我是孙子</a></li>

ol li a {

color: red;

}

再例如

5.3子选择器

子元素选择器只能选择作为某元素的最近一级的元素，简单理解就是选择亲儿子元素

语法：元素1>元素2

上述语法表示选择元素1里面的所有直接后代元素2

5.4并集选择器

并集选择器可以选择多组标签，同时为它们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分，元素1和元素2中间用，隔开，可以理解为和的意思。并集选择器通常用于集体声明

元素1 元素2{ 样式说明}

上述语法表示选择元素1和元素2

5.5伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果或选择第一个、第N个元素。伪类选择器很多比如有链接伪类、结构伪类等。伪类选择器书写最大的特点是用：表示，比如:hover、:first-child

链接伪类

注意事项：为了确保链接伪类生效，要按照a:link、a:visited、a:hover、a:active的顺序声明

结构伪类

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

input:focus{

background-color: yellow;

}

5.6总结

6.元素与背景

6.1块元素和行内元素

HTML元素一般分为块元素和行内元素

块级元素的特点

1.比较霸道，自己独占一行

2.高度、宽度、外边距、以及内边距都可以控制

3.宽度默认是容器（父级宽度）的100%

4.是一个容器级盒子，里面可以放行内或者块级元素

注意哦：文字类元素内不能再使用块级元素，比如<h>、<P>里面存放文字，那它里面就不能放置<div>

行内元素特点

1.相邻行内元素在一行上，一行可以显示多个。

2.高、宽直接设置是无效的。

3.默认宽度就是它本身内容的宽度。

4.行内元素只能容纳文本或其他行内元素，不允许放块级元素

注意哦：链接里面不能再放链接

特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

行内块元素特点

1.和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）

2.默认宽度就是它本身内容的宽度（行内元素特点）

3.高度、行高、外边距以及内边距都可以控制（块级元素特点）

6.2显示模式的转换

行内元素转化为块级元素：display:block

块元素转化为行内元素：display:inline

转化为行内块元素：display:inline-block

6.3一个小工具

6.4CSS的背景

背景颜色：background-color: ;默认为transparent（透明）

背景颜色半透明：background: rgba(0, 0, 0, 0.3);最后一个参数是alpha透明度，取值在0-1之间

背景图片：background-image: url();属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置

背景平铺：background-repeat: no-repeat; repeat/no-repeat/repeat-x/repeat-y，页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色。

背景位置：background-position: X Y;

如果是方位名词，center right和right center效果相同

如果只指定了一个方位名词，若第二个参数省略则默认为center

背景图像固定（背景附着）： background-attachment: fixed/scroll;

6.5CSS三大特性

层叠性：样式冲突遵循的原则是就近原则，样式不冲突不会层叠

继承性：子标签会继承父类的某些样式（主要是跟文字相关的样式），如文本颜色和字号

优先级：当同一个元素有多个选择器，就会有优先级产生

选择器相同执行层叠性，选择器不同执行优先级

继承的权重是0，不管杜磊元素权重多高，子元素的权重都是0

权重叠加：复合选择器会有权重叠加的问题，权重虽然会叠加，但不会有进位的问题

7.盒子模型

页面布局三大核心：盒子模型、浮动和定位。CSS盒子模型本质上就是一个盒子

7.1边框border

border可以设置元素的边框，边框由三部分组成——边框宽度(border-width)、边框样式(border-style)（solid为实线、dashed为虚线、dotted为点线）、边框颜色(border-color)，

边框简写：border: 1px,solid,red没有顺序

上下左右边框分别设置：border-top:1px solid red/border-bottom:1px solid red

border: 2pxsolidblue;

border-top: 2pxsolidred;

border-collapse: collapse;（单元格相邻共同的边框合并在一起）

边框会影响盒子的实际大小，一个盒子加了边框后是会变大的，在测量盒子的大小时不再测量边框。

7.2内边距padding

padding也会影响盒子的大小，如果盒子本身已经有了长度和宽度，加内边距会撑大盒子，如果保证盒子跟效果图大小保持一致，则让width或height减去多出来的内边距大小即可。

对于导航栏里面如果有不同字数的名字，在设置盒子属性时不设置长或宽，通过设置padding值可以撑开盒子如果盒子本身没有指定width和height，padding不会撑开盒子

7.3外边距margin

下外边距margin-bottom

上外边距margin-top

左外边距margin-left

右外边距margin-right

简写格式和padding是一样的

外边距典型应用：外边距可以让盒子水平居中，但必须满足以下两个条件

（1）盒子必须指定了宽度（width）

（2）盒子左右的外边距都设置为auto——margin-left auto；margin-right auto;

或者写为margin：0 auto；以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align：center；即可

外边距的塌陷问题：使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。对于2个嵌套关系的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距

7.4清除内外边界

7.5pink老师总结

7.6圆角边框

border-radius：length；可以使盒子变成圆角

想要一个圆形：先要有一个正方形的盒子，再把border-radius设置为正方形边长的一半，或者写为

border-radius：50％；有一个矩形，想要圆角矩形就设置为高度的一半；border-radius：数值1 数值2 数值3 数值4，分别是左上角、右上角、右下角、左下角border-radius：数值1 数值2 这时候数值1是左上和右下，数值2是右上和左下；

7.7盒子阴影

box-shadow设置盒子阴影，默认的是外阴影（outset)但是不可以写这个单词，否则导致阴影无效

盒子阴影不占用空间，不影响其他盒子的排列垂直阴影和水平阴影是必须写的，其他可以省略。

box-shadow: 10px10px10px-4pxrgba(0, 0, 0, 0.3)

7.8文字阴影

8.浮动

网页布局的本质就是用CSS来摆放盒子，把盒子摆放到相应位置。CSS提供了3种传统布局方式，简单说就是盒子如何进行排列顺序：普通流（标准流）、浮动、定位。普通流（标准流）：就是标签按照规定好的默认顺序排列，标准流是最基本的布局方式。为什么需要浮动？总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。浮动最典型的应用：可以让多个块级元素一行内排列显示。网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动（解决行内块元素中间会有缝隙的情况）。

8.1什么是浮动

8.2浮动特性

加了浮动之后的元素，会具有很多特性，需要我们掌握的。

1.浮动元素会脱离标准流，浮动到指定的位置，俗称脱标，浮动的盒子不再保留原来的位置

2.浮动的元素会一行内显示并且元素顶部对齐，浮动的元素是互相贴靠在一起的，不会有缝隙，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

3.浮动的元素会具有行内块元素的特性（行内元素有了浮动特性，不需要转换为行内块元素就具有了高度和宽度等特性）任何元素都可以浮动。不管原来是什么模式的元素，添加浮动之后就有行内块元素相似的特性。如果块级盒子没有设置宽度，默认宽度和负极一样宽，但是添加浮动后，它的大小根据内容来决定。浮动的盒子中间是没有缝隙的，是紧挨着一起的。

为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

8.3常见的网页布局

8.4清除浮动

清除浮动的本质就是清除浮动元素造成的影响，如果父盒子本身有高度则不需要清除浮动，清除浮动后会由子盒子自动撑开父盒子。清除浮动的策略是：闭合浮动。

清除浮动的方法

1.额外标签法也称为隔墙法，是W3C推荐的做法

额外标签法也称为隔墙法，是W3C推荐的做法。额外标签法会在浮动元素末尾添加一个空的标签。例如<div style="clear:both"></div>或者其他标签(如<br/>等)，优点是通俗易懂、书写方便。缺点是添加许多无意义的标签结构化较差。新添加的这个盒子要求必须为块级元素，不能是行内元素。

2.父级添加Overflow属性

可以给父级添加Overflow性，将其属性值设置为hidden、auto或scroll。子不教父之过，注意是给父盒子添加代码，优点是代码简洁，缺点是无法显示溢出的部分。

3.父级添加:after伪元素

:after方式是额外标签法的升级版。也是给父元素添加

/*声明清除浮动的样式*/

.clearfix:after {

content: "";

display: block;

height: 0;

visibility: hidden;

clear: both;

}

.clearfix {

*zoom: 1; /*ie6,7 专门清除浮动的样式*/

}

4.父级添加双伪元素

也是给父元素添加

/*声明清除浮动的样式*/

.clearfix:before ,.clearfix:after {

content: "";

display: table;//前后两个盒子放在一行上

}

.clearfix:after {

clear:both;

}

.clearfix {

*zoom: 1; /*ie6,7 专门清除浮动的样式*/

}

8.5PS切图

PS有很多的切图方式：涂层切图、切片切图、PS插件切图等。其中涂层切图是最简单的切图方式：右击图层->快速导出为PNG；但是很多情况下，我们需要合并图层再导出：选中需要的图层，在图层菜单找到合并图层，快捷键是ctrl+E，然后再右击快速导出为PNG；利用切片选中图片需要利用切片工具手动划出，然后导出选中的图片，选中文件菜单->导出->存储为web设备所用格式->选择我们要的图片格式->存储。需要注意的是，在我们保存时候需要把“切片”设置为“选中的切片",PS插件切图需要下载收费软件跳过；

8.6CSS书写顺序

在实际开发中，我们不会直接用链接a而是用li包含链接的方法制作导航栏

9.CSS定位

浮动可以让多个块级盒子没有缝隙的显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其它盒子。定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位=定位模式+边偏移

9.1定位概述

定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。

定位模式决定元素的定位方式，它通过CSS的position属性来设置。其值可以分为4个。

边偏移就是定位的盒子移动到最终位置。有top、bottom、Left和right 4个属性

9.2定位模式

1.静态定位

是元素默认的定位方式，无定位的意思，静态定位按照标准流特性摆放位置，没有边偏移。静态定位在布局时很少用到。语法：选择器 {position：static；}

2.相对定位relative

是元素在移动的时候，是相对于他原来的位置来说的（自恋型）语法：选择器 {position：relative；}它是相对于自己原来的位置来移动的，移动位置的时候参照的是自己原来的位置。原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。不脱标，继续保留原来的位置。

3.绝对定位absolute

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）

语法：选择器 {position：absolute；}；如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位；

如果祖先元素有定位（相对/绝对/固定定位），则以最近一级带有定位的祖先元素为参考点；绝对定位不再占有原来的位置，是脱离标准流的。子绝父相：子级是绝对定位的话，父级要用相对定位

4.固定定位fixed

固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变，语法：选择器{ position： fixed }，以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动。固定定位不再占有原来的位置，固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位。

5.粘性定位sticky

粘性定位可以被认为是相对定位和固定定位的混合。Sticky粘性的语法：选择器{ position： sticky }粘性定位的特点：以浏览器的可视窗口为参照点移动元素（固定定位特点），粘性定位占有原先的位置（相对定位特点），必须添加top/ Left/Right/bottom其中一个才有效。

9.3定位的叠放顺序

在使用定位时，可能会出现盒子重叠的情况，可以使用z-index来控制盒子的先后次序（z轴）

语法：选择器{z-index: ;} 谁的z-index数值大谁就在上面，数值可以是正数、负数或0，默认为auto，如果属性相同，则按照书写顺序后来者居上，z-index数值不带单位，只有定位的盒子才有z-index属性。绝对定位的盒子垂直、水平居中办法如下

定位的特殊特性：绝对定位和固定定位也和浮动类似，行内元素添加绝对或者固定定位，可以直接设置高度和宽度；块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。绝对定位（固定定位）会完全压住盒子。浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片），但是绝对定位（固定定位）会压住下面标准流所有的内容。浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

9.4元素的显示与隐藏

display属性用于设置一个元素应该如何显示

display：none；隐藏对象->display隐藏元素后，不再占用原来的位置

display：block；除了转换为块级元素之外，同时还有显示元素的意思

visibility本质是让一个元素在页面中隐藏或者显示出来

visibility：visible；元素可视

visibility：hidden；元素隐藏

类似于网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，就会重新出现！隐藏元素后，继续占有原来的位置，如果隐藏元素想要原来的位置，就用visibility：hidden；如果隐藏元素不想要原来的位置，就用display：none；（用处更多是重点）

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

overflow：visible；/overflow：hidden；/overflow：scroll；/overflow：auto；

scroll无论有没有溢出都显示滚动条，auto只有在溢出时才显示滚动条，一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。但是如果有定位的盒子，请慎用Overflow：hidden因为它会隐藏多余的部分。

10.CSS高级技巧

10.1精灵图

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术，也被称为CSS sprites/CSS雪碧等。核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了： background: url(字母表.jpg), no-repeat, -150px, -150px;