CSS学习笔记-CSDN博客

CSS

1.概念

CSS层叠样式表是一种用来描述文档如何呈现在屏幕、打印等上的语言。通过使用CSS我们可以将HTML标记与外观和布局分离。

2.CSS 引入方式

• 外部样式表 在head标签中加入标签href属性指向外部css文件。
• 内部样式表在head标签中使用

3.选择器

基础选择器

• 标签选择器选择相应标签的元素如div、p等
• 类选择器选择指定class属性值的所有元素如 .example
• id选择器选择指定id属性值的唯一元素如 #example
• 通配符选择器选择所有元素如 *

复合选择器

• 后代选择器选择某个元素下的所有后代元素如 div p
• 子代选择器选择某个元素下的直接子元素如 ul > li
• 并集选择器选择多个元素如 h1, h2, h3
• 交集选择器选择同时拥有两种或多种不同属性的元素如 a.classA.classB
• 伪类选择器根据元素所处状态或信息选择元素如 :hover等

选择器的优先级

样式规则根据“优先级”来决定作用于HTML元素上的CSS属性。当多个规则应用于同一元素时优先级就决定了哪个规则将胜出。

4.盒子模型

• 盒子模型-边框线 CSS盒子模型包括内容区域、内边距区域、边框区域和外边距区域。
• 盒子模型-padding 盒子内边距区域的四个方向分别是上、右、下、左使用padding属性设置。
• 盒子模型-外边距 盒子外边距区域的四个方向也是上、右、下、左使用margin属性设置。
• 外边距问题-合并现象 当两个盒子相遇时它们的外边距会合并为一个外边距这种现象称为外边距合并。
• 外边距问题-塌陷问题 当父元素的上边距和子元素的上边距重合时会发生外边距塌陷的现象。
• 行内元素-内外边距问题 行内元素没有内边距和外边距使用line-height属性撑开行高。
• 盒子模型-尺寸计算 盒子的总宽度 = 左边框 + 左内边距 + 内容区域 + 右内边距 + 右边框盒子的总高度 = 上边框 + 上内边距 + 内容区域 + 下内边距 + 下边框。
• 盒子模型-元素溢出 如果元素溢出了可以通过overflow属性来控制。
• 盒子模型-圆角 使用border-radius属性设置盒子四个角的圆角效果。
• 盒子模型-阴影拓展 使用box-shadow属性在盒子周围添加阴影。

5.字体修饰属性

CSS提供多种修改字体样式的属性如font-size、font-weight、font-style等等。

6.调试工具

调试工具是帮助我们排错和调试CSS样式的利器常用的调试工具有Chrome开发者工具、Firebug、Safari的Web Inspector等。

7.CSS特性

• 继承性如果一个元素没有指定某个CSS属性那么它将从它的父元素继承这个属性。
• 层叠性如果一个元素同时被多个样式规则所定义那么它将按照一定规则来决定哪条规则的优先级更高。
• 优先级在层叠性相同的情况下根据选择器的优先级来确定哪个样式规则更重要。

8.背景属性

CSS提供了多种背景样式设置如background-color、background-image等。渐变可以通过linear-gradient或radial-gradient来实现。

9.显示模式

CSS提供了多种显示模式如块级元素、行内元素和行内块级元素。可以通过display属性进行设置。

10.清除默认样式

使用reset.css清除默认样式并将其设置为一个css文件。

11.CSS 书写顺序

一般按照盒子模型的顺序来书写CSS样式如先写边框、内边距、尺寸等等。

12.标准流

标准流是指文档内容默认的布局方式包括块级元素和行内元素的默认布局方式。

13.浮动

CSS提供了float属性来实现元素浮动。为了防止浮动元素对其他元素的影响需要清除浮动。

清除浮动

• 方法一额外标签法
• 方法二单伪元素法
• 方法三双伪元素法推荐
• 方法四overflow

14.flex布局

FlexFlexible Box布局是一种高效的布局方式能够快速应对多种屏幕尺寸。Flex布局包括容器和成员两个概念。

15.网页设计技巧

• 清除默认样式并将其设置为一个css文件。
• 设置版心区域。
• logo的设置。
• 导航制作技巧。
• 搜索区域。
• img+span。

16.定位

CSS提供了多种定位方式包括相对定位、绝对定位和固定定位。使用z-index属性可以设置堆叠层级。

17.CSS 精灵

CSS精灵是指将多个小图标合并成一张大图并通过background-position的方式来显示相应小图标。

18.字体图标

字体图标是用字体文件来实现的图标可以通过下载相应字体库来使用。在HTML中只需要添加对应的class即可插入字体图标。

19.垂直对齐方式

CSS提供了vertical-align属性来实现元素的垂直对齐。

20.过渡 transition

过渡效果Transition是指在元素从一种样式逐渐变化为另一种样式过程中的动画效果。可以通过CSS的transition属性来实现。

21.透明度 opacity

CSS提供了opacity属性来设置元素的透明度。

22.光标类型 cursor

CSS提供了cursor属性来设置鼠标悬停在元素上时的光标类型。

23.SEO 三大标签

SEOSearch Engine Optimization是指优化网页以便于搜索引擎更好地理解和分类内容。其中三个非常重要的标签是

24.Favicon 图标

Favicon图标是指网站在浏览器地址栏、标签页等处显示的小图标。

25.input注意点

在使用input元素时需要注意一些属性设置如type、name、value、placeholder等。

26.平面转换 transform

CSS提供了多种平面转换效果包括平移、旋转、缩放和倾斜等。

27.空间转换

CSS提供了空间转换3D效果效果包括平移、旋转和缩放等。

28.动画-animation

动画是指可以通过CSS来实现的元素动画效果。CSS的animation属性可以实现多组动画。