css基本内容笔记（学习整理）

一.css简介

1.什么是css

层叠样式表。

层叠：层层叠加，若果有冲突应用优先级高，不冲突的部分共同作用

样式表：就是css属性样式的集合；

2.作用

a.修饰html，使得html样式更好看

b.提高样式代码的复用性

c.html的内容与样式分离，便于后期维护

3.css的引入方式

1.内嵌样式

把css代码嵌入到html标签中

style=" 属性 ：属性值 ; 属性：属性值"

语法：

1.使用style属性；

2.属性写法：属性：属性值；

3.多个样式使用”；“分开；

2.内部样式

<style type="text/css">

div{color:red; font-size:100px;}

</style>

语法：

1.使用style标签属性进行引入；

2.属性写法：属性：属性值；

3.多个样式使用”；“分开；

3.外部样式----推荐使用

将css样式抽成一个单独的css文件，谁用就引用这个文件；

<link rel="stylesheet" style="text/css" href=" css文件地址">

语法：

1.创建css文件写入css属性，

2.在head中使用link标签属性进行引入；

3.属性写法：属性：属性值；

4.多个样式使用”；“分开；

二.选择器

1.基本选择器（优先级 类选择器>Id选择器>标签选择器）

a.标签选择器

语法：html标签名{ css 属性}

b.类选择器

.+class名

class的值可以重复

c.id选择器

#+id名

id只有唯一性，不能重复

2.属性选择器

 

语法：基本选择器[ 属性="属性值"]{css 属性：属性值; }

3.伪元素选择器

a标签的伪元素选择器

静止状态 ：a:link{css属性}

悬浮状态：a hover{css属性}

触发状态： a：active{css属性}

完成状态 a：visited{css属性}

4.层级选择器

按照层级进行选择

 

三.css属性

1.文字属性：

span{color:red;font-size:100px;font-family:黑体}

font-size:大小；

font-family:字体类型

font-weight:bold；加粗

2.文本属性：

color:颜色

text-decoration:下划线(a标签可以去掉下划线)

属性值：none;underline;

text-agin:对齐方式

属性：left; center; right;

line-high：字体之间的行高

 

3.背景属性：

">background-image:背景图片

属性：

url("图片地址")

background-repeat：平铺方式

属性: no-repeat;不重复 repeat-x;横向重复

repeat-y; 纵向重复repeat；横纵向平铺

4.列表属性：

list-style-type：列表项前的小标志

属性：太多了，可以查字典

list-style-image:列表项前的小图片；

属性：url（"图片地址"）；

 

5.尺寸属性：

width：宽度

height：高度

6.显示属性：

display：

属性：none 隐藏

block 块级别显示

inline 行级别显示（行级变成块级别）

7.浮动属性：

float：浮动

属性值：left right

clear：清楚浮动 left right both

技巧：在一个浮动的div之后，添加一个div来清除浮动

 

四.盒子模型

 　　略