什么是CSS

 

　　css是层叠样式表 （Cascading Style Sheet），又叫级联样式表，简称样式表。

 

　　css作用

 

　　用于HTML文档中元素样式的定义。

 

　　实现了将内容与表现分离。

 

　　提高代码的可重用性和可维护性。文件后缀是。css。

 

　　css与HTML之间的关系

 

　　HTML用于构建网页的结构

 

　　CSS用于构建HTML元素的样式HTML是页面的内容组成，CSS是页面的表现

 

　　结构层 HTML

 

　　表示层 CSS

 

　　行为层 JS

 

　　内联方式

 

　　直接把CSS代码用style属性添加到开始标签中

 

　　内部样式

 

　　直接把CSS代码添加到头部的style标签中

 

　　外部样式表

 

　　引入外部的CSS样式，这样用的比较多

 

　　4. 导入式

 

　　优先级：行内样式>内部样式>外部样式>导入样式

 

　　CSS语法

 

　　CSS是以属性/值对形式出现属性和属性值之间用冒号（：）连接多对属性之间用分号（;）隔开

 

　　CSS样式表特征

 

　　继承性层叠性优先级

 

　　CSS基础选择器

 

　　通用选择器，全局选择器（*）

 

　　可以与任何元素匹配

 

　　常用于设置一些默认样式

 

　　优先级最低元素选择器

 

　　HTML文档中的元素

 

　　p、b、div、a、img、body等类选择器

 

　　如：。body{color:red;}

 

　　类名不能以数字开头

 

　　一个页面中class名字可以重复ID选择器

 

　　#box{color：skyblue;}

 

　　id的名字不能重复ID属性是惟一的合并选择器

 

　　语法：选择器1，选择器2，…{}

 

　　可以提取共同的样式，减少重复代码

 

　　div+css布局

 

　　内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候，效果最明显

 

　　div

 

　　1. 可定义文档中的分区

 

　　2. 可以把文档分割为独立的、不同的部分

 

　　3. 是一个块级元素，独占一行

 

　　4. 通常与CSS配合

 

　　字体的设置

 

　　color 定义文本的颜色

 

　　如：

 

　　font-style 设置文本是否倾斜

 

　　normal（正常字体） 默认值

 

　　italic 斜体

 

　　如

 

　　font-size 设置文本字体的大小

 

　　通过像素来指定字体的大小

 

　　1px=1像素

 

　　font-family 定义文本使用某个字体

 

　　可以设置多个字体，排名越靠前优先级越高

 

　　默认值由浏览器决定

 

　　font-weight 指定文字的粗细

 

　　font 是上面 几个属性的复合属性

 

　　font:font-style font-weight font-size/line-height font-family

 

　　font-style font-weight 可以不写 也可以交换位置

 

　　font-size/line-height font-family 必须写 能交换位置

 

　　有继承性：给父元素设置了，子元素也可以继承到

 

　　经典应用：给body设置字体相关的属性。

 

　　文本属性

 

　　text-align 内容对齐方式，他是针对于元素的内容

 

　　属性值：left、center、right

 

　　p标签是块级元素，left、center、right会作用于整行

 

　　text-decoration 设置文字是否有修饰线，默认值是none

 

　　常用text-decoration:none;来去除a标签的下划线

 

　　text-indent 文本缩进

 

　　文本缩进属性是用来指定文本的第一行的缩进

 

　　也可以隐藏一个盒子中的文本

 

　　如

 

　　1em和当前字体大小相等。如在谷歌浏览器中默认字体是16px，

 

　　那么，1em的默认大小是16px。

 

　　word-wrap 设置当前行超过指定容器的边界时是否换行

 

　　首先要知道一种情况：如果容器中的单词过长，超出了容器本身的宽度会造成长单词溢出

 

　　word-wrap:break-word;可设置过长的文本自动换行。line-height 设置对象的行高（不允许使用负值）

 

　　normal 默认，设置合理的行间距

 

　　number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距

 

　　如果子标签是南标签，行高可以撑起子标签的高度

 

　　如果子标签是女标签，行高不能撑起子标签的高度

 

　　盒子模型

 

　　盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域：内容（content）、内边距（padding）、边框（border）、外边距（margin）。border 边框

 

　　border属性设置一个元素的边框，它有三个要素：宽、样式、颜色，统称边框三要素。

 

　　border的三要素可以统一写在"border"属性中，也可以单独设置

 

　　border-width: ;

 

　　border-style: ;

 

　　border-color: ;

 

　　在style属性为空的情况下，整个边框是不会出现的，不写width会有默认3像的值，不写颜色会默认为黑色。

 

　　margin 外边距

 

　　margin是围绕在元素边框周围的空白区域，会在元素外创建额外的空白区域，外边距是透明的

 

　　单边设置：

 

　　margin-top/right/bottom/left:value;

 

　　value可取值为像素、%、auto、负值

 

　　外边框简写：

 

　　margin:value（四个方向相同）;

 

　　margin:value（上下） value（左右）；

 

　　margin:value（上） value（左右） value（下）;

 

　　margin:value（上） value（右） value（下） value（左）

 

　　padding 内边距

 

　　内容区域和边框之间的空间，会扩大元素边框所占用的区域

 

　　语法： padding:value;

 

　　单边设置：

 

　　padding-top/right/bottom/left:value;

 

　　value可取值为像素，百分比，但不能为负数

 

　　padding的简写：

 

　　内容区域 width和 height

 

　　对于男盒子来说，表示内容区域

 

　　对于女盒子来说，width和height不起作用

 

　　> 注意点

 

　　1）不设有默认值，宽度默认值是auto，对于块级元素来说auto表示尽可能大，对于行内元素来说，auto表示尽可能小。

 

　　2）如果不设置高度，男盒子的高度是内容的高度，也就是说高度是由内容撑起来的，对于女盒子来说也是由内容撑起来的，但是和font-size也有关系。

 

　　3）宽度和高度可以设置百分比，是占父元素的百分比，一般情况下在移动开发时用的多一点。

 

　　background 背景

 

　　1.background-color：设置盒子的背景颜色 ，背景色可以填充padding，也可以填充margin

 

　　2.background-image：设置盒子的背景图片 img标签也是盒子 也可以给img这个盒子设置背景图片

 

　　一个盒子大小正好和背景图大小一样：正好装进去

 

　　一个盒子如果大于背景图：默认会在x和y轴进行平铺

 

　　一个盒子如果小于背景图：只会显示背景图的一部分背景图的左上角和盒子的左上角对齐，左上角是指从padding开始，但是border中也会填充背景图片

 

　　3.background-repeat：控制是否平铺

 

　　repeat-x 只平铺x轴 repeat-y 只平铺y轴 repeat x和y轴都平铺 no-repeat 不平铺

 

　　3.一个盒子中放一个大的或小的背景图，可以使用background-position进行定位

 

　　浮动

 

　　浮动的初衷：为了实现新闻的自围效果

 

　　浮动的元素半脱离标准文档流：

 

　　出国了

 

　　浮动刚开始是为了实现自围效果，文字并不会钻到浮动的元素后面，文字会环绕浮动的元素分布，就叫自围效果。

 

　　现在我们基本上利用浮动并不是为了实现自围效果， 我们主要使用浮动来让块级元素并排显示。

 

　　浮动元素的特点：

 

　　1.贴靠性 如果都向同一个方向浮动，这两个浮动的元素会紧紧地贴在一起，如果后面的空间不够贴靠的话，它会自动换行。

 

　　2.包裹性 如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小

 

　　3.一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下它的高度会变成0，也就是说父元素的高度塌陷了。

 

　　4. 如果一个女盒子浮动了，就可以设置宽度和高度，女盒子就变成了男盒子。

 

　　元素浮动会造成影响：

 

　　1.对父元素造成影响

 

　　2.对后面的兄弟元素造成影响

 

　　我们需要清除浮动所造成的影响，也叫清除浮动：

 

　　清除对父元素造成的影响

 

　　1.overflow:hidden

 

　　2.加高法

 

　　元素浮动也会对他后面的元素造成影响：

 

　　后面的元素会钻上去，但是文字不会，文字会形成自围效果。对兄弟元素造成影响，我们需要清除这种影响，也叫清除浮动。

 

　　最专业的：clear:left/right/both clear:both

 

　　clear:both只能写在第一个受影响的元素上，写在父元素上没效果

 

　　注意：

 

　　DIV中浮动的元素脱离不了父元素，可以影响父元素的高度，会跑到别的盒子中

 

　　如果一个盒子浮动，另一个不浮动或者定位（完全脱离标准文档流）可以让两个盒子重叠到一起

 

　　两个浮动的元素不能重叠到一起

 

　　浮动的元素都实现向上浮动到父盒子的边界

 

　　块级元素

 

　　div、p、h等

 

　　特点：

 

　　1.独占一行

 

　　2.默认宽度和父元素一样宽

 

　　3.css设定的宽高有效

 

　　行内元素

 

　　span、a、em、strong等

 

　　特点：

 

　　1.不会独占一行

 

　　2.宽度由内容决定

 

　　3.在css中设置宽度不起作用

 

　　行内块元素

 

　　img标签等

 

　　特点：

 

　　1.不会独占一行

 

　　2.可以设置宽高且有效

 

　　元素的模式转换

 

　　display:block;

 

　　把某个元素的显示模式修改为块级元素，在img标签设置这个属性可以去除图片默认的3px间隙

 

　　display:inline;

 

　　把某个元素的显示模式修改为行内元素

 

　　**display:inline-block;

 

　　把某个元素的显示模式修改为行内块模式

 

　　元素的显示和隐藏

 

　　display:none; 没有显示模式，既看不见也不占据位置

 

　　visibility:hidden; 隐藏，虽然看不见，但是占据位置

 

　　visibility:visible; 可见（visibility的默认值）

 

　　：link 控制a标签的地址没有被访问过的样式：visited 控制a标签的地址已经被访问过的样式：hover 控制a标签鼠标移动到之上的时候的样式，且 hover不仅仅是a可以使用，其他的元素也可以使用：active 控制a标签，在按下没有松开的时候的样式

 

　　相对定位 position:relative;

 

　　特点

 

　　（1）没有脱离标准流，还是会占据在标准流中的位置

 

　　（2）没有改变显示模式

 

　　（3）定位基准是他自己原来的位置

 

　　绝对定位 position:absolute;

 

　　特点

 

　　（1）脱离标准流，不占据原来的位置

 

　　（2）改变了元素的显示模式

 

　　（3）定位的基准是：

 

　　如果前代没有定位，绝对定位的基准是浏览器（body）

 

　　如果前代定位了，绝对定位的基准就是离最近的定位的前代元素

 

　　子绝父相 – 绝对定位和相对定位一起使用

 

　　目的

 

　　提高页面的加载速度，减少服务器的压力

 

　　制作

 

　　（1）一定要是小图片（最好是不太会发生变化）

 

　　（2）精灵图在制作的时候宽度一定要大于最大的那张图片的宽度

 

　　（3）图片与图片之间必须要有空隙

 

　　（4）在精灵图制作完成之后一定要将精灵图下方留出足够的位置，方便将来进行扩展