这几天一直在忙着重新复习CSS基础知识，发现好多知识点都遗忘了，赶紧写个文章记录一下这几天的学习情况。不过话说回来了，前阵子的项目还没来得及更新，如果一天不是24小时该有多好。
前言
CSS和HTML是前端开发中不可缺少的一个基础知识，所以当前打下基础对我们未来的工作或者学习一定有很好的积极因素。
一、关于背景图片
背景图片基本在每一个项目中都要使用到，那么以下就是一些常见的语法，走你~
1、常用语法
①.background-image–代表着背景图片,在这里你可以为你的背景插入一张图片（例如登录页面）
background-image：none(默认参数) | url（“图片所在地址”），建议都使用相对路径。
②.background-repeat–在插入图片后，它是默认重复的(也就是repeat)，这个时候就会显得插入的背景图片不太好康的鸭子，这个时候你就可以用到no-repeat(这样你的图片只有一张啦！)
background-repeat：repeat（默认）|no-repeat（不重复）|repeat-x（沿x轴，水平重复）| repeat-y（沿y轴，垂直重复）
③.background-color–顾名思义就是元素的颜色背景
background-coler：rgb格式、十六进制、blue、green（颜色名词），在一般情况下默认的是transparent(透明)
④.background-position–可以改变图片为背景中的位置
background-position：x y（x轴和y轴）
⑤.background-attachment–背景固定（相当于你在拖滑动栏的时候，背景不会变动、或者随内容位置发生变动）
background-attachment：scoll（默认参数） | fixed(固定)
⑥.background：rgba（r：red、g：green、b：blue、a：appha），使用的是rgb格式，只是多了一个参数而已
a：透明度，取值在0~1之间，（0：透明，1：不透明，透明会随着数值的增大而变得不透明）。
2、语法总结
二、元素的三种显示模式
1、常用语法
①行内元素：a(链接)、strong（重要的文本）、b（粗体文本）、em（斜体）、i（示斜体文本）、del（删除的文本）、u（为文本添加下划线）、span（样本文本）…
display:inline
②块级元素：自己独占一行，例如div、p、有序和无序列表、h1~h6标题
display:block
③行内块元素：input（可输入文本）、img（图片）、td（列）
display:inline-block
2、语法总结
三、复合选择器
1、伪类选择器
①链接伪类选择器（有四个参数 link、visited、hover、active）
a:link指的是没有点击过的链接、a：visited（指的是点击过后的链接）、a：hover（指的是鼠标经过链接经过的时候，悬浮在链接上时改动颜色）、a：active（指的是鼠标正在点击的时候的那个链接）在编写伪类选择器的时候，一定要按照严格的顺序来进行编写(LVHA)
2、后代选择器
ul li{ //想要修改的样式}
后代选择器（ul li（指的是ul下的li所有的元素）
</style>
/* 1.后代选择器，对ul下的所有li标签都改变样式*/
ul li{
color: pink;/* 将颜色定义为猛男色! */
font-size: 24px;/* 设置字体大小 */
list-style: none;/* 除去前面的黑点 */
}
</style>
</head>
<body>
<ul>
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>我是4</li>
<li>我是5</li>
</ul>
效果图
3、子代选择器
ul > li{//编写你想要的样式}
子类选择器(ul > li （指的是选择ul 中 li的第一代子元素）
4、并集选择器
ul , p {} 一定要注意用，(英文逗号)，否则样式不起效果！
并列选择器(div，p（元素一，元素二）代表div和p之间的使用共同的样式)
5、语法总结
四、关于img标签的一些细节
1、alt元素
指的是图片无法正常显示(比如路径写错),这个时候你在添加alt的属性效果就有用啦。
2、title元素
指的是当你鼠标定位到这张图片时，会显示你在title定义的文本信息，效果如下
五、关于a标签的一些细节
1、基本语法
href：目标URL地址。title：悬停文本，鼠标光标经过链接时显示的文本信息。name：主要用于设置一个锚点的名称。
2、tagret语法
target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：_self：在同一个网页中显示（默认值），替换当前页面。_blank：在新的窗口中打开，原先的页面不关闭。_parent：在父窗口中显示。_top：在顶级窗口中显示。
3、锚点链接（常用于系列目录定位，点击链接后跳转到选择的条目）
<!-- href中的值要和定位到的id值一致，否则不起作用 -->
<a href="#win" title="总冠军" >广东</a>
<h2 id="win">2021.05.01</h2>
4、语法总结
六、盒模型居中定位的几种方式(敲重点！！！)
1、盒模型定义：由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。
2、第一种方法
margin: 0 auto
3、第二种方法（当前流行）
display: flex;（弹性布局）//有一说一，弹性布局真的很好用，强烈推荐
justify-content: center;
4、第三种方法
position:relative;
transform: translate(-50%,-50%);
5、方法总结
目前掌握的方法只有这三个，其他的方法还需要不断的学习哈哈哈，或者有更好的方法欢迎留言
最后总结
目前复习到的知识点就这些了，其他的明天再来更新，当作回顾自己的知识点叭！
如果总结的不好话或者有什么错误，欢迎您在留言中给我指出一点建议噢。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
