CSS学习笔记

创建2021-03-28更新2021-08-30阅读时间14m

来自博客的提炼总结

CSS字体属性和文本属性

CSS的单位

html中的单位只有一种，那就是像素px
CSS中的单位是必须要写的，因为它没有默认单位。

相对单位

px：像素
em：印刷单位相当于12个点
%：百分比，相对周围的文字的大小

电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样

行高、字号，一般都是偶数。这样可以保证，它们的差一定偶数，就能够被2整除。

设置行高 = 盒子高，就可以保证单行文本垂直居中。只适用于单行文本垂直居中

多行文本垂直居中，还需要计算盒子的padding。
（盒子高度-总行高）/2

vertical-align属性可用于指定行内元素（inline）、
行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。
主要是用于图片、表格、文本的对齐。

font:12px/30px “Times New Roman”,”Microsoft YaHei”,”SimSun”;

<img src="3.jpg" style="filter:gray()">

导航栏制作（简易）

略

背景属性

常见的背景属性

  • background-color:
    background-image:
    background-repeat:
    background-position:
    background-attachment:

CSS3新增

  • background-origin-图片原点位置
    background-clip-背景裁切
    background-size-调整尺寸

background 综合属性
我们可以用小属性层叠掉大属性。

渐变：background-image

  • 线性渐变
    径向渐变
    重复渐变
1
2
3
4
5
6
7
8
 /* 裁剪出圆形区域 */
 clip-path: circle(50px at 100px 100px);
 transition: clip-path .4s;
 
.div1:hover{
      /* 鼠标悬停时，裁剪出更大的圆形 */
      clip-path: circle(80px at 100px 100px);
  }

虽然clip-path不是背景属性，但这个属性非常强大，但往往会结合背景属性一起使用，达到一些效果。

CSS样式表和选择器

CSS 的作用就是给 HTML 页面标签添加各种样式，定义网页的显示效果。
CSS 将网页内容和显示样式进行分离，提高了显示功能。

语法

  • 选择器{ 属性名: 属性值; 属性名: 属性值; }
    css 对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。
    冒号和属性值之间可以留一个空格（编程习惯的经验）。
    如果一个属性有多个值的话，那么多个值用空格隔开。

CSS 和 HTML 结合方式三：引入外部样式表 css 文件
采用<link>标签。
采用 import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;

基本选择器：-对应JS

  • 标签选择器
    ID 选择器
    类选择器
    通用选择器（通配符）：针对所有的标签都适用（不建议使用）

不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。
每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

尽可能的用 class，除非极特殊的情况可以用 id。
id 是 js 用的。也就是说，js 要通过 id 属性得到标签，
另一层面，我们会认为一个有 id 的元素，有动态效果。

1
2
3
<p class="lv da">段落1</p>
<p class="lv xian">段落2</p>
<p class="da xian">段落3</p>

通用选择器，将匹配任何标签。不建议使用，IE 有些版本不支持，大网站增加客户端负担。
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

高级选择器：

  • 后代选择器：用空格隔开
    交集选择器：选择器之间紧密相连
    并集选择器（分组选择器）：用逗号隔开
    伪类选择器

浏览器的兼容性问题

子代选择器，用符号>表示

IE7 开始兼容，IE6 不兼容。

序选择器

IE8 开始兼容；IE6、7 都不兼容
ul li:first-child

下一个兄弟选择器

IE7 开始兼容，IE6 不兼容。
这种选择器作用不大。

伪类

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

伪类选择器分为两种。

  • 静态伪类只能用于超链接的样式

    :link 超链接点击之前
    :visited 链接被访问过之后

  • 动态伪类：针对所有标签都适用的样式

    :hover “悬停”：鼠标放到标签上的时候
    :active “激活”： 鼠标点击标签，但是不松手时。
    :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

超链接的四种状态

  • :link “链接”：超链接点击之前
  • :visited “访问过的”：链接被访问过之后
  • :hover “悬停”：鼠标放到标签上的时候
  • :active “激活”： 鼠标点击标签，但是不松手时。
  • 如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。

CSS样式表的继承性和重叠性

继承性

有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
继承性是从自己开始，直到最小的元素。-起点

关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
关于盒子、定位、布局的属性，都不能继承。

层叠性：计算权重

层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！

选择上了，数权重，(id的数量，类的数量，标签的数量)
如果权重一样，谁写在后面听谁的。

没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。
如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。

CSS样式表的冲突的总结
对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
外部样式表的ID选择器 > 内嵌样式表的标签选择器

总结：就近原则。ID选择器优先级最大。

对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：定义的CSS样式表中，谁最近，就用谁。
对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html文件中，引用样式表的位置越近，就用谁。

!important标记：优先级最高
!important提升的是一个属性，而不是一个选择器**
!important无法提升继承的权重，该是0还是0
!important不影响就近原则
不影响。远的，永远是远的。不能给远的写一个important，干掉近的。

IE6层面兼容的选择器

1
2
3
4
5
6
7
p
#box
.spec
div p
div.spec
div,p
*

IE7能够兼容

1
2
div>p
h3+p

IE8能够兼容

1
2
ul li:first-child
ul li:last-child

盒子模型

盒子模型，英文即box model。无论是div、span、还是a都是盒子。

图片、表单元素一律看作是文本，它们并不是盒子。比如说，一张图片里并不能放东西，它自己就是自己的内容。

一个盒子中主要的属性就5个：width、height、padding、border、margin。

CSS盒模型和IE盒模型的区别：
在 标准盒子模型中，
width 和 height 指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

IE盒子模型中，
width 和 height 指的是内容区域+border+padding的宽度和高度。

浏览器给<body>默认的margin大小是8个像素

如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。
因为盒子变胖了是灾难性的，这会把别的盒子挤下去。

border就是边框。边框有三个要素：像素（粗细）、线型、颜色。

如果公司里面的设计师是处女座的，追求极高的页面还原度，那么不能使用css来制作边框。就要用到图片，就要切图了。

利用 border 属性画一个三角形（小技巧）

1
2
3
4
5
6
7
8
9
//直角三角形
div{
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top-color: red;
	border-bottom: none;
}

利用 border 属性画一个三角形（更推荐的技巧）

宽高为0，设定边框，左右为透明。

1
2
3
4
5
6
7
8
9
//等边三角形
.div1{
	width: 0;
	height: 0;
	border-top: 30px solid red;
	/* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
}

浮动

标准文档流-必须从上而下

标准文档流的特性

（1）空白折叠现象：
无论多少个空格、换行、tab，都会折叠为一个空格。

（2）高矮不齐，底边对齐：

（3）自动换行，一行写不满，换行写。

行内元素和块级元素

h1标签是块级元素，占据了整行，span标签是行内元素，只占据内容这一部分。

行内元素和块级元素的区别：（非常重要）
行内元素：

  • 与其他行内元素并排；
  • 不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

  • 霸占一行，不能与其他任何元素并列；
  • 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。 - （无宽度）

行内元素和块级元素的分类：