Css(Css3)基础笔记(一)

Css(层叠样式表)

本文多以图片为主,想看实体文字,可进入我的有道云笔记

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化

语言特点:

1.丰富的样式定义

2.易于使用和修改

3.多页面应用

4.层叠

5.页面压缩

CSS相关概念

Css(Css3)基础笔记(一)_第1张图片
来自我的有道云笔记

css嵌入方式

Css(Css3)基础笔记(一)_第2张图片
来自我的有道云笔记

CSS的基本语法

Css(Css3)基础笔记(一)_第3张图片
来自我的有道云笔记

选择器

Css(Css3)基础笔记(一)_第4张图片
来自我的有道云笔记

color颜色属性

Css(Css3)基础笔记(一)_第5张图片
来自我的有道云笔记

background背景属性

Css(Css3)基础笔记(一)_第6张图片
来自我的有道云笔记

font字体属性

Css(Css3)基础笔记(一)_第7张图片
来自我的有道云笔记

文本属性

Css(Css3)基础笔记(一)_第8张图片
来自我的有道云笔记

border边框(边框)

Css(Css3)基础笔记(一)_第9张图片
来自我的有道云笔记


内补白padding

Css(Css3)基础笔记(一)_第10张图片
来自我的有道云笔记


外补白margin

Css(Css3)基础笔记(一)_第11张图片
来自我的有道云笔记

Position定位属性

Css(Css3)基础笔记(一)_第12张图片
来自我的有道云笔记
Css(Css3)基础笔记(一)_第13张图片
来自我的有道云笔记

列表属性

来自我的有道云笔记

表格属性

来自我的有道云笔记

display属性

Css(Css3)基础笔记(一)_第14张图片
来自我的有道云笔记

overflow属性

Css(Css3)基础笔记(一)_第15张图片
来自我的有道云笔记

float 浮动属性

Css(Css3)基础笔记(一)_第16张图片
来自我的有道云笔记

########################css3的样式############################

选择符

Css(Css3)基础笔记(一)_第17张图片
来自我的有道云笔记

用户界面的属性

Css(Css3)基础笔记(一)_第18张图片
来自我的有道云笔记

多层背景

Css(Css3)基础笔记(一)_第19张图片
来自我的有道云笔记


Css(Css3)基础笔记(一)_第20张图片
来自我的有道云笔记

新盒子模型

box-sizing:设置盒子模型的方式

    min-height:在元素内容没有达到最小高度之前 按照最小高度设置 超过则自适应高度

    max-height:在元素内容没有到达最大高度之前,自适应高度,超过则按照最大高度计算

    content-box: 

            padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Elementwidth=width+border+ padding )此属性表现为标准模式下的盒模型。

    border-box: 

            padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Elementwidth=width)此属性表现为怪异模式下的盒模型。

多栏column(不常用)

Css(Css3)基础笔记(一)_第21张图片
来自我的有道云笔记


Css(Css3)基础笔记(一)_第22张图片
来自我的有道云笔记
Css(Css3)基础笔记(一)_第23张图片
来自我的有道云笔记

transition过渡效果(重点)

Css(Css3)基础笔记(一)_第24张图片
来自我的有道云笔记

animation动画效果

Css(Css3)基础笔记(一)_第25张图片
来自我的有道云笔记


Css(Css3)基础笔记(一)_第26张图片
来自我的有道云笔记

媒体查询 Media(重点)

来自我的有道云笔记

标准头的设置(重点)

Css(Css3)基础笔记(一)_第27张图片
来自我的有道云笔记

布局模式(重点)

流式布局

优点:

对用户的界面更加友好  能够自适应用户的设置

页面的空白区域在所有的分辨率下面和浏览器下面都是相同的

如果是设计好的流式布局 还能够避免小分辨率下的水平滚动条

缺点:

设计师不是很好见到直观效果  如果产生一些小问题可能会被忽略

图片、视频或者其他设置了宽度的内容可能需要设定多个宽度以适应不同的分辨率

在不同的分辨率下  如果是大分辨率 内容会被拉长或者换行

flex 弹性布局(重点)

Css(Css3)基础笔记(一)_第28张图片
来自我的有道云笔记

新增单位(适合移动端的单位)(重点)

Css(Css3)基础笔记(一)_第29张图片
来自我的有道云笔记

兼容性问题:

Css(Css3)基础笔记(一)_第30张图片
来自我的有道云笔记

你可能感兴趣的:(Css(Css3)基础笔记(一))