CSS知识点总结

css导入方式 1.标签内联2.内部放置3.外部放置4.@import url（）

css选择器 1.标签选择器2.id选择器3.class选择器4.组合选择器

css优先级 就近原则 标签>id>class>*

为了防止不支持css的浏览器将<stylr>...</style>标签间的css规则当成普通字符串,

而显示在网页上，应将css的规则代码插入<!-- -->标签之间

1、字体与颜色

font-family 字体

font-size：30px 字体大小

font-style 字体样式

font-weight normal 不加粗 bold 加粗 bolder 更加粗 lighter 更细

2、背景颜色

background-color 背景颜色

background-image 背景图片

background-repeat： no-repeat; 不平铺 repeat-x 水平平铺 repeat-y垂直平铺

background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动

background-position 设置背景图像的起始位置

3、文本属性

letter-spacing 字间距 必须加空格才能看出效果

word-spacing 词间距

text-decoration：none none用来把a标签的下划线去掉

underline 下划线 overline 上划线 line-through 删除线

text-align: left center right 文本左对齐/居中/右对齐

text-indent p标签段落首行缩进

line-height 文本的高

color 文本颜色

cursor 鼠标指向变化

4.盒子模型

1、行内元素和块元素

行内元素： 又叫内联元素，只能容纳文本和其他内联元素，<span>，<a>

块元素：块元素一般从新的一行开始，可容纳文本，其他内联元素和块元素。即使内 容不满一行，块元素也要把整行填满。<div>，<p>

2、块元素的特点

每个块级元素都从新的一行开始，并且其后的元素也另起一行。

元素的高度、宽度、行高以及顶和底边距都可设置。

元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

5.列表控制

list-style-type: none; 去掉列表前面的点

square; 正方形

disc; 实心圆

circle 空心圆

decimal 默认数字

decimal-leading-zero; 带0的数字

lower-alpha; 小写字母

upper-alpha; 大写字母

lower-roman; 小写罗马数字

upper-roman; 大写罗马数字

list-style-image: 加入图片

6.布局

margin 外边距

padding 内边距

width 宽度

height 高度

margin-left 左边距

margin-right 上边距

text-align 左右居中

line-height 上下居中

margin10%或者padding10%用来写上下左右的距离 如果单a 只写左边即可：margin-left:10%

7.其他

position:relative 相对定位

position:absolute 绝对定位

 

大小 border-width:5px;

线条 border-style:dotted; 相当于 border: 5px dotted red;

颜色 border-color:red;

solid 实线 dotted 点状线 dashed 虚线 double 双实线

vertical-align : top 相对上对齐

middle 相对垂直居中

bottom 相对下对齐

8.定位

position:relative; 相对定位 相对于原来的位置

position:fixed; 固定定位 相对于屏幕来说

position: absolute; 绝对定位 脱离文档流

margin: 0 auto; 居中 与position:absolute;不能同时设着

 

div1和div2 必须设置相同的position

z-index: 设置元素的堆叠顺序

 

 

text-align--文字居中

 

 

clear:both--清除浮动

 

 

display:none;--隐藏

 

 

display:block;--显示

 

 

overflow:hidden；--隐藏多余的部分 也可以清除浮动

 

 

auto；--增加滚动条

 

 

scroll；--强制增加滚动条

 

 

：hover--事件 （鼠标指向）

 

 

.div:hover img{width="10px"}鼠标指向图片放大10px

 

 

margin:0 auto; 块元素水平居中

 

 

text-align:center；文字水平居中

 

 

（height:10px；line-height:10px；）文字垂直居中

 

 

list-style-position:inside；把加入的图标放在里面

 

 

border-radius:20px 20px 20px 20px ; 圆圈

 

 

cursor:pointer 鼠标指向变小手

 

 

cursor: not-allowed; 鼠标指向不能使用

 

 

opacity：透明度 0到1