HTML是 HyperText Mark-up Language 的⾸字母简写，意思是超⽂本标记语⾔，超⽂本指的是超链接，标记指的是标签，是⼀种⽤来制作⽹页的语⾔，这种语⾔由⼀嵌⼊式：通过style标签，在⽹页上创建嵌⼊的样式表。外联式：通过link标签，链接到外部样式表到页⾯中。如下⾯例⼦中在对应⽂件夹下新建，将样式写⼊其中。CSS的引⼊⽅式和JS很类似，有些⽹站为了增加⾸页的加载速度，会把⾸页的CSS和JS采⽤嵌⼊式。2、css⽂本设置常⽤的应⽤⽂本的css样式：color 设置⽂字的颜⾊，如： color:red;font-size 设置⽂字的⼤⼩，如：font-size:12px;font-family 设置⽂字的字体，如：font-family:'微软雅⿊';font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置⽂字倾斜 normal（标准） italic（斜体字体样式） oblique（倾斜字体样式）font-weight 设置⽂字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗 normal（标准 400）bold（粗体字体 700）bolder（跟粗的字体） lighter（更细的字体）font 同时设置⽂字的⼏个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/⾏⾼ 字体；如： font:normal12px/36px '微软雅⿊';line-height 设置⽂字的⾏⾼，如：line-height:24px;text-decoration 设置⽂字的下划线，如：text-decoration:none; 将⽂字下划线去掉 none（默认值）underline（⽂本下划线）overline（⽂本上划线）line-through（⽂本删除线）text-indent 设置⽂字⾸⾏缩进，如：text-indent:24px; 设置⽂字⾸⾏缩进24pxtext-align 设置⽂字⽔平对齐⽅式，如text-align:center 设置⽂字⽔平居中 left（排列在左侧，默认值）right（排列在右边）center（排列在中间）justify（实现两端对齐⽂本效果）⽂本⽔平居中 text-align:center ，那垂直中间呢？⼩技巧：让⽂本⾏⾼等于⽗级盒⼦⾼度，这样⽂字就会垂直居中。3、颜⾊表⽰法css颜⾊值主要有三种表⽰⽅法：1、颜⾊名表⽰，⽐如：red 红⾊，gold ⾦⾊2、rgb表⽰，⽐如：rgb(255,0,0)表⽰红⾊3、16进制数值表⽰，⽐如：#ff0000 表⽰红⾊，这种可以简写成 #f00CSS3中增加了新的颜⾊表⽰法，添加了透明度的概念rgba（新的颜⾊值表⽰法）1、盒⼦透明度表⽰法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;2、rgba(0,0,0,0.1) 前三个数值表⽰颜⾊，第四个数值表⽰颜⾊的透明度 颜⾊渐变⽐较常⽤的是透明度线性渐变：

线性渐变 - 透明度

为了添加透明度，我们使⽤ rgba() 函数来定义颜⾊结点。rgba() 函数中的最后⼀个参数可以是从 0 到 1 的值，它定义了颜⾊的透明度：0 表⽰完全透明，1 表⽰完

注意： Internet Explorer 9 及之前的版本不⽀持渐变。

4、选择器常⽤的选择器有如下⼏种：4.1、标签选择器标签选择器，此种选择器影响范围⼤，建议尽量应⽤在层级选择器中。举例：*{margin:0;padding:0}div{color:red}

4.2、id选择器通过id名来选择元素，元素的id名称不能重复，所以⼀个样式设置项只能对应于页⾯上⼀个元素，不能复⽤，id名⼀般给程序使⽤，所以不推荐使⽤id作为选择器。举例：#box{color:red}

4.3、类选择器通过类名来选择元素，⼀个类可应⽤于多个元素，⼀个元素上也可以使⽤多个类，应⽤灵活，可复⽤，是css中应⽤最多的⼀种选择器。举例：.red{color:red}.big{font-size:20px}.mt10{margin-top:10px}

....

....

4.4、层级选择器主要应⽤在选择⽗元素下的⼦元素，或者⼦元素下⾯的⼦元素，可与标签元素结合使⽤，减少命名，同时也可以通过层级，防⽌命名冲突。举例：.box span{color:red}.box .red{color:pink}.red{color:red}

....

4.5、组选择器多个选择器，如果有同样的样式设置，可以使⽤组选择器。举例：.box1,.box2,.box3{width:100px;height:100px}.box1{background:red}.box2{background:pink}.box2{background:gold}4.6、伪类及伪元素选择器常⽤的伪类选择器有hover，表⽰⿏标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插⼊内容。⼀般a标签⽤的⽐较多。.box1:hover{color:red}.box2:before{content:'⾏⾸⽂字';}.box3:after{content:'⾏尾⽂字';}CSS3中新增了⼀些选择器，实现起来更加灵活，详见XXX5、盒⼦模型5.1 盒⼦模型解释 元素在页⾯中显⽰成⼀个⽅块，类似⼀个盒⼦，CSS盒⼦模型就是使⽤现实中盒⼦来做⽐喻，帮助我们设置元素对应的样式。盒⼦模型⽰意图如下：把元素叫做盒⼦，设置对应的样式分别为：盒⼦的边框(border)、盒⼦内的内容和边框之间的间距(padding)、盒⼦与盒⼦之间的间距(margin)。5.2 设置边框

设置⼀边的边框，⽐如顶部边框，可以按如下设置：border-top-color:red; /* 设置顶部边框颜⾊为红⾊ */

border-top-width:10px; /* 设置顶部边框粗细为10px */

border-top-style:solid; /* 设置顶部边框的线性为实线，常⽤的有：solid(实线)

dashed(虚线) dotted(点线); */上⾯三句可以简写成⼀句：border-top:10px solid red;设置其它三个边的⽅法和上⾯⼀样，把上⾯的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。四个边如果设置⼀样，可以将四个边的设置合并成⼀句：border:10px solid red;5.3 设置内间距padding设置盒⼦四边的内间距，可设置如下：padding-top：20px; /* 设置顶部内间距20px */

padding-left:30px; /* 设置左边内间距30px */

padding-right:40px; /* 设置右边内间距40px */

padding-bottom:50px; /* 设置底部内间距50px */上⾯的设置可以简写如下：padding：20px 40px 50px 30px; /* 四个值按照顺时针⽅向，分别设置的是 上 右 下 左

四个⽅向的内边距值。 */padding后⾯还可以跟3个值，2个值和1个值，它们分别设置的项⽬如下：padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */

padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/

padding：20px; /* 设置四边内边距为20px */5.4 设置外间距margin外边距的设置⽅法和padding的设置⽅法相同，将上⾯设置项中的'padding'换成'margin'就是外边距设置⽅法。5.5 盒⼦模型的尺⼨按照下⾯代码制作页⾯：

通过上⾯的页⾯得出结论：盒⼦的width和height设置的是盒⼦内容的宽和⾼，不是盒⼦本⾝的宽和⾼，盒⼦的真实尺⼨计算公式如下：盒⼦宽度 = width + padding左右 + border左右盒⼦⾼度 = height + padding上下 + border上下这⾥要特别提醒下，有的框架，例如bootstarp中 width=内容+padding左右，padding会挤压内容的⼤⼩。5.6 关于margin设置的⼀些问题margin相关技巧

1、设置元素⽔平居中： margin:x auto;（⼀般是指块元素）2、margin负值让元素位移及边框合并外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成⼀个外边距。合并后的外边距的⾼度等于两个发⽣合并的外边距的⾼度中的较⼤者。解决⽅法如下：1、使⽤这种特性2、设置⼀边的外边距，⼀般设置margin-top3、将元素浮动或者定位margin-top 塌陷在两个盒⼦嵌套时候，内部的盒⼦设置的margin-top会加到外边的盒⼦上，导致内部的盒⼦margin-top设置失败，解决⽅法如下：1、外部盒⼦设置⼀个边框2、外部盒⼦设置 overflow:hidden3、使⽤伪元素类：.clearfix:before{ content: ''; display:table;}如何消除margin-top塌陷的例⼦：

6、css元素溢出当⼦元素的尺⼨超过⽗元素的尺⼨时，需要设置⽗元素显⽰溢出的⼦元素的⽅式，设置的⽅法是通过overflow属性来设置。overflow的设置项：

1、visible 默认值。内容不会被修剪，会呈现在元素框之外。2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。3、scroll 内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容。4、auto 如果内容超过⽗元素尺⼨时，则浏览器会显⽰滚动条以便查看其余的内容。5、inherit 规定应该从⽗元素继承 overflow 属性的值。

2023年6月21日发(作者：)

CSS基础知识点详细总结（⼀）CSS是 Cascading Style Sheets 的⾸字母缩写，意思是层叠样式表。⽬的是为了让⽹页元素的样式更加丰富，也为了让⽹页的内容和样式能拆分开，CSS由此思想⽽诞⽣，有了CSS，html中⼤部分表现样式的标签就废弃不⽤了，html只负责⽂档的结构和内容，表现形式完全交给CSS，html⽂档变得更加简洁。⽬录1、基本语法及引⽤⽅法1.1基本语法css的基本定义⽅法是：选择器 { 属性:值; 属性:值; 属性:值;}选择器是将样式和页⾯元素关联起来的名称，属性是希望设置的样式属性每个属性有⼀个或多个值。选择器有很多种，下⾯有介绍。例如：div{ width:100px; height:100px; color:red }1.2三种引⽤⽅法内联式 ：通过标签的style属性，在标签上直接写样式。