css

表现 语言

前端三要素  ：HTML+CSS+JavaScript

1.CSS是什么

　　Cascadinng Style Sheet层叠级联样式表 

　　CSS表现：字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动

　　优势：内容和表现分离、网页结构表现统一，可以实现复用、样式十分丰富 、建议使用独立于Html的CSS文件、容易被搜索引擎收录

2.CSS怎么用（快速入门）

　　详见：D:\Develop\apache-maven-3.8.6-bin\repository\CSS\CSS  下的 index.html和CSSdemo

 　　 HTML和CSS分离，新建css文件就不用style，不过需要引用

　　D:\Develop\apache-maven-3.8.6-bin\repository\CSS\CSS\四种导入方式

 

3.CSS选择器（重点+难点）

 　　作用：选择页面上的某一个元素

　　D:\Develop\apache-maven-3.8.6-bin\repository\CSS\CSS\基本的选择器

　　标签选择器     ---》标签

　　类选择器     --》.类名 

　　id选择器     --》#id

层次选择器：

　　后代选择器  是空格 

　　子选择器     >

　　相邻兄弟选择器     +   (对下不对上)

　　通用选择器      ~    （对下 所有同级兄弟  ）

结构伪类选择器：D:\Develop\apache-maven-3.8.6-bin\repository\CSS\CSS\结构伪类选择器\结构伪类选择器.html

属性选择器 （常用的 ） ：标签【属性 】{}     ^=以什么开头  $=以什么结尾        =绝对的等于    *=包括 

　　D:\Develop\apache-maven-3.8.6-bin\repository\CSS\CSS\属性选择器\属性选择器.html

4.美化页面（文字、阴影 、超链接、列表）

   字体：

　　font-family：字体

　　font-size：字体大小 

　　font-weight：粗体 

   文本样式：

　　1.颜色

　　2.文本对齐方式：      文本居中 ：text-align：center（还有左右等等）

　　3.首行缩进：text-indent：2em（一个em是一个字）

　　4.行高  line-height：

　　5.文本装饰：超链接去下划线 text-decoration：none

　　6.划线：text-decoration：underline（下 划线） line-through（中划线）overline（上划线）

　　7.伪类     鼠标悬浮 a:hover      被激活的时候a:active

　　8.ul-li的 属性       list-style：  none去掉圆点  circle空心圆   decimal数字    square正方形

　　9.background-image默认是平铺的       background-repeat：repeat  -x横行    -y竖行    no-repeat不平铺

5.盒子模型

 

　　  margin：外边距   直接一个0（上下左右都是0）   0 auto(上下0 左右自适应)   0 0 0 0（上右下左顺时针各自代表）  还有margin-top   margin-buttom上下这些

　　padding:内边距   同上

　　border：边框  三个参数    粗细     样式   颜色        solid实线    dashed虚线

盒子的计算方式   比如   50*50  需要margin+padding+border+内容是  50*50　

6.圆角边框

　　border-radius：  0px（四个角都是这个）   0px  0px（左上，右下） 0px 0px 0px 0px(左上，右上，右下，左下)

阴影：box-shadow

7.display

 　　block块元素     inline-block    inline行内元素    none消失

8.浮动 

　　float：left   right     等等

　　clear：right右侧不允许有浮动         left左侧      both两侧都不允许       none  

9.父级边框塌陷的问题

　　1.增加父级元素的高度              超过高度就拉胯 

　　2.父级元素里面加一个空的div  清除浮动          代码中尽量不要添加空 div

　　3.overflow：hidden隐藏    

　　4.父级元素添加一个伪类 （推荐使用）       ：after{   content：''     ;      display ：block ； clear ：both}  相当于用代码的方式添加一个div

10.定位：

　　相对定位：

　　　　position ：relative相对定位 然后下一行 可以选择 top  left      right  bottom       单位px

　　　　相对于原来的位置，进行制定的偏移，相对定位的话  ，它仍然在标准文档流中 ，原来的位置会被保留

　　绝对定位： 

　　　　position ：absolute绝对定位

　　　　没有父级元素定位的前提下，相对于浏览器定位

　　　　假设父级元素存在定位，我们通常会相对于父级元素进行偏移 （父级要用 相对定位）

　　　　在父级元素范围内 移动.

　　　　相对于父级或者浏览器的位置，进行制定的偏移，绝对定位的话  ，它不在标准文档流中 ，原来的位置不会被保留

　　固定定位 ：

　　　　position：fixed

z-index：层级 

透明opacity：