整理笔记--CSS

1.概念相关

1.css: 层叠样式表 . html是毛坯房,css装修

2.css语法 {属性:属性值 属性值 属性值; 属性:属性值}

3.块状元素、行内元素和内联块状元素

块状元素的特点:

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

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

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

行内元素特点:

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素特点:

1、和其他元素都在一行上；

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

4.颜色值

英文命令颜色 p{color:red;}

RGB颜色 p{color:rgb(133,45,200);}

p{color:rgb(20%,33%,25%);}

十六进制颜色 p{color:#00ffff;}

配色表：

作用:美化页面, 将页面美化和html进行分离

2.CSS和HTML结合方式

内嵌式 <div style="border:1px solid blue;">div</div>

嵌入式<style>div{border:1px solid red;}</style>

外部式 1.创建一个css文件 2.通过link标签引入 3.href:css文件的路径 <link rel="stylesheet" href="css文件路径">

三者的优先级顺序:在相同权值的情况下

就近原则（离被设置元素越近优先级别越高）

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码:

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

!important(设置最高权值)

注意:!important要写在分号的前面

浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

3.css选择器

基本选择器

1.#id;{} 为标签设置id="ID名称"

2. .类{};使用class="类选择器名称"为标签设置一个类

3.标签名{}

类和ID选择器的区别

相同点:可以应用于任何元素

不同点:

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的(不能使用 ID 词列表)

扩展

通用选择器:* {}

分组选择器:选择器,选择器{}

子元素选择器:选择器>选择器{}

后代选择器: 选择器 选择器{}

属性选择器:[属性=‘属性值’]{css属性}

伪类选择器

锚伪类

在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

4.属性(style)

1、文字属性

font-size:大小

font-family:字体类型

2、文本属性

color:颜色

text-decoration:下划线

属性值:none underline

text-align:对齐方式

属性值:left center right

3、背景属性

background-color:背景颜色

background-image:背景图片属性值：

url("图片地址");

background-repeat:平铺方式

属性值：默认横向纵向平铺

repeat:横向纵向平铺

no-repeat:不平铺

repeat-y:纵向

repeat-x:横向

4、列表属性

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

属性值:太多了

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

属性值:url("图片地址");

5、尺寸属性

width:宽度

height:高度

6、显示属性

display:

属性值:none:隐藏

block:块级显示

inline:行级显示

7、浮动属性

float:

属性值：left right

clear:清除浮动 left right both

缺点:(1)影响相邻元素不能正常显示

(2)影响父元素不能正常显示

5.盒子模型

按照顺时针方向填值

水平居中设置

水平居中设置-行内元素

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

水平居中设置-定宽块状元素

(定宽块状元素：块状元素的宽度WIDTH为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

注意:元素的“上下 margin” 是可以随意设置的

水平居中总结-不定宽块状元素方法（一）

(不定宽块状元素：块状元素的宽度width不固定。)

1. 加入 table 标签

2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置

3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

水平居中总结-不定宽块状元素方法（二）

第二种方法:改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。

水平居中总结-不定宽块状元素方法（三）

方法三:通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

6.层模型

绝对定位; positon:absolute left(与左端的距离)

相对定位;position:relative(相对于以前的位置) 偏移前的位置保留不动