CSS基础知识点

2019-03-21----16:05:45

周期:5天

学习资料:http://how2j.cn/k/css2/css2-tutorial/238.html?p=67889

源代码地址---github:https://github.com/bencoper/css

readme:简要概括知识点详细代码前往github-----star--fork

1.css基础

　　1.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---空白格

　　5.字体

font-size---尺寸

font-style---风格

font-weight---粗细

font-family---字库

font---声明在一起

　　6.鼠标样式

cursor:crosshair---十字架

cursor:pointer---手指

 　　7.表格

table-layout:automatic|fixed---表格布局

border-collapse:separate|collapse---表格边框

　　8.边框

border-style---边框风格

border-color---边框颜色

border-width---边框宽度

border---都放在一起

boder-top---只有一个方向有边框

boder-top,border-left---有交界的边都有边框

div---块级元素(自动换行)

span---内联元素(无换行)

　　9.内边距

padding-left: 左内边距 
padding-right: 右内边距 
padding-top: 上内边距 
padding-bottom: 下内边距 
padding: 上 右 下 左

　　10.外边距

margin-left: 左外边距 
margin-right: 右外边距 
margin-top: 上外边距 
margin-bottom: 下外边距 

　　11.边框模型

　　12.超链状态

link - 初始状态，从未被访问过 
visited - 已访问过 
hover - 鼠标悬停于超链的上方 
active - 鼠标左键点击下去，但是尚未弹起的时候

　　13.隐藏

display:none; ---隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了
visibility:hidden;---;隐藏一个元素，这个元素继续占有原空间，只是“看不见”

　　14.css文件

<link rel="stylesheet" type="text/css" href="/study/style.css" />

href指向的路径就是单独的css文件路径

　　15.css优先级

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

2. 作为style属性写在元素内的样式

3. id选择器

4. 类选择器

5. 标签选择器

6. 通配符选择器

7. 浏览器自定义或继承