好程序员前端教程CSS基础知识点

5次阅读

共计 1164 个字符,预计需要花费 3 分钟才能阅读完成。

好程序员前端教程 CSS 基础知识点
1.CSS 基础
CSS 选择器
元素选择器:p{}
id 选择器:#p1{}
类选择器: .pre{}2.CSS 注释
注释:/**/3.CSS 尺寸
width: 宽度 height: 高度 4.CSS 背景
background-color—– 背景颜色
background-image:url(imagepath)—图片做背景
url(background.jpg)—本地测试
background-repeat—背景水平垂直方向重复—参数可选
background-size: contain—背景平铺 5. 文本
color—文字颜色
text-align—对齐
text-decoration—文本修饰
lineheight—行间距
letter-spacing—单词间距
text-indent—首行缩进
text-transform—大小写
white-space—空白格 6. 字体
font-size—尺寸
font-style—风格
font-weight—粗细
font-family—字库
font—声明在一起 7. 鼠标样式
cursor:crosshair—十字架
cursor:pointer—手指 8. 表格
table-layout:automatic|fixed—表格布局
border-collapse:separate|collapse—表格边框 9. 边框
border-style—边框风格
border-color—边框颜色
border-width—边框宽度
border—都放在一起
boder-top—只有一个方向有边框
boder-top,border-left—有交界的边都有边框
div—块级元素 (自动换行)
span—内联元素 (无换行)10. 内边距
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上 右 下 左 11. 外边距
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距 12. 边框模型
13. 超链状态
link – 初始状态,从未被访问过
visited – 已访问过
hover – 鼠标悬停于超链的上方
active – 鼠标左键点击下去,但是尚未弹起的时候 14. 隐藏
display:none; —隐藏一个元素,这个元素将不再占有原空间“坑”让出来了
visibility:hidden;—; 隐藏一个元素,这个元素继续占有原空间,只是“看不见”15.css 文件
href 指向的路径就是单独的 css 文件路径 16.CSS 优先级
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。作为 style 属性写在元素内的样式 id 选择器 类选择器 标签选择器 通配符选择器 浏览器自定义或继承

正文完
 0