

首页  思维导图  详情



前端开发语言-CSS3

2018-09-04 11:52:21   1  举报





AI智能生成

css

CSS3

css

CSS 前端开发网页设计

css，开发

css html JavaScript

模版推荐

作者其他创作

大纲/内容

简介

Casecading Style Sheet

定义网页表现

应用

内联 <p style="属性:值;.."> /* 优先级最高 */

页面嵌入 <style>...</style> /* 优先级次之 */

样式表链接 <link herf="**.css" /> /* 优先级最低，但使用最多 */

语法

选择器 {属性:值;...}

选择器

全局选择器 * { ... } /* 星号(*)是通配符 */

元素类型选择器(标签选择器) tag {...}

ID 选择器 #id {...}

类选择器 .class {...}

层级

后代选择器祖先元素后代元素 {..}

父子选择器父元素>子元素 {...}

分组选择器选择器1, 选择器2, ... { ... }

基本样式

颜色

取值

十六进制 #FF0000

RGB rgb(255,0,0)

名称如：red

前景色：color

背景

背景色 background-color

背景图 background-image: url(**.jpg)

重复 background-repeat:

repeat-x 横着重复

repeat-y 竖着重复

no-repeat 不重复

位置 background-position

left center right 左中右

top center bottom 上中下

固定 background-attachment: fixed;

简写 background: 颜色图重复固定水平位置垂直位置

字体

字体族 font-family:

字体样式 font-style:

normal 标准的

italic 印刷的斜体

oblique 斜体

字号 font-size:

像素值 12px

0.8em 在原来基础上缩放多少倍

粗细 font-weight:

bold 加粗

300 相对的值

文本

颜色 color

对齐 text-align

left 左

center 居中

right 右对齐

jusity 两端对齐

装饰线 text-decoration:

overline 文字上面加线

line-through 贯穿线（删除线）

underline 下划线

转换 text-transform:

uppercase 大写

lowercase 小写

capitalize 首字母大写

缩进 text-indent:

像素值

行间距 line-height:

像素值

链接

a:link {} /* 1. 一般状态下 */

a:visited {} /* 2. 单击后的状态 */

a:hover {} /*3. 鼠标经过时*/

a:active {} /* 4. 正在激活的状态 */

列表

列表样式 list-style-type

none 去除小圆点样式

square 小方块

....

位置 list-style-position

inside

outside

图片 list-style-image: url(**.jpg)

表格

边框 border

横线折叠 border-collapse: collapse

布局 table-layout:fixed 固定

隐藏空单元格 empty-cells:hide

CSS 盒模型

图例

外边距 margin

内间距 padding

边框 border

宽度 border-width

样式 border-style

实线 solid

点划线 dotted

虚线 dashed

双线 double

取消边框线 none

....

颜色 border-color

CSS 进阶

光标指针 cursor

default 默认

pointer 小手

text I光标，用于选择

move 十字架(移动)

.....

自定义 url(custom.gif), url(custom.cur), default;

溢出 overflow

visible 溢出部分正常显示（默认值）

hidden 溢出部分隐藏

scroll 溢出时出现滚动条

auto 自动处理（比scroll效果更好）

维度

宽

width

max-width 最大宽度

min-width 最小宽度

高

height

max-height 最大高度

min-height 最小高度

CSS 单位

px 像素

em 相对于当前字体比率

in 英寸（1in=72pt）

cm 厘米

mm 毫米

pt 点（磅）

pc picas(1pc=12pt)

可视格式化

Block 块级元素

div

inline 行内级别元素

span

strong

....

显示 display

block 强制显示为块级元素

inline 强制显示为内联（行内）元素

inline-block 强制显示为行内的块级元素

none 隐藏显示（位置也消失）

可见性 visibility

visible 可见

hidden 不可见（隐藏，但所占位置还在）

collapse 当前整个行/列被删除

inherit 可见性由父级元素决定

 Collect

Get Started

3-3单点交叉

 Collect

Get Started

CSS

 Collect

Get Started

CSS3

 Collect

Get Started

前端开发语言-CSS3





0 条评论

下一页