前端基础 css基础
文章目录
前言
昨天写了html的基础，今天趁热打铁再来学学css。不过可能今天的内容就有点多了，记得隔几天回头来复习一下加深印象（骗骗浏览数，嘻嘻嘻）
正文
玩笑归玩笑，不过今天的内容确实很多，现在开始正文。
1.css的一些简单介绍
css:指的是“Cascading Style Sheet（层叠样式表）”，是用来控制网页外观的一门技术。
作用：美化页面
之前说前端三剑客嘛，html，css，js。当然现在有很多很好的js框架出现（比如Angular、React、Vue），这方面框架的学习推荐去B站看技术胖的视频，我们今天只聊聊最基础的css，打好基础之后的学习才会更轻松。
2.页面引入css
三种方法
- 外部样式表
- 内部样式表
- 行内样式表
一般开发的话推荐外部样式表，我举例子的话会用内部样式表，行内样式表用到的机会不多。还有一种@import引入方式（与外部样式类似），但是这种方式会先加载html文件再加载css文件，有可能导致页面一开始出现未美化状态影响用户体验所以这里就不会提到
2.1 外部样式表
外部样式表： 顾名思义就是从html文件外部引入css文件
举个例子，在这里因为我还没有讲css选择器语法之类的，所以只需要了解引入的语法，等下下面讲了css选择器语法再回想你们就懂啦
这是css文件
#p1{
height: 200px;
width: 100px;
color: red;
}
html文件引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式表的引入</title>
<link rel="stylesheet" type="text/css" href="demo1.css">
</head>
<body>
<p id="p1">来试试外部样式引入成功没，成功了我会变红的</p>
</body>
</html>
这里其实我就是用了一个id选择器规定了id为p1内容的大小和颜色
2.2 内部样式表
内部样式表： 这个就更简单啦，就在html文件内部用style标签写就好啦，虽然写在哪里都可以完成功能，但是规范是写在head标签中的。
因为等下我的例子基本都是用内部样式表，所以这里我就不举例了。
2.3 行内样式表
行内样式表是通过定义标签中的style属性来实现效果的，了解就好，一般用于特定标签的设置。
3.css选择器
css选择器是对指定的标签设置样式，要把指定的标签选择出来
css选择器有很多种，但是基础的语法都很类似，只是对应到每个选择器上会略有不同。下面这是基础的语法，熟悉了这部分再来具体到不同的选择器。
下面来看看具体的几种css选择器
3.1 元素选择器（标签选择器）
元素选择器: 指选择特定元素指定css样式，直接指定标签就好，不需要加任何其他符号**
3.2 id选择器
简单总结一下，id选择器使用#，至于里面具体的属性等下会有属性专门讲，之前上面的例子中使用的就是id选择器，所以这里就不举例啦
3.3 类选择器(class选择器)
类选择器: 我们可以对“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class的元素进行css样式操作。
3.4 并集选择器
可以在多个选择器之间用逗号分开，使不同标签有相同的样式
3.5 属性选择器
指定某一种属性的样式，用[]括起来选择的属性
3.6 后代选择器
后代选择器是选择元素内部中所有的某一种元素，包括子元素和其他后代元素。一般元素之间用空格隔开
这个来举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
div p{
height: 5px;
width: 200px;
color:red;
}
</style>
</head>
<body>
<div>
<p>
试试后代选择器，也就是指定选择元素之内的元素样式
</p>
</div>
<br>
<p>
指定元素之外样式不会改变
</p>
</body>
</html>
3.7 对上面的几种选择器归纳总结
元素选择器直接给定元素，id选择器要用#，class选择器用.，并集选择器元素之间用,隔开，属性选择器用[]把需要的属性括起来，后代选择器之间用空格分开。
4.常见的属性
上面是几种常见的属性，也就是选择器内部你可以设置的属性，下面就展开详细介绍一下。
4.1 字体属性
字体属性的功能是设置页面字体的显示样式
4.2 颜色和背景属性
颜色和背景属性的功能是设置页面元素的颜色和背景颜色
background-repeat就是当你的背景图片大小比你块的大小小的时候的重复方式，默认是全部覆盖，但是你也可以指定x轴重复(repeat-x)，还是y轴重复(repeat-y)或者是不重复(no-repeat)
4.3 文本属性
文本属性的功能是设置页面的显示效果
- text-align 设置文本的对齐方式
- text-indent 设置文本的首行缩进
- line-height 设置文本的行高
- a:link 设置链接未访问的状态
- a:visited 设置链接访问过的的状态
- a:hover 设置链接的鼠标**状态
这一部分我就写个例子来看一下吧（其实文本和文字差不多，只是文本是text,文字是font）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本属性</title>
<style>
*{
margin:0;
padding: 0;
}
#p1{
height: 20px;
background: red;
text-align: center;
text-indent: 10px;
line-height: 5px;
}
a:link{
color: aqua;/*开始颜色*/
}
a:visited{
color: black;/*浏览过的颜色*/
}
a:hover{
color: blue;/*鼠标放上去的颜色*/
}
</style>
</head>
<body>
<p id="p1">修改文本属性</p>
<a href="css_demo1.html" >跳转</a>
</body>
</html>
再来看看补充的几点
4.4 边框和编号属性
边框属性是设置页面内边框元素的显示效果
编号属性设置页面内项目符号和编号元素的显示效果
这里提一个简单的写法，就是写列表的时候
ul#ul1>li{123$}*10
然后按tab就会生成我们想要的列表啦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框属性与编号</title>
<style>
p{
height: 200px;
width: 200px;
border: blue dashed 1px;/*solid是实线，dashed是虚线*/
border-top:0;/*上边框消失*/
}
#ul1{
list-style: circle;/*circle是圆圈，none是没有*/
}
</style>
</head>
<body>
<p>看看边框效果</p>
<!--<ul id="ul1">-->
<!-- <li>我是列表1</li>-->
<!-- <li>我是列表2</li>-->
<!-- <li>我是列表3</li>-->
<!-- <li>我是列表4</li>-->
<!--</ul>-->
<ul id="ul1">
<li>1231</li>
<li>1232</li>
<li>1233</li>
<li>1234</li>
<li>1235</li>
<li>1236</li>
<li>1237</li>
<li>1238</li>
<li>1239</li>
<li>12310</li>
</ul>
</body>
</html>
4.5 块元素和内联元素
块元素可以修改宽高，内联元素不能改变宽高。但是他们之间可以通过display转换，还有内联块就是一行显示同时可以改变宽高。
再来看看常见的块元素和内联元素
我就写个内联块的例子来看看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联块</title>
<style>
#span1{
background: blue;
width: 100px;
height: 100px;
display: block;
}
#span2{
background: brown;
display: inline-block;
height: 50px;
width: 50px;
}
#span3{
background: red;
display: inline-block;
height: 80px;
width: 40px;
}
</style>
</head>
<body>
<span id="span1">我是span1</span>
<span id="span2">我是span2</span>
<span id="span3">我是span3</span>
</body>
</html>
4.6 浮动、块属性、层属性
先来说几个概念
浮动，可以使得元素移到左边或者右边，并且允许后面的文字或元素环绕着它。浮动最常用于实现水平方向上的并排布局，例如两列布局、多列布局
定位，没有浮动灵活但是却可以精准定位页面元素
盒子模型，见下图
讲了这些概念，再来细说。
首先，为什么要浮动？我们知道块级元素都是自己占一行的，但是我们想让他们两个块级元素在同一行，这个时候就需要浮动（浮动一定要两个块级元素同时浮动，否则会脱标导致有一个块级元素内容显示不出来）
先看看浮动的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动与清除浮动</title>
<style>
#box{
height: 200px;
width: 200px;
background: black;
}
#box1{
height: 50px;
width: 50px;
background: red;
float: left;
}
#box2{
height: 40px;
width: 40px;
background: blue;
float: left;
}
</style>
</head>
<body>
<div id="box">
<div id="box1"></div>
<div id="box2"></div>
</div>
</body>
</html>
但是当我们忘记设置box的height的时候，会导致box无法显示，这个时候就需要清除浮动，使用overflow: hidden;
这个时候外层块的高度就会和内层最大高度一致。其实这一部分也说明了一个容器可以嵌套其他容器。下面总结一下嵌套浮动的规则
再来看看块属性设置元素位置之间的问题
可以这样理解，margin就是从边框向外，padding就是从边框向内，具体可以看看上面的盒子模型体会一下。
最后定位的问题
默认情况下，固定定位和绝对定位参考的是浏览器边框，相对定位参考的是元素的原始位置，静态定位一般没有用到，所以这里就定位问题我也来写个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位问题</title>
<style>
/*去掉浏览器默认边距*/
*{
padding: 0;
}
.box{
width: 500px;
height: 500px;
background:blue;
margin-left: 300px;
margin-top: 300px;
/*position: relative;*/
}
.box1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 100px;
top: 100px;
}
.box2{
width: 100px;
height: 100px;
background: green;
position: relative;
left: 200px;
top: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
当我们的父元素没有使用相对定位，而里面嵌套的子元素使用绝对定位的时候，参考的还是浏览器边界，使用相对定位参考的才是父元素；也就是说要想子元素相对父元素绝对定位，就必须父元素使用相对定位，子绝父相
那我们把父元素相对定位一下
总结
css的内容确实有点多，不过慢慢来还是很简单的，有的小细节地方忘了很正常，重新回顾一下就好。其实这篇博客写到最后我自己都好累，还有部分内容比如表格样式、图片样式我都省略了，打算以后碰到了再提，主要还是把简单的基础部分打扎实。
上一篇： 力扣：237：删除链表中的节点