less
1.less是什么东西
less是一种提高我们编写ess效率的技术=》css预处理器(less,scss,stylues技术名词)less工作流程
1我们写样式代码直接写在less文件中
2通过插件来把less文件编译成我们热悉的css文件
3问页中来引入的译好的css文件
网页中引入的文件
问：是less文件还是css文件?
答：less自动生成的css文件
问：和开发中，我们直接编辑的文件是1ess文件还是css文?
答：less文件（要安装less插件）
使用less的过程
1.新建一个less文件(后缀名就是.less) 2.会按照less的语法要求在less文件中编写代码 3.通过easy less vscode插件来编译less文件 4.会生成对应的css文件 5.在网页中直接引入编译好的css文件即可
2.less变量
页面有一种主题色(天猫。京东红色。美团黄色。饿了吗蓝色
1.当我们要修改主题颜色的时候，只改一个地方即可
懂得了使用less变量技术就可以做到改一个地方即可
变量会变化的数据即可
固定语法@+任意的名称(有语义的英文)
变量:作用把一些css的属性设置在一个地方，实现一改全改
@theme-color:Ogray;
/统一设置网页字体的大小/
/领导老了眼睛看不清楚了字调大一些/
@font-size:200px;
3.less的混合mixin
// 定义一个mixin,记得要加括号(跟公共类差不多)
.aaa(@x,@y) {
// 存放你想要的代码
background-image: url(.1jpg);
background: no-repeat;
box-sizing: 100%;
// 背景图片位置(混合一定要加@，括号里面逗号隔开，不是就空格隔开)
background-position: @x @y;
}
a {
// 使用
.aaa(150px,-90px);
// background-position: 100px -50px;
}
p {
.aaa(150px,-90px);
// background-position: 150px -90px;
}
div {
.aaa(400px,-70px);
// background-position: 400px -70px;
}
4. less的语法
1变量方便快速去修改样式
2运算less支持数学运算
3混合mixin
把一大段css代码都堆在一起方便使用
4嵌套让我们按照html的嵌套结构来编写css嵌套
5如何指定编译好的css文件存放在哪里
1这个知识上课不讲，不重要!!
使用easy less指定生成的css目录位置，这个技术以后工作中用不到
2后期会有其他的编译工具统一处理css的生成目录常用
5.less的嵌套写法
// <div>
// <p>
// <s>
// <i></i>
// </s>
// </p>
// </div>
// less的嵌套写法，直接大括号包裹，一层层嵌套
div {
// 伪元素要加&空格符，不然语法错误
&::after {
content: "";
}
p {
// 加大于号代表后代选择器
> s {
i {
color: aqua;
}
}
}
}
导航栏滚动条代码：overflow-x: auto;
设置文字不要换行： white-space: nowrap;
设置第一行文字末尾出现省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
设置第n行文字末尾出现省略号
display: -webkit-box;
overflow: hidden;
white-space: normal!important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
响应式布局的网站实现的原理
根据屏幕宽度不同去使用不同的css假如屏幕比较宽里面宽度去设置25%假如屏幕比较窄里面宽度去设置58%根据
屏幕宽度不同去使用不同的css=专业术语=>媒体查询!
1.媒体查询语法代码写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 媒体查询语法1：当屏幕宽为400px的时候背景颜色为红色 */
/* 简洁写法 */
@media(width: 400px) {
body {
background-color: red;
}
}
/* 媒体查询语法2：当屏幕宽为600px的时候背景颜色为黄色 */
/* 常见和推荐写法 */
@media screen and (width: 600px) {
body {
background-color: yellow;
}
}
/* 不单可以设置宽，还可以当高改变的时候颜色也改变 */
@media screen and (height: 500px) {
body {
background-color: skyblue;
}
}
</style>
</head>
<body>
</body>
</html>
媒体查询-指定区间写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 当宽在400px以下或者最大为400px的时候为黄色 */
@media screen and (max-width: 400px) {
body {
background-color: yellow;
}
}
/* 当宽在最小为500px的时候为黄色 */
@media screen and (min-width: 500px) {
body {
background-color: red;
}
}
/* 当宽最小为600px 最大为900px的时候变成黑色 */
@media screen and (min-width: 600px) and (max-width:900px) {
body {
background-color: black;
}
}
</style>
</head>
<body>
</body>
</html>
媒体查询-指定区间写法-课堂作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 50px;
margin-bottom: 10px;
background-color: aquamarine;
}
/* 当屏幕宽度最大不超过400px的时候一排排列 */
@media screen and (max-width:400px) {}
/* 当屏幕宽度最小不低过800px的时候四排排列 */
@media screen and (min-width:800px) {
div {
width: 25%;
float: left;
}
}
/* and一定要空格隔开 */
/* 当屏幕宽度最小不低过400px，最大不超过800px的时候二排排列 */
@media screen and (min-width:400px) and (max-width:800px) {
div {
width: 50%;
float: left;
}
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
