CSS学习总结

CSS学习总结

一.CSS基本语法

CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:

• 选择器：要修饰的对象

1. id选择器：以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配，以标签的id属性作为样式应用的依据
2. class选择器：以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器，以标签的class属性作为样式应用的依据
3. 组合选择器
   (1) 后代选择器：以空格作为分隔，定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用
   (2) 子选择器：以>作为分隔

每条声明由一个属性和一个值组成

• 属性名：修饰对象的哪一个属性
• 属性值：样式的取值

二.CSS应用方式

1. 外部样式表
   使用单独的 .CSS 文件定义，然后在页面中使用 link标签引入

• 引入格式：
  <link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

2. 内部样式表
   在页面头部通过style标签定义，对当前页面中所有符合样式选择器的标签都起作用
3. 内联样式
   直接把样式规则直接写到要应用的元素中
4. 级联的优先级
   内联样式>内部样式表或外部样式表>浏览器缺省样式

三.常用属性（颜色, 尺寸）

1. 颜色

写法：

• 颜色名称：使用英文单词
• 16进制的RGB值：#RRGGBB
• rgb函数：rgb(red,green,blue),颜色的取值范围，[0,255]
• rgba函数：rbga(red,green,blue,alpha)可以设置透明度，alpha取值范围：[0,1] 0表示完全透明 1表示完全不透明

2. 尺寸

用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等

四.盒子模型

1. 介绍

一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的

2. border

Border 边框，默认不显示

• 方向：上top、右right、下bottom、左left
• 样式：border-方向-color、border-方向-width、border-方向-style
  • style的取值：solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线

3. padding

Padding 填充，也叫内边距，即内容和边框之间的区域

4. margin

Margin 外边距，边框以外与其它元素的区域，即盒子与盒子之间的距离

五.定位

1. 概述

position属性用于对元素进行定位

取值	含义	说明
static	默认值	按照常规文档流进行显示
relative	相对定位	相对于标签原来的位置进行的定位
absolute	绝对定位	相对于第一个非static定位的父标签的定位
fixed	固定定位	相对于浏览器窗品进行定位

2. static

按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排

3. relative

先设置元素的position属性为relative,然后再设置偏移量

4. fixed

先设置元素的position属性为fixed，然后再设置偏移量,元素固定的位置仍由top, bottom, left, right属性确定,设置元素为固定定位后，元素会浮动在面面上方

5. absolute

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量。设置元素为绝对定位后，元素会浮到页面上方

• 如果父标签不是非static定位，则会相对于浏览器窗口进行定位

六.溢出

元素内容超过其指定的区域时，通过溢出overflow属性处理

• visible 默认值，溢出部分不被裁剪，在区域外面显示
• hidden 裁剪溢出部分且不可见
• scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
• auto 裁剪溢出部分，视情况提供滚动条

七.浮动&清除&不透明度

1. float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列

• left左浮动
• right右浮动
• none不浮动

2. 如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除

• left左侧不允许出现浮动元素
• right右侧不允许出现浮动元素
• both两侧不允许出现浮动元素
• none允许两侧出现浮动元素

3. opacity对任何元素（常用于图片）设置不透明度。值在[0.0～1.0]之间，值越低，透明度越高

八.伪类和伪元素

1. 伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的
2. 伪元素：用于创建一些不在文档树中的元素，并为其添加样式
3. 常用伪类：

• :link 应用于未被访问过的链接
• :hover 应用于鼠标悬停到的元素
• :active 应用于被激活的元素
• :visited 应用于被访问过的链接，与:link互斥
• :focus 应用于拥有键盘输入焦点的元素

4. 常见伪元素选择器：

• ::first-letter 选择元素文本的第一个字
• ::first-line 选择元素文本的第一行
• ::before 在元素内容的最前面添加新内容
• ::after 在元素内容的最后面添加新内容
• ::selection匹配用户被用户选中或者处于高亮状态的部分
• ::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效