CSS自我总结（新手入门）

CSS基础认知

外链式

内嵌式

行内式

基础选择器

标签选择器

• 标签选择器通常用于大量标签样式的引入
• 缺点：容易造成样式污染
• 例：p{ }

类选择器

• 类选择器在代码中最为常用
• 一个标签可以有多个类名，类名之间通过空格隔开
• 例：.a1{ }

id选择器

• 唯一性

  • id相当于是身份证号码，在一个页面中是唯一的，不可重复！

• id一般配合js使用，除非特殊情况，否则不使用id设置样式

• 例：#a1{ }

通配符选择器

• 通常用于清除全局样式
• 其他情况一般不使用通配符选择器，因为比较消耗浏览器的性能
• 例：

 margin:0;
 padding:0;
 font:15px/1.5 微软雅黑；//设置默认字体，避免被用户修改浏览器字体大小而造成页面出错事故
}

字体样式

字体大小

• font-size

  • 一般最小12px，正常16px

• 快捷键(fz)

字体粗细

• font-weight

  • 正常

    • normal（400）

  • 加粗

    • bold（700）

• 快捷键(fw)

字体样式

• font-style

  • 正常（ normal）

  • 倾斜（italic）

• 快捷键(fs)

字体类型

• font-family

  • 微软雅黑，宋体

• 可设置多种字体

  • 例：font-family: 微软雅黑，宋体;
  • 从左到右按照顺序查找，如果电脑未安装该字体，则查找下一个。如果都不支持则用浏览器默认字体

font属性连写问题

• font: style weight size family

• 开发中不常用！不常用！不常用！

• 有严重的书写顺序问题

  • 位置调换代码不生效

• 而且有两个必写属性，size和family

  • 未写这两个任意一个，代码不生效

文本样式

文本缩进

• text-indent

  • 单位一般用em

• 不是独占一行的元素设置text-indent无效

• 快捷键(ti)

文本水平对齐

• text-align

  • left
  • center
  • right

文本修饰

• text-decoration

  • 下划线

    • underline

  • 删除线

    • line-through

  • 去除修饰

    • none
    • 常用于来清除a标签默认的下划线

拓展：水平居中方法的小总结

• text-align: center

  • 文本
  • span标签,a标签
  • input标签，img标签
  • 注意点：如果需要让以上元素水平居中，此时直接以上元素的父元素设置
  • 开发中通常用来设置行内元素和行内块元素居中

• margin: 0 auto;

  • div,p,h (盒子)
  • 注意点：直接给当前元素设置的
  • 开发中通常用来设置块级元素居中

行高

• line-height

  • 文字大小的倍数

    • 直接写数字

  • 数字＋px

• 常见应用

  • 设置行高等于父元素的高度，让单行文本垂直居中
  • 设置line-height: 1;能够取消上下间距，精准布局会使用

颜色取值

• 十六进制表示法

  • 黑色

    • #000

  • 白色

    • #fff

  • 红色

    • #f00

  • 绿色

    • #0f0

  • 蓝色

    • #00f

Chrome调试工具

• 打开方式

  • 右击→检查

  • 看哪里

    • elements：显示当前页面的html结构
    • styles：显示当前标签的样式

• 选择元素

  • 方法一：在左侧elements中点击需要调试的元素
  • 方法二：点击左上角按钮后，直接在网页中点击需要调试的元素

• 功能

  • 控制样式

    • 1、修改属性值

      • 直接点击属性值，直接修改

    • 2、添加属性

      • 在上一个属性的分号后点击一下，直接添加

    • 3、控制样式生效

      • 点击属性前的小框即可

    • 注意点

      • 调试工具仅仅只是当前的调试效果，需要在代码中修改才能永久保留

  • 特殊情况

    • 1、样式上有删除线

      • 含义

        • 样式失效

      • 原因

        • 1、样式被注释了
        • 2、样式被覆盖了

    • 2、样式前有小三角形

      • 含义

        • 样式报错

      • 原因

        • 1、属性值后没写分号
        • 2、出现中文标点
        • 3、属性名或者属性值单词拼错

复合选择器

作用：

• 更加精确的选中我们要修改的标签元素，避免样式污染

后代选择器

• 例：div p{ }
• 能选中儿子，孙子，重孙子...

子代选择器

• 例：div>p{ }
• 只能选中儿子

并集选择器

• 例：div,p,a{ }
• 作用提高开发效率，减少冗余代码

交集选择器

• 例：p.a1{ }
• 两个选择器写在一起，没有任何多余的符号
• 必须同时满足这两个选择器才能生效

伪类选择器

• 例：:hover{ }

  • 鼠标悬停效果

背景

背景颜色

• background-color

  • 默认色是透明色

    • transparent

  • 设置背景颜色透明度rgba

    • 鼠标悬停在背景色上，拉动滑块
    • 取值0-1

背景图片

• background-image: url();

  • 开发主要应用场景

    • 页面不经常更换的图片，装饰性的小图片

背景平铺

• background-repeat

  • repeat

    • 默认平铺

  • no-repeat

    • 不平铺

  • repeat-x

    • 仅在x轴平铺

  • repeat-y

    • 仅在y轴平铺

背景位置

• background-position: 水平位置 垂直位置

  • left
  • top
  • right
  • top
  • bottom
  • 或者用像素：px
  • 默认值是center

背景属性连写

• background

  • 最常用！因为属性连写没有任何先后顺序
  • 一般写法：背景颜色 路径 平铺 位置
  • 注意：

background-color: green;
background: url(./images/1.jpg) no-repeat;

由于CSS有层叠性，后面写的相同样式的属性会覆盖前面的属性，默认值的透明色会覆盖前面的绿色！！！

元素显示模式

块级元素

• 常用的：div,p,h1,li...

• 特点

  • 独占一行
  • 默认宽度与父元素等宽 高度由内容撑开
  • 可以自由设置宽高

• 转换方式

  • display：block;

行内元素

• 常用的：span,a

• 特点

  • 一行显示多个
  • 默认宽高由内容撑开
  • 不能自由设置宽高

• 转换方式

  • display：inline;

行内块元素

• 常用;input,textarea

• 一行显示多个

• 可以自由设置宽高

• 转换方式

  • display：inline-block;

img标签

• 特殊标签

  • 本质是行内元素inline
  • 却有行内块元素的所有特点

CSS的三种特性

层叠性

• 后面设置的样式会覆盖掉前面的样式
• 注意:属性连写中如果省略的值，会自动设置一个默认值代替

继承性

• 子元素会继承父元素的某些样式

• 注意

  • a标签不能继承父元素的颜色
  • 标题标签不能继承父元素的字体大小和粗细

优先级

• 选择器的优先级

  • 继承<通配符<标签1<类(伪类)10<id100<行内样式1000<!importent 无穷大

  • 如果优先级相同，执行层叠性

  • 开发中最常用的是类和伪类的权重比较

  • 为什么开发中很少用id选择器和行内样式

    • 因为设置的权重过高，别的开发者修改你的样式会更加困难

优先级

继承<通配符<标签选择器<(伪)类选择器<id选择器<行内样式<!important

• 标签选择器
  • 权重：1
• (伪)类选择器
  • 权重：10
• id选择器
  • 权重：100
• 行内样式
  • 权重：1000
• !important
  • 权重：无穷大

权重的叠加

• 应用在复合选择器中

盒子模型

content

• 内容

padding

• 内边距

• padding-left

• padding-top

• padding-bottom

• padding-right

• padding连写

  • 从上开始的顺时针，没有设置的值看对面

border

• 边框

• 分开写法（了解）

  • border-width

    • 线宽

  • border-style

    • 线型

    • solid

      • 实线

    • dashed

      • 虚线

    • dotted

      • 点线

  • border-color

    • 边框颜色

• border

  • border: 1px solid #000;

• border-top

• border-bottom

• border-left

• border-right

  • bdr

• 做三角形简单方法

width: 0;
height: 0;
border-top: 300px solid green;
border-left: 300px solid pink;
border-bottom: 300px solid red;
border-right: 300px solid #ccc;

margin

• 外边距

  • 控制的是盒子和盒子之间的距离

• margin-top

• margin-bottom

• margin-left

• margin-right

• margin连写

  • 从上开始的顺时针，没有设置的值看对面

• 应用

  • margin: 0 auto;
  • 让有宽度的块级元素水平居中

分类

• 标准盒子模型、W3C盒子模型

  • box-sizing:content-box
  • 设置的宽度和高度是针对于content内容的
  • 设置内边距和边框会撑开盒子

• css3新增盒子模型：ie盒子模型、怪异盒子模型

  • box-sizing: border-box;

    • 通常设置给*

  • 设置的宽度和高度包含content 和 padding 和 border

  • 即设置此属性后改变内边距和边框不会撑大盒子

小拓展

清除输入框的外轮廓

• 就是点击输入框会变颜色的那个框框
• 在border的外面,外轮廓不占用位置
• outline: none;

外边距层叠合并和坍塌问题

前提：两个标签必须是块级元素

并列（兄弟）关系

• 外边距层叠问题

  • 上面盒子设置外边距，下面盒子设置上边距，最终会取其中最大值作为两盒子之间距离

嵌套（父子）关系

• 坍塌问题

  • 子元素设置一个上外边距会带着父元素一起移动

  • 解决办法

    • 父元素添加border边框

      • 开发中并不建议，因为边框大小很可能会影响总体样式布局

    • 父元素添加内边距

    • 父元素 添加overflow：hidden

      • w3c推荐

    • 父元素转换成为行内块元素

结构伪类选择器（只有一个冒号的）

li:nth-child(n){}

• n

  • 选中所有li标签

• n改成数字

  • 选中第n个li标签

• n改成n+2，n和2的位置不能改变

  • 选中从第2个开始到最后的所有li标签

• n改成-n+2，n和-2的位置不能改变

  • 选中第2个以及前面所有li标签

• n改成2n（或even）

  • 选中所有偶数行li标签

• n改成2n+1（或odd）

  • 选中所有奇数行li标签

li:first-child{}

• 选中第一个孩子

li:last-child{}

• 选中最后一个孩子

dd：nth-of-type

• 只给指定类型的元素编号
• 开发中通常都在自定义列表和非列表结构中使用

not（）选择器

• 设置非p标签的背景色：

:not(p)
{ 
background-color: #ff0000;
}

伪元素（有两个冒号的）

目的

• 精简代码结构

语法

• ::before

  • 在标签内容的前面添加

• ::after

  • 在标签内容的后面添加

只有双标签才能使用before和after伪元素

注意

• 必写属性

  • content："";

• 默认是行内元素

• 权重为1

浮动

作用

• 想让多个元素在一行上显示的时候

语法

• float: left
• float: right

特点

• 1. 浮动的元素会脱离标准流: 不占之前的位置 2. 一个元素浮动了，其余的兄弟元素也要浮动(一浮全(兄弟)浮) 3. 浮动的父元素可以设置尺寸限制浮动的范围 4. 浮动的块级元素会失去独占一行的特性，默认的宽高由内容撑开 5. 行内元素浮动，会隐式转换成块级元素，无需db dib可以直接设置宽度和高度

清除浮动

目的作用

• 清除浮动带来的负面影响

  • 1.因为子元素浮动后脱离了标准流，不再占用之前的位置，从而导致撑开没有设置高度的父元素，使得父元素高度变成0，继而导致后续结构向上排列，所以开发希望清除这种负面影响

解决办法

• 额外标签法

  • 在父盒子最后添加一个div标签，在标签行内样式写上style="clear-both"

• 单伪元素清除浮动（开发常用）

• 双伪元素清除浮动

• overflow：hidden

扩展

滤镜效果

• filter: grayscale(1);
• 原彩0~1黑白 (0%~100%)

透明度

• 元素及元素内部整体的透明度
• opacity:0;
• 透明 0~1 不透明 (0%~100%)

定位 position

static

• 默认值，标准流

relative

• 相对定位
• 不脱标，占用位置
• 参考自身位置移动

absolute

• 绝对定位

• 脱标，不占位置

• 参考最近一层有相对定位(绝对定位)的父元素移动

  • 子绝父相，子绝父绝

fixed

• 固定定位
• 脱标，不占位置
• 参考浏览器窗口移动，不随滚动条移动

边偏移

• left
• top
• right
• bottom

层级排序

• 标准流 < 浮动 < 定位

• z-index

  • 数值越大优先级越高
  • 只有有定位属性的元素才能设置z-index

溢出和隐藏

溢出

• overflow属性

  • overflow：visible

    • 默认值

  • overflow：hidden

    • 溢出隐藏

    • 应用场景

      • 块元素坍塌问题
      • 清除浮动
      • 超出裁剪
      • 让父元素自动获取高度
      • 让文字溢出变成省略号，并强制一行显示

white-space:nowrap //强制一行显示
overflow:hidden;
text-overflow:ellipsis;	//溢出变成省略号

• 让文字溢出变成省略号，并强制多行显示

display: -webkit-box;
-webkit-line-clamp: 2;  //数字代表行数
-webkit-box-orient: vertical;
overflow: hidden;

• overflow：auto

  • 如果溢出则显示滚动条，否则不显示滚动条

• overflow：scroll

  • 无论内容是否溢出都显示滚动条

元素隐藏且不占位置

• display：none；

  • 元素隐藏

• display：block

  • 元素显示

• display:none;display:block;不参与过渡效果

元素隐藏但占用位置

• visibility:hidden;

  • 元素隐藏

• visibility:visible

  • 元素显示

鼠标样式

cursor

• default

  • 默认值，白色小箭头

• pointer

  • 小手
  • 常用于button按钮

• not-allowed

  • 禁止符号
  • 常配合表单元素disabled禁用表单属性使用

• wait

  • 等待

• progress

  • 进程中。。。

边框圆角

border-radius

• border-radius: 左上 右上 右下 左下

• 开发常用

  • 圆形

    • 给正方形添加属性 border-radius:50%

  • 胶囊形

    • 给长方形添加属性 border-radius:高度的一半(px)

  • 椭圆形

    • 给长方形添加属性 border-radius:50%

行内块和行内元素的垂直对齐

vertical-align

• 基线对齐

  • baseline 默认值

• 上对齐

  • top

• 中线对齐

  • middle

• 下对齐

  • bottom