关于前端CSS的总结

Posted 2021-02-09 zhuchaoli

• CSS语法

　　CSS语言的基本单位是样式声明：propertyName : value ;

　　CSS语言的使用方式： 1、把CSS样式声明作为html标签的style属性值。2、使用CSS选择器

• CSS常用值

　　颜色值

　　颜色名：red、blue等表示颜色的英文单词

　　RGB颜色：rgb(255,0,0)   由十进制的三个颜色分量组成，分量取值范围[0,255]

　　RGBA颜色：rgba(255,0,0,0.5) 由十进制的三个颜色分量和一个透明度分量组成，分量取值范围0~255，透明度取值范围0~1

　　十六进制颜色：#FF0000    FF表示红色分量，中间两个0表示绿色分量，最后两个0表示蓝色分量

　　长度值

　　px：像素，可以简单理解为屏幕上的一个点的长度

　　%：百分比

　　em：一个字符的长度

　　in：英尺（不常用）

　　cm：厘米（不常用） 

　　mm：毫米（不常用）

　　枚举值

　　Eg:text-align（文本对齐方式）: 枚举值(left、right、center..)

• 文本样式

　　用来控制文本的显示效果，以下是常用样式属性

　　color（文本的颜色):颜色值(颜色名、RGB / RGBA 颜色、十六进制颜色..)

　　text-indent（文本缩进）: 长度值(长度单位：px、%、em、in、cm、mm..)

　　text-align（文本对齐方式）: 枚举值(left、right、center..)

　　word-spacing（单词间隔）:长度值

　　letter-spacing（字符间隔）:长度值

　　text-decoration（文本修饰）:枚举值(none、underline、overline、line-through..)

• 字体样式

　　font-family 设置字体名称

　　font-size 设置字体的尺寸

　　font-style 设置字体风格

　　font-weight 设置字粗细

　　font  可以把上面的样式属性合并起来写（值是有序的，使用空格分隔）（font-weight  font-size  font-family）

• CSS样式特点

　　有的样式属性子标签可以从父标签那里继承过来，有的则不能

　　一个标签可以同时应用若干个样式属性

　　一个标签的最终显示效果，是由若干个样式属性 层叠（叠加）到一起形成的

• CSS选择器

　　如果不使用元素style属性值的方式，CSS要想控制元素的样式，就先得定位、找到想要控制的元素

　　CSS使用选择器语法来定位元素，选择器有多种类型，并且选择器之间可以通过多种形式组合在一起使用，CSS选择器灵活、精准、而且强大！

　　选择器类型：标签选择器(tipName )、id选择器(#tipId)、类选择器(.tipClass)、属性选择器()、伪类选择器

　　选择器可书写在HTML的<style>标签内，语法格式为

　　<style  type="text/css">

     　　 选择器1{  样式声明列表   }

      　　选择器2{  样式声明列表   }

　　</style>

　　标签选择器：标签名{样式}

　　Id选择器：#Id名{样式}  注：Id名要以字母或下滑线开头，Id选择器的优先级高于标签选择器

　　类选择器：.class名{属性值}  注：class名要以字母或下滑线开头，他比id选择器用的更为广泛，因为class名可以重复，但是Id名是唯一的

• 属性选择器

　　语法:[属性名]{样式}

　　[attr]选择有attr属性的标签

　　[attr=val]选择以attr属性值为val的标签

　　[attr^=val]选择以attr属性值以val开头的标签

　　[attr$=val]选择以attr属性值以val结尾的标签

　　[attr*=val]选择以attr属性值包含val的标签

　　属性选择器不仅可以应用到标签自带的属性，也可以用到自定义属性，属性值val必须要以字母或者下划线组成

• 伪类选择器(用来定义处在特定状态下的元素)

　　:link 没有被点击过的超链接

　　:visited 被点击过的超链接

　　:hover 鼠标经过的超链接

　　:focus 获得集点的标签

　　:first-child 第一个子标签

　　:last-child 最后一个子标签

　　:empty 没有内容的标签

　　:enabled 可以操作的标签

　　:disable 不可以操作的标签

　　:checked 处于选择状态的标签

• 复合选择器

　　selector1空格selector2  在选择1的元素中，使用2筛选其后代元素

　　selector1>selector2 在选择1的元素中，使用2筛选其子元素

　　selector1~selector2在选择1的元素中，使用2筛选其后续兄弟元素（选择1选中的元素不会有什么影响）

　　selector1+selector2 在选择1的元素中，使用2筛选其后续紧邻的兄弟元素

　　selector1,selector2各个选择器并集（两个选择器选择的元素合并在一起）

　　selector1(没有空格)selector2 各个选择器的交集（复合后可识别才可以这样使用）

• 盒子定位

　　通过对每个盒子的外边距、边框、内边距、内容、位置的精确控制，CSS可以实现复杂而精准的页面布局，学习定位之前需要掌握以下几个概念：

　　块级元素：这类元素默认有换行效果，典型的如div

　　行内元素：这类元素默认没有换行效果，典型的如span

　　文档流：HTML元素在页面上显示时，根据在源码中出现的次序，按照从上到下、从左到右、块级元素独占一行、行内元素不换行的规则依次排列。文档流中的元素会对后续元素的位置产生影响

　　盒子定位共有四种方式：相对定位、绝对定位、固定定位、浮动。

　　盒子模型：为了更好的控制页面效果，css定义了盒子模型， 一个HTML元素就是一个盒子

• 相对定位

　　相对定位：元素在显示时，相对自己本来的位置向下或者向右偏移指定数值，但元素本身并不脱离文档流，也就说后面的元素还认为此元素在原来的位置，所以会排列在此元素原本位置的后面（但会造成覆盖）

 

• 绝对定位

　　绝对定位：以最近的已经定位的祖先元素为基准进行偏移（如果没有这样的祖先元素则以浏览器窗口为基准），元素本身脱离文档流，也就说后面元素认为此元素不存在，所以会占据此元素原来的位置（但会造成覆盖，脱离文档流后就不具有块级元素独占一行的性质了）

 

• 固定定位

　　和绝对定位类似也会脱离文档流，但总是以浏览器窗口为基准，而且位置不会随着滚动条移动

 

• z-index层级样式属性

　　由于元素定位后会产生元素的叠加覆盖情况，为了灵活控制叠加部分的显示，CSS提供了z-index层级样式属性

　　z-index只能取整数，默认为0，可正可负

　　z-index值大的元素会覆盖值小的元素

　　z-index只对进行了定位的元素有效

 

• 盒子浮动

　　如果一个盒子向左浮动(float: left;)：这个元素会成为行内元素；它后面的块级元素会失去一半的独占一行的特性，即左边紧靠在浮动元素后面，右边延伸到行尾。向右浮动和向左浮动效果类似，可以使用clear: both;清除浮动效果对后面盒子的影响

 

• 如何获得元素在页面中的坐标

　　HTML所有的元素都具有下面这5个只读属性

　　offsetLeft：元素边框距页面左边界的距离

　　offsetTop：元素边框距页面上边界的距离

　　offsetWidth ：元素的宽度（左右边框的跨度）

　　offsetHeight：元素高度（上下边框的跨度）

　　offsetParent ：返回已经定位的祖先元素，如果没有则返回body元素或者null

　　注意：object.style.top是可读可写属性，他们效果都是一样的

• Offsettop和style.top的区别

　　1、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。(这里的style.top是读的css样式中的top:20px;这种形式的值,所以是带有"px"的)

　　2、offsetTop 只读，而 style.top 可读写。(style.top赋值切记加上"px",测试过发现IE下用数值是可以的,但其它主流chrome,opera,ff,safari都不能识别,所以必须加"px")

　　3、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

　　注：offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也都是类似区别。

• 使用css的五种方式

　　行内样式：写在元素的style属性里

　　内嵌样式：写在<style>元素内

　　导入样式：在<style>元素内开头使用@import url(index.css);方式引入，这种方式实际上算是内嵌样式

　　链接样式：使用<link>元素引入css文件，如 <link type="text/css" rel="stylesheet" href="c1.css" />

　　默认样式：几乎每一种html标签都有默认的css样式

　　当某个样式属性出现多次时，就需要使用优先级规则解决产生的矛盾：

　　1、不同引入方式的优先级：行内 > 内嵌、导入和链接 > 默认样式

　　2、同一种引入方式或相同优先级的引入方式中，后出现的会覆盖先出现的