块级元素（inline）：
块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以设置 width 和 height 属性，浏览器通常会在块级元素前后另起一个新行。
常见块级元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 150px;
height: 150px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>块级元素1</div>
<div>块级元素2</div>
</body>
</html>
分析：
块级元素的高和宽可以被修改，而且块级元素会在一个块级元素之后另起一行。
行级元素
行级元素（block）：
一般情况下，行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素和平共处于一行。
常见行级元素：
a,b,strong,span,img,label,button,input,select,textarea
特点：
和相邻的行内元素在一行上
高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
默认的宽度就是它本身的宽度
行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
width: 150px;
height: 150px;
font-size: 40px;
background-color: cadetblue;
}
</style>
</head>
<body>
<span>行级元素1</span>
<span>行级元素2</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
width: 150px;
height: 150px;
font-size: 20px;
background-color: cadetblue;
display: inline-block;
}
</style>
</head>
<body>
<span>以前我是行级元素，</span>
<span>现在我只想做行内块级元素。</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 150px;
height: 150px;
font-size: 30px;
background-color: cadetblue;
display: inline;
}
</style>
</head>
<body>
<div>我以前是块级元素，</div>
<div>现在我是行级元素！</div>
</body>
</html>
分析：
在VSC中，修改宽高的代码已经出现了波浪线，证明他是错误的，所以现在的div已经变成了行级元素。
————————————————
版权声明：本文为CSDN博主「董小宇」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lolly1023/article/details/105715892
文章目录
继承性的描述：
继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父类的属性。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color: blue;
}
</style>
</head>
<body>
<div>父元素
<div>子元素
<p>我依旧是子元素</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 32px;
}
</style>
</head>
<body>
<p style="color: blue;">我这里体现了层叠性呀</p>
</body>
</html>
使用结论
由于内容有限，但是结论是一定的，所以我直接给出结论：
若多个选择器定义的样式不冲突，则元素应用所有选择器定义的样式。
若多个选择器定义的样式发生冲突（比如：同时定义了字体颜色属性），则CSS按照选择器的优先级，让元素应用优先级搞得选择器样式。
CSS定义的选择器优先级从高到低为：行内样式–>ID样式–>类样式–>标记样式。
如若想直接定义使用哪个样式，不考虑优先级的话，则使用!important，把这个加在样式后面就行了。
优先级
定义CSS样式时，经常出现两个或更多规则应用在同一个元素上，这时就会出现优先级的问题。层叠性和选择器的圈中有很大的关系。
优先级的使用说明
权重分析：
内联样式：如：style=""，权重为1000。
ID选择器，如：#content，权重为100。
类，伪类和属性选择器，如.content，权重为10。
标签选择器和伪元素选择器，如div p，权重为1。
继承样式，权重为0。
将基本选择器的权重相加之和，就是权重大小，值越大，权重越高。
计算权重方法
数标签：先数权重最高的标签，然后数第二高权重的标签，以此类推，就会生成一个数组，里面包含四个数字。
比如（0，0，0，0）分别对应（行内式个数，id选择器个数，类选择器个数，标签选择器个数）
然后两个选择器通过对别四个数字的大小，确定权重关系。
例：
#box ul li a.cur有1个id标签，1个类，3个标签，那么4个0就是（0，1，1，3）
.nav ul .active .cur有0个id，3个类，1个标签，那么4个0就是（0，0，3，1）
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{
color: blue;
}
#p1{
color: red;
}
</style>
</head>
<body>
<p id="p1" class="p1">我们来试一下优先级</p>
</body>
</html>
先推测一波，因为前面讲到了ID选择器的权重是大于类选择器的，所以这里颜色应该为red。
效果如下：
推测正确！优先级GET！
p,h1{
color: blue;
}
用于对于多个选择器进行样式修改，由简单选择器组合而成的选择器，可以是简单选择器中的任意组合，如上面代码例，就是修改了p标签和h1标签的字体颜色。
格式
元素[属性名]{
声明的属性和属性值;
}
p[id]{
color: blue;
}
前面添加元素的名字，然后后面加上属性名，比如上例，就是p标签，其中带有id的元素，然后把字体颜色设置为蓝色。
格式
元素[属性名=属性值]{
声明的属性和属性值;
}
p[class = 'p2']{
color: blue;
}
和上面的根据属性名查找差不多，只不过更加了，到了属性名后面的属性值，上例就是作用于p标签，只不过条件是为带有class属性，并且属性值为p2的p标签。
格式
元素[属性名或属性表达式][属性名或属性表达式]..{
声明的属性和属性值;
}
p[title][class]{
color: blue;
}
元素后面加。属性名或属性表达式，可以加+∞个，但是没必要。上例为：设置title属性和class属性的段落p标签的样式
格式
元素[元素名~=属性值]{
声明的属性和属性值;
}
元素[属性名|=值]{
声名的属性和属性值;
}
p[class~='red']{
color: blue;
}
注意，这里是~=，为约等于，就是找满足符合约等于条件的标签，上例为：设置class属性的值，包含red属性名的标签
格式
元素名1~元素名2{
声名的属性和属性值;
}
a~p{
color: blue;
}
a标签后面的每一个p标签，都进行了样式的修改。
格式
父类标签 子类标签{ /*注意俩标签中间有空格*/
声名的属性和属性值;
}
div strong{
color: blue;
}
格式
父标签+子标签{
声名的属性和属性值;
}
#div1 + p{
color: blue;
}
————————————————
版权声明：本文为CSDN博主「董小宇」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lolly1023/article/details/105413125
在我们写页面时，
有时会发现自己写的css样式无法生效，导致这种现象的原因有很多，下面列举一些常见的原因希望可以帮到你，欢迎评论区补充。
如果你反复检查认为代码没有问题，那么可能是浏览器缓存的问题。在排查前先试一下清除浏览器缓存，重启浏览器或者换个浏览器等手段，无效后再进行进一步排查。有可能自己什么都没有做错，就是因为缓存或者浏览器的问题导致，重置一下也许问题就解决了。
浏览器的‘F12’元素审核，看看哪些样式没有应用上。
写错属性名致使无法与html匹配，或属性值不符合规范；
html标签没写完整，漏了“<”或者”>”等；
，；｛｝看看这些符号是不是不小心使用了中文或者全角符号；
<span>设CSS样式不起作用:例如：要定义span居中，必须先让span成块级元素显示，也就是说，要先定义span的display:block;属性，然后再给span添加边距属性margin:0px auto;
css样式中间没有加分号；
为什么css样式里有时候使用分号隔开有时候是用空格呢？
对同一个属性进行设置时是用空格隔开，比如border:1px solid red; 对不同的属性进行设置时是用分号隔开，比如width:300px;height:300px;
如果你的样式完全不生效，首先确认关联了样式表没有，或者关联的样式位置、名字是否正确；
<link rel="stylesheet" type="text/css" href="mycss.css"/>
看看自定义的CSS样式引入标签是否放在bootstrap框架样式引用之后，确保不会被在加载页面时被框架的样式覆盖。
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="mycss.csvs"/>
后代子代选择等，涉及多个标签，类名、id等，子选择器的顺序、名字等写错了，均可能导致出错；
html里的标签忘记写类名、id了，而选择器用了这些漏写的类名、id等，样式自然不会生效。
后代选择器忘了写空格；
看看是不是有多余的空格比如： div.box{} 这类选择器会不会写成了 div .box{}；
把CSS、HTML网页文件都统一保存为UTF-8格式；即在头标签中添加<meta charset="UTF-8">
因为 一般网页里采用UTF-8的编码格式，而外部的CSS文件默认的是ANSI的编码格式，一般情况下是不会有问题。然而当CSS文件中包含中文注释，就可能会出现问题。
样式层叠问题
看看你的css优先级是否出现问题，优先级高的会把低的覆盖掉导致无法看到样式；
本身设置了样式，则从父级继承来的样式就不生效了；
css样式优先级排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性(同优先级时，后面的层叠前面的样式)；
排查顺序：
label默认为内联元素，元素前后没有换行符，并且不可以设置宽度。
如果要为label设置宽度，则需要改变label的display属性，使其变为一个块级元素。
方法如下：
1.增加inline-block属性值，将label标签变为行内块元素（css2.1新增）
{display:inline-block;}
label{width:100px;display:inline-block;}
3.添加好后页面上所有的label标签会变为100pxv
JavaScript中的混淆器
随着 AJAX 和富界面技术的发展，Javascript 在 Web 应用上的重要性越来越高，Javascript 代码的复杂性、功能和技术含量也越来越高，对Javascript 代码保护的需要也越来越迫切。
压缩 compress： 去掉空格，换行，注释等，格式紧凑，节约存储空间。
混淆 obfuscate/garble：替换变量名或方法名，让js不容易看懂。也做到了压缩的效果。
加密 encrypt：一般用eval方法加密，效果与混淆相似。也做到了压缩的效果。
我们可以通过工具进行混淆，通过工具也是目前最好的方式。推荐一个很好的混淆工具： JSObfuscator By Unest
————————————————
版权声明：本文为CSDN博主「刘亦枫」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/liuyifeng0000/article/details/105004732
css面试题@响应式布局如何实现
1为什么要使用响应式布局
响应式布局可以让网站同时适配不同分辨率和不同的手机端，让客户有更好
的体验。
2如何实现
方案一：百分比布局
利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有width，、height、padding、margin，其他属性比如border、 font-size不能用百分比来设置的
由于没办法对font-size进行百分比设置，所以用的最多就是对图片和大块布局进行百分比设置。
方案二：使用媒体查询 (CSS3@media 查询)
利用媒体查询设置不同分辨率下的css样式，来适配不同屏幕。
媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个分辨率下面都写一套css样式。
该布局的话适用于简单的网页，可以使移动端和pc端使用一套网址。从而节约成本。也方便后期的维护，bootcss就是用了CSS3的media来实现响应的 但是相对于复杂的网页就不适合了（如：淘宝，京东）等等
方案三.rem 响应式布局
rem布局的原理
rem：相对于根元素(即html元素)font-size计算值的倍数。
如 html的font-size为100px；那么2rem就为200px。
通俗的来讲的话rem就是通过JavaScript来获取页面的宽度，从而动态的计算rem。这样就会使不同分辨率下展现出相同的效果。
//代码展示
css面试题@响应式布局如何实现 1为什么要使用响应式布局 响应式布局可以让网站同时适配不同分辨率和不同的手机端，让客户有更好 的体验。 2如何实现 方案一：百分比布局 利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有width，、height、padding、margin，其他属性比如border、 font-size不能用百分比来设置的 由于没办法对font-size进行百分比设置，所以用的最多就是对图片和大块布局进行百分比设置。 方案二：使用媒体查询 (CSS3@media 查询) 利用媒体查询设置不同分辨率下的css样式，来适配不同屏幕。 媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个分辨率下面都写一套css样式。 该布局的话适用于简单的网页，可以使移动端和pc端使用一套网址。从而节约成本。也方便后期的维护，bootcss就是用了CSS3的media来实现响应的 但是相对于复杂的网页就不适合了（如：淘宝，京东）等等 方案三.rem 响应式布局 rem布局的原理 rem：相对于根元素(即html元素)font-size计算值的倍数。 如 html的font-size为100px；那么2rem就为200px。 通俗的来讲的话rem就是通过JavaScript来获取页面的宽度，从而动态的计算rem。这样就会使不同分辨率下展现出相同的效果。 //代码展示上述代码中 7.5为动态的值，根据设计图的宽度进行动态的改变。window.onresize的作用是：当页面的宽度或高度发生改变时，再次进行调用rem函数。
首先在写代码之前我们需要理清如何穿插图片呢？
可以让所有图片都float：left，用一个大盒子装进所有图片，在用一个小盒子显示图片，溢出图片就hidden，之后以每张图片的宽度来scrollLeft.
可以给每张图片一个name/id，用循环遍历所有图片
可以用float:left,但是除了我要显示的图片外，其他图片都hidden，之后每当我需要某张图片时，我就把它制定到某位置
…
在这里，我将用第二种方法，因为它很直观明了，我要哪张图片我就调哪张图片。
HTML部分：在div里面我装了一张图片，name:0, 这是为了在刚打开的时候，我们的页面是有东西的而不是一片空白。其他部分都好理解，不理解的可在下方评论。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<link rel="stylesheet" href="轮播图.css" />
<script src="轮播图.js">
</script>
</head>
<body>
<header>
<div id="oImg">
<!-- 轮流播放图片 -->
<img id="insert" src="img/轮1.jpg" name="0"/>
</div>
<!-- 左右切换图片 -->
<p id="left" οnclick="goBack()"></p>
<p id="right" οnclick="goForward()"></p>
<ul id="nav">
<!-- 指定某张图片 -->
<li id="1" οnclick="move(this)">1</li>
<li id="2" οnclick="move(this)">2</li>
<li id="3" οnclick="move(this)">3</li>
<li id="4" οnclick="move(this)">4</li>
<li id="5" οnclick="move(this)">5</li>
</ul>
</header>
</body>
</html>
CSS：
* { margin: 0 auto; padding: 0 auto; } header { width: 100%; height: 680px; position: relative; } img { width: 100%; height: 680px; } #nav { position: absolute; bottom: 5px; left: 30%; } #nav li { width: 30px; height: 30px; line-height: 30px; text-align: center; background: #ccc; font-size: 24px; border-radius: 9px; color: darkslategrey; font-family: 'Times New Roman', Times, serif; margin: 0 25px; float: left; cursor: pointer; list-style: none; } #nav li:hover { background: peru; } #left { width: 25px; height: 24px; left: 0; top: 50%; cursor: pointer; position: absolute; background: url(img/fx1.png); } #right { width: 25px; height: 24px; right: 0; top: 50%; cursor: pointer; position: absolute; background: url(img/fx2.png); }之后我们来看重中之重JS部分
JavaScript:
// 五张图片的url var oImg1 = "img/轮1.jpg"; var oImg2 = "img/轮2.jpg"; var oImg3 = "img/轮3.jpg"; var oImg4 = "img/轮4.jpg"; var oImg5 = "img/轮5.jpg"; // 把5张图片存入一个数组 var arr = [oImg1, oImg2, oImg3, oImg4, oImg5]; window.onload = function() { //刚加载时第一张图片1号背景颜色 document.getElementById("1").style.background = "peru"; run() } //轮播 function run() { timer = setInterval(function() { //随机点数字时能接着变化 var pic = document.getElementById("insert").name; var shade = document.getElementById("insert"); //如果为最后一张图片则重新循环 if (pic == 4) { pic = -1; } //点一个数字该数字背景颜色变化其余的不变 var aLi = document.getElementsByTagName("li"); for (var j = 0; j < aLi.length; j++) { aLi[j].style.backgroundColor = "#CCCCCC"; } var i = parseInt(pic); document.getElementById("insert").src = arr[i + 1]; document.getElementById("insert").name = i + 1; //数字随图片变化 switch (i) { case 0: var temp = '2'; break; case 1: var temp = '3'; break; case 2: var temp = '4'; break; case 3: var temp = '5'; break; case -1: var temp = '1'; break; } document.getElementById(temp).style.background = "peru" }, 5000) } //右箭头 function goForward() { var temp = document.getElementById("insert").name; var oBox = document.getElementById("insert"); var aLi = document.getElementsByTagName("li"); // 数字跟着图片一起变 for (var i = 0; i < aLi.length; i++) { aLi[i].style.backgroundColor = "#CCCCCC"; } switch (temp) { case "0": var n = '2'; break; case "1": var n = '3'; break; case "2": var n = '4'; break; case "3": var n = '5'; break; case "4": var n = '1'; break; } document.getElementById(n).style.background = "peru" // 向右移动图片 for (var j = 0; j < arr.length; j++) { if (j < 4) { if (temp == j) { oBox.src = arr[j + 1]; } } else { if (temp == 4) { oBox.src = arr[0]; } } } // 轮到最后一张图片时返回第一张 if (temp < 4) { oBox.name = parseInt(temp) + 1; } else { oBox.name = 0; } } //左箭头 function goBack() { var temp = document.getElementById("insert").name; var oBox = document.getElementById("insert") var aLi = document.getElementsByTagName("li"); // 图片移动时数字也跟着变 for (var i = 0; i < aLi.length; i++) { aLi[i].style.backgroundColor = "#CCCCCC"; } switch (temp) { case "0": var n = '5'; break; case "1": var n = '1'; break; case "2": var n = '2'; break; case "3": var n = '3'; break; case "4": var n = '4'; break; } document.getElementById(n).style.background = "peru" // 向左移动图片 for (var j = 0; j < arr.length; j++) { if (j > 0) { if (temp == j) { oBox.src = arr[j - 1]; } } else { if (temp == 0) { oBox.src = arr[4]; } } } // 轮到第一张图片时返回最后一张 if (temp > 0) { oBox.name = parseInt(temp) - 1; } else { oBox.name = 4; } } //指定图片 function move(num) { var oBox = document.getElementById("insert"); var temp = document.getElementById("insert").name; var aLi = document.getElementsByTagName("li"); for (var i = 0; i < aLi.length; i++) { aLi[i].style.backgroundColor = "#CCCCCC"; } document.getElementById(num.innerHTML).style.background = "peru" switch (num.innerHTML) { case "1": oBox.src = arr[0]; oBox.name = 0; break; case "2": oBox.src = arr[1]; oBox.name = 1; break; case "3": oBox.src = arr[2]; oBox.name = 2; break; case "4": oBox.src = arr[3]; oBox.name = 3; break; case "5": oBox.src = arr[4]; oBox.name = 4; break; } }JavaScript部分我写的很详细，仔细看的话是可以看懂的，主要分3个重要部分：
用src来调用每张图片并给每张图片一个name，这样方便后面的重复使用
为下方的数字按钮匹配图片，点击1跳到第1张图片，点击2跳到第2张图片…因为我把所有的图片都存在了一个数组里，所以在匹配的时候要注意数组0位置才是数字1指定的图片
可以来回翻页，当到达最后一张图片时，我再点击下一张图片又能返回到第一张图片了，亦或者当我点击到第一张图片时，再上一张图片又回到第五张图片了
效果如下：
大家有问题可以在下方评论哦，看到了会及时回复哒！
————————————————
版权声明：本文为CSDN博主「weixin_43964414」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43964414/article/details/104844041
CSS介绍
整理完了HTML的笔记，接下来就是CSS了。我们可以使用HTML构建稳定的结构基础，而页面的风格样式控制则交给CSS来完成。网页的样式包括各种元素的颜色、大小、线形、间距等等，这对于设计或维护一个数据较多的网站来说，工作量是巨大的。好在可以使用CSS来控制这些样式，这将大大提高网页设计和维护的效率，并且使网页的整体风格很容易做到统一。
CSS概述
CSS是英文Cascading Style Sheet的缩写，中文译为层叠样式表，也有人翻译为级联样式表，简称样式表。它是一种用来定义网页外观样式的技术，在网页中引入CSS规则，可以快捷地对页面进行布局设计，可以的控制HTML标记对象的宽度、高度、位置、字体、背景等外观效果。
CSS是一种标识性语言，不仅可以有效的控制网页的样式，更重要的是实现了网页内容与样式的分离，并允许将CSS规则单独存放于一个文档中， CSS文件的扩展名为“css”。
CSS3
CSS3标准早在1995年就开始制订， 2001年提上W3C研究议程，但是，10年来CSS3可以说是基本上没有什么很大的变化，一直到2011年6月才发布了全新版本的CSS3，目前，许多浏览器都广泛支持CSS3。
CSS3是CSS技术的一个升级版本，CSS3语言将CSS划分为更小的模块，在朝着模块化的方向发展。以前的版本是一个比较庞大而且比较复杂模块，所以，把它分解成为一个个小的简单的模块，同时也加入了更多新的模块。在CSS3中有字体、颜色、布局、背景、定位、边框、多列、动画、用户界面等等多个模块。
CSS的基本用法
CSS的使用规则由两部分组成：选择器和一条或多条声明。其基本基本语法如下：
选择器{ 属性1: 值; 属性2: 值; …
属性n: 值; }CSS的使用规则由两部分组成：选择器和一条或多条声明。其基本基本语法如下：
选择器{ 属性1: 值; 属性2: 值; …
属性n: 值; }
CSS属性
CSS的属性按照相关功能进行了分组，包含了字体、文本、背景、列表、动画等多个分组，这些属性的具体使用方法和示例将会在后续中提到。
在HTML文档中使用CSS的方法
根据CSS在HTML文档中的使用方法和作用范围不同，CSS样式表的使用方法分为三大类：行内样式、内部样式表和外部样式表，而外部样式表又可分为链入外部样式表和导入外部样式表。本节我们从四个分类来认识在HTML中使用CSS的方法。
行内样式
内部样式表
外部样式表
链入外部样式表
导入外部样式表
行内样式
行内样式（inline style），也叫内联样式，它是CSS四种使用方法中最为直接的一种，它的实现借用HTML元素的全局属性style，把CSS代码直接写入其中即可。
严格意义上行内样式是一种不严谨的使用方式，它不需要选择器，这种方式下CSS代码和HTML代码混合在一起，因此不推荐使用行内样式。行内样式的基本语法如下：
<标记 style="属性:值; 属性:值; …">
当单个文档需要特殊的样式时，应该使用内部样式表。内部样式表是将样式放在页面的head区里，这样定义的样式就应用到本页面中了，内部样式表使用style标记进行声明，是较为常用的一种使用方法。其基本语法如下：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
选择器1｛属性:值;…｝
选择器2｛属性:值;…｝
……
选择器n｛属性:值;…｝
</style>
</head>
<head>
<meta charset="utf-8" />
<title></title>
<link href="样式表路径" rel="stylesheet" type="text/css" />
</head>
其中：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@import url("样式表路径");
</style>
</head>
其中：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@import url("样式表路径");
</style>
</head>
记录仓促，遗漏之处日后补充，如有错误或不足之处，还望指正
————————————————
版权声明：本文为CSDN博主「狗狗狗狗狗乐啊」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44122062/article/details/104848745
CSS 函数大家多多少少都使用过，比如 rgb() , rgba() , linear-gradient(), radial-gradient() , 等。
今天小编给大家介绍几个特殊的 css 函数。
attr() 这是一个很强的函数，他可以让数据传输到你的 css 中，不需要借助其他东西。
用法：
<style>
div::before {
content : attr(data-abc);
}
</style>
<div data-abc='我是attr'></div>
calc() 用与动态计算长度值
给大家展示快速让子盒子在父盒子中居中的另一种方法：
<style>
.father {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
}
.child {
position: absolute;
/ 这里的 50px 为子盒子宽（高）的一半 /
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div class="father">
<div class="child"></div>
</div>
cubic-bezier() 定义了一个贝塞尔曲线(Cubic Bezier)。在这我就不多描述了，关于贝塞尔曲线，感兴趣的同学可以自行去了解。
var() 用于插入自定义的 css 属性值。
用法：和 sass，less 中定义变量的语法相似
<style>
:root {
--abc-- : red;
}
div {
width: 100px;
height: 100px;
background-color: var(--abc--);
}
</style>
<div></div>
counters() 这是一个古老但实用的属性，用与 css 中计数
用法：
counter-reset : item 1；
给定计数器 item 的初始值1，也可用与复位。参数 ‘item’ 为计数器的名称，后面的 ‘1’ 参数如果不写，默认是 0。
counter-increment: item 2;
设定当一个 item 计算器发生时计数器增加的值。参数 ‘2’为每次计数增长 2。
counters(item,’-’);
写在content中，显示计数器的值，‘-’ 设定俩计算器拼接时中间的符号为’-‘。它还有第三个参数，是list-style-type , 与 css 属性 list-style-type 是一模一样的。用与设定计数器以什么形式显示（阿拉伯数字，英文大小写，等）
<style>
ul {
counter-reset: item 1;
}
li:before {
counter-increment: item 2;
content: counters(item, "-");
}
</style>
<ul class="test">
<li> html
<ul>
<li> css</li>
<li> js</li>
</ul>
</li>
<li> Node</li>
<li> ts</li>
</ul>
HTML 样式
通过使用 HTML4.0，所有格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。
先来看一个例子，代码如下：
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
页面上显示为:
header 1
A paragraph.
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
外部样式表 link
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
link : 定义资源引用
rel : 告诉浏览器引用的是一个样式表文件
type : 文件类型
href : 文件地址
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
style : 定义样式定义
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
优先级说明
(外部样式)External style sheet < (内部样式)Internal style sheet < (内联样式)In
1.下列方法表示调用外部样式表的是？
A<style type="text/css">h1 {color: red }</style>
B<link rel="stylesheet" type="text/css" href="css/style.css">
C<p style="color: red; margin-left: 20px">style</p>
2.下面三种方法可以起到改变文档样式的是？
A<style type="text/css">h1 {color: red }</style>
B<link rel="stylesheet" type="text/css" href="css/style.css">
C<p style="color: red; margin-left: 20px"></p>
D以上三种都可以
————————————————
版权声明：本文为CSDN博主「html前端基础入门教程」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/htkms87/article/details/104600003
蓝蓝设计的小编 http://www.lanlanwork.com