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

好程序员前端教程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选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承