前端开发语言-CSS3
2018-09-04 11:52:21 1 举报AI智能生成
css
作者其他创作
大纲/内容
CSS 3
简介
Casecading Style Sheet
定义网页表现
应用
内联 <p style=\"属性:值;..\"> /* 优先级最高 */
页面嵌入 <style>...</style> /* 优先级次之 */
样式表链接 <link herf=\"**.css\" /> /* 优先级最低，但使用最多 */
语法
选择器 {属性:值;...}
选择器
全局选择器 * { ... } /* 星号(*)是通配符 */
元素类型选择器(标签选择器) tag {...}
ID 选择器 #id {...}
类选择器 .class {...}
层级
后代选择器 祖先元素 后代元素 {..}
父子选择器 父元素>子元素 {...}
基本样式
颜色
取值
十六进制 #FF0000
名称 如：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 十字架(移动)
.....
溢出 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 块级元素
p
div
h
inline 行内级别元素
span
strong
em
显示 display
block 强制显示为块级元素
inline 强制显示为内联（行内）元素
inline-block 强制显示为行内的块级元素
none 隐藏显示（位置也消失）
可见性 visibility
visible 可见
hidden 不可见（隐藏，但所占位置还在）
collapse 当前整个行/列 被删除
inherit 可见性由父级元素决定
收藏
0 条评论
回复 删除
下一页
