WEB开发技术基础知识整理——CSS

简介

css被称作层叠样式表。

让网页结构和样式分离

将HTML文档的表现与内容分离

使HTML文档结构简化、清晰、灵活

极大的提高了HTML文档的可读性

Cascading使样式结构简化、清晰、灵活

增强了网站全局的一致性

CSS文件存储在浏览器的高速缓存中,多个页面

必重新装载分析样式,降低网络数据传输

便于针对不同设备目标定制不同的样式

为视觉障碍者提供帮助

重点

CSS的作用

CSS的基本编写规范

CSS代码的声明定义使用方法

CSS层叠的表现形式及显示效果

Boxing model,表现形式、显示效果、声明定义方法

浮动属性的特点

各应用场景下的尺寸单位

Inline、block、Inline-block属性的特点

CSS的ID、类、元素、子、后代、属性等选择器的声明定义方法

使用方式

CSS 规则由两部分构成:选择器,以及一条或多条声明。

h1{color:blue;/*这是一条注释*/font-size:12px}

选择器

id选择器

根据元素里面的id属性值进行选择

类似于#id1

类选择器

.class 根据属性class进行选择,可以是一个组

例如h3.green

组合选择器

后代选择器:元素内所有符合第二级选择的元素

子选择器:元素内所有符合第二级选择器的,直接子元素

伪类

:hover 悬浮

:nth-child(odd/even)奇数偶数元素

:invalid 未通过验证

一个元素可以层叠样式

实例:links

:hover (放到link和visited之后有效)

:visited

:link

:active(hover之后有效)

padding(框长宽)

允许多个元素同时选择

a,p,h1{}

属性选择器

a[target]选择a中的target元素

如何使用

外部样式表,外部css文件

内部样式表,内部单独开辟style标签

内联样式表,在元素标签内部添加style属性

优先级,内联样式 > 内部样式表 > 外部样式表

层叠顺序(低--高):缺省设置,外部,内部,内联

必须按照正确顺序加载css(例如先bootstarp,后基于bs的ui,最后自定义样式)

颜色

rgb(255,55,0)

或者#ff0000

元素

尺寸表示:em,相对于当前元素应有尺寸,用于 缩进

rem相对于html字体尺寸

%相对于父容器百分比

px相对于逻辑像素,相对的绝对单位

字体属性建议使用em,rem

元素布局建议使用px%

容器

外到内:margin,border,padding,content

border

border-style 线条样式 必须

border-width 宽度(5px,medium,thick(顺序上右下左)

border-radius 弧度

border-(top,right,bottom,left)-style 边样式

border-color 颜色

h1{color:blue;font-size:12px;background-color:#000000;border-bottom:6px solid red;}

padding

Padding,内边距,决定了内容至边线的距离;

元素背景颜色决定开空间颜色

margin

外边距,元素边线到其他元素的距离

颜色由父亲容器决定

无法定义颜色

若margin:auto时,可实现动态变化

两边的margin会取最大值

background

background-color

background-image

background-repeat 重复定义

background-position 图片位置

background-attachment 背景不动

text

color

opacity透明度

text-align 对齐方式

text-indent 缩进?

text-decoration (overline,line-through,underline,none)

text-transform uppercase,lowercase,capitalize

letter-spacing 字母间距

line-height 行间距

font

font-family:字体

font-style:字体样式,倾斜,正常

font-size:大小

font-weight:normal,lighter,bold,900 字体粗细

list

list-style-type 样式

list-style-image 图片

list-style-position 外部还是内部,默认外

ul内边距与li外边距

table

border

border-collapse 内部线是否存在

Th,默认字体加粗居中对齐,Td,默认字体左对齐

在tr中声明内/外边距,字体等无效;必须声明在td中

一些转换

li转换成inline级可以横向排列

span转成block级别可以占用一整行

display: none; 元素不存在,不占用布局空间

visibility: hidden;元素存在不可见,仍占用布局空间

Inline元素,纵向内/外边距无效,横向有效;高宽无效;但可与其他元素同行显示

Block元素,内外边距,高宽均有效;但无法与其他元素同行显示

display=inline-block;对外inline,对内block,同行显示并设置高度

overflow 显示 visible溢出部分不截断,留在外边 hidden溢出截断 scroll 溢出部分截断其他为滚动条 auto基于内容长度绝对显示滚动条

float 只能左右不能上下,当浮动元素高度超过父容器时,可设置属性使父容器计算浮动元素尺寸,父容器将在浮动元素定位布局后绘制。

页面定位

默认按照页面流程定位,top等无效

relative 可以使用

absolute 相对的绝对定位

fixed相对浏览器位置固定

flex容器弹性布局

必须声明弹性容器(flex container),display属性设置为flex

弹性项,具有弹性的,类似inline-block的特性

flex-direction j决定主轴方向 row默认横向,,column纵向

flex-wrap 决定是否换行

flex-flow(组合)

justify-content 主轴对齐方法

align-items 纵轴对齐方式

align-content

子元素

order

flex-grow 确定宽度后占用剩余宽度比重

flex-shrink 缩小比重,用于固定尺寸

flex-basis 确定宽度前的初始长度

flex

align-self 纵轴对齐方式

nav列表元素

list-style-type:none 取消列表样式

width:确定最佳宽度

display:block

text-decoration:none取消下划线

附加:html5布局

本文在博客 几何军工作室 首发

https://kfzjw008.github.io

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20181110G102OE00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券