CSS的简介 概述: Cascading Style Sheets, 层叠样式表. 作用: 用来美化页面的. 分类: 行内样式: //直接写在元素(html的标签)中的样式. 内部样式: //写在<head>标签的,<style>标签中. 外部样式: //写在后缀名为.css的文件中. CSS的引入方式之: 行内样式. 格式: <div style="属性名:属性值; 属性名:属性值"></div> 作用: 只针对于当前元素有效. CSS的引入方式之: 内部样式. 格式: //写在<head>标签的,<style>标签中. 选择器{ 属性名:属性值; 属性名:属性值; } 作用: 针对于当前页面内的部分元素有效. CSS的引入方式之: 外部样式. 格式: //后缀名为.css的文件中 选择器{ 属性名:属性值; 属性名:属性值; } 作用: 可以用来统一整个网站的风格. CSS中的选择器: 元素选择器: 格式: 元素名{ 属性名: 属性值; 属性名: 属性值; } 作用: 针对于该类元素有效. id选择器: 格式: #选择器名{ 属性名: 属性值; 属性名: 属性值; } 作用: 给指定id(id名和选择器名一样的元素)设置样式的. //记忆: 每个标签都有id属性, id属性尽量保证唯一. 类选择器: 格式: .选择器名{ 属性名: 属性值; 属性名: 属性值; } 作用: 用来设置某类元素(class属性的值为 选择器名的元素)的样式的. 后代选择器: (元素,id,类)选择器 元素名{ //样式 } 作用: 设置指定的元素内的 指定的"子标签"的样式的. 伪类选择器: a:link{} //未选中连接 a:active{} //选定的链接 a:visited{} //已访问的链接 a:hover{} //鼠标移动到链接上 作用: 主要用来操作超链接的. CSS的样式 背景: background-color: 设置背景色 字体: font-size: 设置字体大小 文本: text-decoration:将其值设置为:none,可以取消超链接字体的下划线. color: 设置字体的颜色 边框: border: 1px solid blue; //1像素, 蓝色实线 //solid: 单实线, double:双实线 dotted:(点)虚线 dashed:(-)虚线 设置标签的宽度 height: 设置标签的高度 CSS的浮动 概述: 通常情况下页面的布局: 从上往下逐行分布. 有些时候我们需要页面中的布局方式是从左往右, 或者从右往左之类的自定义页面布局, 就需要用到: 窗体浮动. float: //设置浮动. 属性值: left, right clear: //清除浮动. 属性值: both CSS的盒子模型 概述: 也是用于布局的. 正常的一个页面可能有多个div, 每个div的里边可能有其他元素(元素和div之间的间距叫内边距), div与div之间有可能也是有间隙的(外边距). 外边距: margin 内边距: padding margin: 值1 值2 值3 值4; //离上,右,下,左的间距分别是: 值1 值2 值3 值4; margin: 值1(上下) 值2(左右); //离上,右,下,左的间距分别是: 值1 值2 值1 值2; margin: 值1; //离上,右,下,左的间距分别是: 值1 值1 值1 值1;