前端学习之路 css

辞初

已于 2023-01-14 10:26:49 修改

阅读量134

点赞数

分类专栏：前端学习之路文章标签： css 前端学习

于 2023-01-04 13:24:23 首次发布

本文链接：https://blog.csdn.net/cichu77/article/details/128531641

版权

前端学习之路专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇文章详细介绍了CSS的引入方式，包括内部样式和外部样式，以及各种选择器的用法，如元素选择器、类选择器、ID选择器、属性选择器和伪类选择器。还涵盖了字体属性、颜色属性、背景属性、文本属性、表格属性、盒子模型、弹性盒子模型、定位、CSS3新特性，如媒体查询和动画。此外，文章讨论了图片处理方法，如雪碧图和字体图标的优势及其使用方法。

摘要由CSDN通过智能技术生成

css简介

在这里插入图片描述

css引入方式

在这里插入图片描述

style标签写在head里，属于内部样式，内部样式的缺点是：当存在页面跳转情况下，style标签只对当前页面有效，对跳转页面无效，要避开这个缺点，可以使用外部样式
使用外部样式需要新建一个css文件，其内容只能写css，并在每个html文件中写入link链接，rel为默认，href内容为css文件(相当于引用了css文件)

在这里插入图片描述

css选择器一

全局选择器(对所有标签的有效)

在这里插入图片描述

元素选择器(只对选择的标签有效,html中的span标签就是为了后续css操作):

在这里插入图片描述

类选择器(灵活，有针对性):

在这里插入图片描述

class的值只能由字符，数字，横杠组成，但尽量不要用数字且不能用数字开头
同一个标签可以用多种类选择器，用空格隔开就行

id选择器(专一性)：

在这里插入图片描述

一个标签可以设置一个id，id不能以数字开头，不同标签id名称不能重复，id选择器只对相应id的标签有效

合并选择器

在这里插入图片描述

属性选择器

在这里插入图片描述

对有disabled属性的元素设置样式

在这里插入图片描述

对有type属性且为特定值的元素设置样式
对有href属性且为#开头的(^)或以.jpg结尾的($)设置样式

伪类选择器

在这里插入图片描述

link表示默认 vistied表示已访问过时显示灰色 hover表示鼠标悬停 active表示按下
focus表示在操作时显示样式，这里指在按下链接或输入文本时显示outline轮廓样式
first-child表示为父类的第一个子代 last则为最后一个

在这里插入图片描述

input.error表示要同时满足input标签和error属性才设置样式，点也可以换成冒号

总结

在这里插入图片描述

属性选择器优先级同标签选择器
由优先级可知，id选择器生效
优先级相等时，从上到下执行

字体属性

颜色属性

在这里插入图片描述

用英文单词指定
用十六进制指定
用三原色通道rgb指定，r-red，g-green，b-blue，每个参数范围时0~255
三原色通道基础上加透明度a，范围是0~1，0表示透明，1表示完全不透明，0到1之间取值可调整透明度
也可以用hsl来调节颜色属性

字体属性：

字体大小：用font-size即可，chrome支持的最小字体大小为12px
字体粗细：bold与bolder在浏览器上看不出区别

字体样式：

在这里插入图片描述

font-family可以有多个值来适配不同的机型，最后一个值代表字体族(共五种)，一般不可或缺，它表示一类字体的风格
字体样式有中英文混合时，一般英文写在在中文前
下载字体文件来渲染
中文字体文件一般很大，只需要裁剪需要的部分就可以

总结

在这里插入图片描述

line-height值无单位时表示行高为字体大小的多少倍，推荐用这种倍数关系

继承

在这里插入图片描述

关于继承：诸如盒子模型如div的属性是不能被继承的，对于文字属性则可以被继承
硬要div的子级元素从父级继承属性的话可以用显式继承
先用全局选择器将box-sizing等属性设置为inherit，然后就可以指定html里所有的box-sizing等属性为border-box
之后仍允许运用第三方组件来设置box-sizing等属性
注意：如果是不可继承的元素，又没有给它设置属性，或者是可继承的元素，但在往上找的父级元素没有该属性，就要用到初始值

背景属性

在这里插入图片描述

background-repeat是用来管理图片填充空白的
最常用cover，它与contain的区别在于，cover必须填满背景，超出部分会被裁剪掉，contain则是保持图片最初形态尽力充满背景，不能充满的部分保留空白

文本属性

在这里插入图片描述

一般两个文字格的缩进是30px

表格属性

在这里插入图片描述

折叠边框是指把双边框变为单边框

在这里插入图片描述

不设置表格宽高的情况下，单元格大小由内容决定，内容越多单元格被撑得越大
垂直对齐属性设置垂直对齐中vetical-align的三个值为top center bottom
padding属性基本可以替代表格宽高的居中设置，通过给定值设置每个单元格上下左右留出对应px的空白

在这里插入图片描述

关系选择器

后代选择器

在这里插入图片描述

指定完E F后，只要F是E的后代(包括儿子孙子重孙子…)就能生效，对于没指定的标签不会生效

子代选择器

在这里插入图片描述

必须是直接子元素(儿子)才会生效

相邻兄弟选择器

在这里插入图片描述

只对E开始向下的相邻F生效

通用兄弟选择器

在这里插入图片描述

对从E开始向下所有的F生效

css盒子模型

在这里插入图片描述

padding margin可以加-加位置，指定特定位置的像素大小

弹性盒子模型

在这里插入图片描述

未设置弹性盒子：

在这里插入图片描述

由于div是块级元素，所以显示出来是自上而下的

设置弹性盒子

在这里插入图片描述

默认弹性盒里内容横向摆放
row-reverse
column-reverse
row-reverse翻转时左对齐变为右对齐，conlumn-reverse翻转时上对齐变为下对齐
垂直方向上居上，居中，居下摆放
水平方向上居左，居中，居右摆放

css常见面试题：

把一个小盒子放在一个大盒子里，让小盒子在大盒子垂直方向，水平方向上都居中，即用justify-content，align-items属性

在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/d7595a2971e54fa395ab91f5ecefd785.png

根据flex的权重来分配比例，一旦设置了flex属性，width属性就不生效了

文档流

在这里插入图片描述

不建议img标签连着写，当img很多时，在编写代码时就需要左右拖动，不方便操作和修改，如果img换行则会导致元素之间存在空隙

浮动

在这里插入图片描述

为img添加浮动可以脱离标准流，去除空隙

在这里插入图片描述

浮动可以让元素在浮动层变成水平摆放，常用于列表标签
使用浮动时也需要考虑宽度，不够的情况下会被挤到下面一行

清除浮动

在这里插入图片描述

将自上而下排列的块级元素添加浮动后变为水平摆放，如果外层盒子高度为0，添加浮动之前外层盒子的高度由元素撑开，添加浮动后外层盒子高度就变为0了
如果对子元素设置了浮动，那么子元素就会脱离文档流，也就是说父级元素中没有内容可以撑开其高度，这样父级元素的高度就会被忽略，这就是所谓的高度塌陷
会影响未添加浮动元素的操作，因为未添加浮动的元素是摆放在最下面一个图层里的
clear属性的三个值left，right，both，相当于把所在浮动层去除掉

定位

在这里插入图片描述

相对定位可以随便移动元素在页面中的位置，但仍然在标准流中
绝对定位每设置一个绝对定位就会产生一层，与浮动不同，浮动只有两层

在这里插入图片描述

固定定位一般只用一个，它主要用来表示随页面滚动而保持在某个区域的元素
如果父级元素有相对定位，则子级元素的定位是相对于父级元素的，子级元素的位置会随父级元素的位置改变而改变，父级元素的定位类型一般是相对定位。如果父级元素没有定位，则子级元素继续相对于上一级逐级寻找，直到html文档

在这里插入图片描述

z-index谁大，谁在上层

css3新特性

在这里插入图片描述

关于border-radius50%与100%的区别：https://blog.csdn.net/ntoskiking/article/details/50960761

动画

在这里插入图片描述

使用动画

在这里插入图片描述

！！！！！注意时间要加单位s，ms…上面的0要加单位！！！！！
div:hover伪类选择器，当光标移动到元素上时执行其中的语句，这里是暂停

呼吸动画

在这里插入图片描述

opacity是透明度

媒体查询

在不同大小屏幕上展现出不同的效果
有上面的meta标签就无法随屏幕自适应
最大768表示手机，最小768且最大992表示平板，最小992表示电脑，注意苹果手机是双像素的，需要乘以二

雪碧图

允许将一个页面中涉及到的所有零散图片包含到一张大图片中
优点：1.减少图片的字节 2.减少网页http请求，大大提高页面性能
原理：1.通过background-image引入背景图片 2.通过background-position把背景图片移动到自己所需要的位置
display属性把内联元素span变为块级元素，原来的内联元素span不能调整宽高，变为块级后就可以了，background-image指定大图片，background-position指定图片中的小图片的位置，上例在一个1px的边框里展示小图片，通过position的两个参数，第一个是x轴(水平方向)移动大图片中的小图片，第一个是y轴(垂直方向)移动大图片中的小图片