CSS：页面美化和布局控制

一、CSS的使用：CSS与html结合使用方式

　　1.内联样式

　　　* 在标签内使用style属性指定css代码，如：

　　　 <div style="color:red;">hello css</div>

　　2.内部样式

　　　* 在head标签内，定义style标签，style标签的标签体内容就是css代码，如：

<style type="text/css">
     div{
         color:blue; 
        } 
</style>
<div>hello css</div>

　　3.外部样式

　　　* 定义css资源文件

　　　* 在head标签内，定义link标签，引入外部的资源文件。如：

a.css文件：
    div{
        color:green;
    }
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>

4.选择器：刷选具有相似特征的元素

　　　(1) 基础选择器

　　　　　1） id选择器：选择具体的id属性值的元素。建议在一个html页面中id值唯一

　　　　　　　* 语法：#id属性值{}

　　　　　2）元素选择器：选择具有相同标签名称的元素

　　　　　　　* 语法：标签名称{}

　　　　　3）类选择器：选择具有相同的class属性值的元素

　　　　　　　* 语法：.class属性值{}

　　　　(2) 扩展选择器：

　　　　　 1）选择所有元素：

　　　　　　　* 语法：*{}

　　　　　 2）并集选择器：

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

　　　　 3）子孙后代选择器：刷选选择器1元素下的所有属于选择器2的子孙元素

　　　　　　　　* 语法：选择器1 选择器2{}

　　　　　 4）子元素选择器：刷选选择器1元素下的所有属于选择器2的子元素

　　　　　　　 * 语法：选择器1>选择器2{}

　　　　　　5）属性选择器：选择标签名，属性名=属性值元素

　　　　　　　　 * 语法：标签名[属性名="属性值"]{}

　　　　　　6）伪类选择器：选择一些元素具有的状态

　　　　　　　　 * 语法：元素:状态{}

　　　　　　　　 * 如：<a>

　　　　　　　　　　* 状态： * link：初始状态

　　　　　　　　　　　　　　* visited：被访问过的状态

　　　　　　　　　　　　　　* active：正在访问状态

　　　　　　　　　　　　　　* hover：鼠标悬浮状态

二、CSS的三大特性

1.继承：元素可以继承上级元素的文本和字体相关样式，部分标签自带效果不受继承影响，比如：超链接的字体颜色、h1~h6字体大小都不受继承的影响。

　　2.层叠：多个选择器有可能选择到同一元素，给元素添加样式时，如果添加的样式不同则全部层叠生效，如果样式相同则只能生效一个，由优先级决定哪个生效。

　　3.优先级：作用越小优先级越高，id>class>标签名>继承(属于间接选中)

三、CSS之盒子模型

CSS基础内容

　　1.盒子模型之外边距:margin

　　　　（1）元素距上级元素或相邻兄弟元素的距离为外边距.用来控制元素的显示位置 margin-left/right/top/bottom:10px；单独某一个方向赋值 margin:10px 四个方向赋值 margin:10px 20px ，上下10px，左右20px； margin:0 auto: 块级元素居中 margin:10px 20px 30px 40px；上右下左顺时针。

　　　　（2）左右相邻外边距累加,上下相邻外边距取最大值

　　　　（3）粘连问题：当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距，会出现粘连问题，通过给上级元素添加overflow:hidden方式解决　　

　　　　（4）行内元素上下外边距无效

　　2.盒子模型之边框：border

　　　　 (1)border：粗细边框样式颜色；四个方向添加边框

　　　　 (2)border-left/right/top/bottom：粗细边框样式颜色；单独某个方向添加边框

　　　　 (3)圆角：border-radius:5px；值越大越圆

3.盒子模型之内边距：padding　　

　　　　（1）什么是内边距：边缘距内容的距离，用来控制元素内容的位置

　　　　（2）赋值方式：(类似外边距)

　　　　　　1）padding-left/right/top/bottom：10px；单独某个方向赋值

　　　　　　2）padding:10px；四个方向赋值

　　　　　　3）padding:10px 20px；上下10px ；左右20px

　　　　　　4）padding:10px 20px 30px 40px;上右下左

　　　　（3）如果需要移动元素的子元素位置有两种方式：

　　　　　　1）给元素添加内边距移动，会影响元素宽高

　　　　　 2）给子元素添加外边距移动，不会影响元素宽高，但是需要考虑粘连问题（如果粘连是在父标签写overflow：hidden）

四、CSS之定位方式

　　1.文档流定位(默认)

　　　　（1）又称为静态定位，元素默认的定位方式为文档流定位

　　　　（2）格式: position:static；

　　　　（3）元素显示特点：块级元素从上往下排列行内元素从左向右排列

　　　　（4）如何控制元素的显示位置：通过给元素添加外边距

　　2.相对定位

　　　　（1）格式: position:relative;

　　　　（2）元素显示特点: 元素不脱离文档流(不管元素移动到什么位置原来的位置仍然占着)

　　　　（3）如何控制元素的显示位置：通过left/right/top/bottom 让元素相对于初始位置做位置偏移.

　　3.绝对定位

　　　　（1）格式: position:absolute;

　　　　（2）显示特点: 元素脱离文档流(元素会把之前所占位置让出)

　　　　（3）如何控制元素的显示位置：通过left/right/top/bottom 让元素相对于窗口或某一个上级元素做位置偏移(需要给上级元素添加position:relative)

　　4.固定定位

　　　　（1）当元素需要固定在窗口的某个位置的时候使用固定定位

　　　　（2）格式：position:fixed；

　　　　（3）显示特点：元素脱离文档流

　　　　（4）如何控制元素的显示位置：通过left/right/top/bottom 让元素相对于窗口做位置偏移

　　5.浮动定位

　　　　（1）格式：float:left/right；

　　　　（2）显示特点：元素脱离文档流，元素从当前所在行向左或向右浮动，当撞到上级元素边缘或其它浮动元素停止

　　　　（3）当需要将纵向排列的元素改成横向排列时使用浮动定位

　　　　（4）如果元素的所有子元素全部浮动则自动识别的高度为0，给元素添加overflow：hidden；解决此问题

　　　　（5）浮动元素受上级元素宽度影响，如果一行装不下会自动换行；换行时有可能被卡主

　　6.行内元素的垂直对齐方式vertical-align

　　　　（1）baseline 基线对齐 (横格本第三条线)

　　　　（2）top 上对齐

　　　　（3）middle 中间对齐

　　　　（4）bottom 下对齐

CSS基础内容

CSS：页面美化和布局控制

相关推荐