CSS2学后总结

CSS学后总结

css定义：

层叠样式表:cascading style sheet，是一种样式设置规则
由标签和选择器构成

---

css作用

是一种样式设置规则，用于控制页面的外观和规则，设置网页美化和布局

---

css选择器语法

选择器{
样式名1：样式值1；
样式名2：样式值2；
}
选择器：要修饰的对象
样式名：修饰对象的每个样式
样式值：样式的取值
注意点：多个样式之间需要用分号隔开，样式名和样式值用冒号隔开

---

css引用方式

1.内部样式

在页面头部通过style标签来定义，对页面内符合标签的都起作用

2.行内样式

使用HTML标签的style属性来定义，只对此标签起作用

3.外部样式

使用单独的css文件来定义，在html页面中使用link标签来引入
< link rel=“stylesheet” type=“text/css” href=“css文件的路径” >

---

选择器

标签选择器

元素选择器，以HTML标签的名字作为样式应用选择

类选择器

自定义名称，以.为前缀，通过HTML中class的属性值进行选择

选择器

自定义名称，以#为前缀，通过HTML中id的属性值进行选择,id值必须唯一

伪类选择器

在HTML中未定义标签名称，在css中却能引用，一般用于a标签，a:hover鼠标移动到a标签上

选择器的优先级

1.行内样式（10000） > ID选择器（100） > 类选择器（10） >标签选择器（1）
2.内外行样式加载顺序：就近原则

---

CSS样式属性

字体属性：定义字体相关样式

1.font-size：
设置字体打小，px像素

2.font-weight:
设置字体是否加粗；normal:正常；bold：粗体

3.font-family:
设置字体格式，各种字体间以逗号隔开

4.font-style：
设置字体是否倾斜；normal:正常；italic:倾斜

5.font: font:
font-style font-weight font-size font-family;中间空格隔开

6.color:
颜色；用于设置字体颜色 取值方式：
i,颜色名称，使用英文单词
ii,十六进制表示；例如：#ffffff表示白色，#000000表示黑色
iii，rgb函数表示

文本属性

line-height:
设置行高，行之间的距离，也可以用于文本垂直居中

text-align:
水平对齐方式，取值：left，center，right

text-indent：
首行缩进，单位为em

text-decoration:
用来设置文本的装饰线 下划线 删除线

背景属性

background-color:
设置背景颜色，transparent：透明

background-img:
设置背景图片，url（）指定文件路径

background-repeat:
背景图是否重复，repeat：默认；no-repeat：不重复；repeat-y：y轴复制；repeat-x：x轴复制

background-position:
背景图片的位置，左上角（0，0）坐标，向右为x轴正方向，向下为y轴正方向

列表属性

list-style-type:
设置设置列表项前的标记，取值：none，disc，circle，square，decimal

表格属性

border-collapse:
表格中相邻的边框是否合并为单一边框
取值：seperate（分离，默认值），collapse（合并）

---

###盒子模型
盒子分为块级元素（男标签），行内元素（女标签）和行内块元素（人妖标签）

块级元素独占一行，
常见块级元素：div，dl-dt-dd，form，hn，hr，ol，ul，li，p

行内元素同行显示
常见行内元素：a,b,br,em,lable,span…

行内块标签
只有img input 除了可以并排显示 其它特点和男盒子一样

块级元素和行内元素可以相互转换

display：inline
块级元素变成行内元素，可以使文本居中

display:block
行内元素变为块级元素，可以设置宽高

display:inline-block
仍是行内元素，但可以设置宽高
####概念：盒子模型是网页布局的基础，将页面中所有元素都看成一个盒子，盒子包含以下属性：

width
宽度：设置盒子宽度

height
高度：设置盒子高度

border
表示盒子的边框，分为四个方向，border-top，border-right，border-bottom，border-left；
每个边分为三种样式：颜色color，粗细width，样式style。
border-style取值：dashed虚线，dotted点状线，solid实线，double双实线…

padding
用来设置内填充，也叫补白 表示内容区域和边框之间的距离
四个方向： 用的也比较多的
padding-top:
padding-right:
padding-bottom:
padding-left:
padding后面也可以跟一个值，二个值，三个值，四个值：
一个值：padding:10px 四个方向的padding都是10px
二个值：padding:10px 20px; 上下是10px 左右是20px
三个值：padding:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值：padding:10px 20px 30px 40px; 上 右 下 左
按顺时针方向排列

margin
表示外边距 盒子与盒子之间的距离 是边框之外的间隔 是在border之外的
四有个方向：
margin-top
margin-right
margin-bottom
margin-left
margin后面也可以跟一个值，二个值，三个值，四个值：
一个值：margin:10px 四个方向的margin都是10px
二个值：margin:10px 20px; 上下是10px 左右是20px
三个值：margin:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值：margin:10px 20px 30px 40px; 上 右 下 左
margin: 0 auto:一般用于盒子的居中

background
设置盒子背景

---

浮动

浮动的元素半脱离标准文档流：
浮动刚开始是为了实现字围效果，文字并不会钻到浮动的元素后面，文字会环绕浮动的元素分布，叫字围效果。
现在我们主要使用浮动来让块级元素并排显示。

浮动元素的特点：
1）贴靠性 如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行。
2）包裹性 如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小
3）一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0，也就说父元素的高度塌陷了。
4）如果一个女盒子浮动了，就可以设置宽度和高度。

元素浮动会造成影响：
1）对父元素造成的影响
2）对后面的兄弟元素影响

清除浮动(清除浮动所造成的的影响)：
1.清除对父元素所造成影响
a)overflow:hidden
b)为父元素设置高度

元素浮动也会对它后面的元素造成影响：
元素浮动对兄弟元素也会造成影响，我们需要清除这种影响，
在受影响元素内加入：clear: left/right/both clear:both
clear:left清除左浮动造成的影响
clear:right清除右浮动造成的影响
clear:both只能写在第1个受影响的元素上