导入css的文件的方式：
行内样式：只作用于标签内
内嵌样式（常用）：只作用于本文件中
外部样式表（常用）：可作用于所有文件,哪个文件需要用，就可以引用 格式：
导入样式表：用来管理@import url(另外一个css样式)
注意：@import是css样式标签，所以必须放到css文件中
选择器的分类：
基本选择器：
标签选择器:选择给哪个标签加样式，自动指向该标签
语法：标签选择器名{属性：属性值}
body{} p{} div{} table{} td{} ul{}
类选择器:给一个类html标签加样式
语法：类选择器名{属性：属性值}，主要是给css使用
id选择器：给特定的html标签加样式
语法：id 选择器{属性：属性值}
例如：#p{} #body{} #table{}
id只能被引用一次，主要是给javascript使用
通用选择器:给所有的标签加样式
语法：*{属性：属性值} 但IE6不支持
复合选择器：
多元素选择器：多个标签共有的属性和属性值，放到一起
语法：选择器，选择器，选择器......{共有的属性：属性值}
后代元素选择器：给html的后代标签加样式（在一个选择器里面的子选择器加样式）类里所有的标签
语法：选择器1 选择器2 选择器3{属性：属性值}
子元素选择器：给某个标签里面的第一层的标签加样式
语法：选择器1<选择器2
伪类： -----锚(内容必须做好链接)
a:link: 未访问的链接样式
a:visited: 访问过的链接样式
a:hover: 鼠标移动上的链接样式
a:active:鼠标点击激活时的链接样式
文本的属性：
font-size:文本的大小 例如 font-size:12px
font-weight: 文本是否加粗 font-weight:bold
font-style:文本是否倾斜 font-style:italic；倾斜 font-style:normal;正常
font-family:文字的字体 font-family:隶书；默认是宋体
text-decoration: 文字是否加划线 text-decoration:underline;下划线 textdecoration:overline 上划线 text-decoration: line-through;删除线
text-indent:文本首行缩进 text-indent:2em
color 文本的颜色 color:red
letter-spacing: 字母和字母之间的间距 letter-spacing:2px;
word-spacing:单词和单词之间的间距 word-spacing:2px;
text-align:文本居中 text-aling:left 居左 text-align:right居右 text-align:center 居中
背景的属性：
background-color:背景颜色
background-image:背景图片
background-attachment：背景附件，背景是否随着上方的内容一起滚动 取值：fixed ：背景固定，scroll滚动；
background-repeat:背景图片是否平铺 取值：no-repeat不平铺 repeat-x横向平铺 repeat-y纵向平铺 repeat 横向和纵向都平铺（默认）
background-position:背景图片的展开方式 例如：background-position:水平 垂直；
怎么表示：水平：left center top 垂直：top center bottom 例如:background-position:10px 20px(代表靠左10px，靠右20px展开)
可以简写：background:背景颜色 背景图片 背景是否平铺 （背景附件通常仅用在body标签用）水平 垂直;
background:url(images/bg.jpg) repeat-y fixed center 20px;
列表的样式：
修改有序列表和无序列表前面的项目符号：
ol,ul {list-style:normal} 修改为无符号
ol,ul{list-style-image:url(images/protitle.jpg)}
表格的样式：
合并表格和单元格的边框线：
table{/*表格*/
width:800px;
border:1px solid blue;/*边框线：1像素 实线 蓝色*/
border-collapse:collapse；/*合并表格的边框线*/
}
td{/*单元格*/
border:1px solid blue;
}
边框（html标签就可以加边框线）：
上下左右的边框都一样的话，直接写border就可以了
上边框：
border-top-color：颜色值；上边框的颜色
border-top-style：线型；线型有solid 实线、dashed 虚线、dotted 点状线
border-top-width：粗细；像素值，2px...
简写：border:1px solid blue;
下边框：
border-top-color：颜色值；上边框的颜色
border-top-style：线型；线型有solid 实线、dashed 虚线、dotted 点状线
border-top-width：粗细；像素值，2px...
简写：border:1px solid blue;
左右：border-left border-right...
盒子模型：
内容区：width和height
边框：border
内边距：padding 内容和边框之间的距离
分为：上右下左 padding-top padding-right padding-bottom padding-left
外边距：margin 边框之外的距离
分为：上右下左 margin-top margin-right margin-bottom margin-left;
注意：如果是文档流(纵向排列)，设置外边距，取两个盒子模型之间最大的间距
排列布局：
主流布局：left left right left left left
文档流（纵向排序）:div默认布局
横向排序:float
常见情况：盒子里嵌套盒子
浮动：
特点：
设置浮动的元素，不占空间
设置浮动的元素层级高于普通元素
设置浮动之后，无论之前是否是块元素，设置浮动之后一定是块元素
如果一行中的元素想横向排列，都设置浮动就可以
布局思想：
清除格式。 *{padding:0; margin:0}
设置页面属性。 设置body{} body{font-size:14px; font-family:宋体;color:#000000;background-cplpr:#e2e2e2; line-height:150%;}
把整个页面划分结构。 如头部 内容等等的结构划分，使用div来划分
块和行内元素的转换：
行内元素：不是自己独占一行，行内元素的宽和高是由内容来决定的（设置宽高无法使用），默认的css样式是display:inline
span b i u strong a
块元素： 自己独占一行，默认宽高是0，根据宽高的内容来决定，（宽高可以设置使用），默认的css样式是:display:block
div p table ul li ol dl dt dd h1...
块->行内：
块转行内:display:inline
行内->块：
行内转块:display:block
图片溢出：当图片比块元素大时，便会溢出
使用overflow：hidden
继承：
子元素会继承父元素的设置的属性，但自己有的属性，不会向外继承
优先级：
单个选择器的优先级：
行内样式表(style) > id选择器 > 类选择器 > 标签选择器
复合选择器的优先级：
写的越精确，优先级越高 > .class ul li{} > ul li{} > li{}
浮动造成的影响和解办法：
由于父控件不能给固定高，应该根据内容来自适应高，所以在父控件里所有的div后面再加一个div，并设置这个div的clear属性为both;
clear:both;
清除浮动：
clear:left;/*清除左浮动*/
clear:right;/*清除右浮动*/
clear:both;/*清除左右浮动*/
盒子的深入计算：
计算公式：内容的width + Margin + Padding
注意：正常的文档流，margin计算时取最大值
定位(position)：
方式：
static，默认设置
fixed，固定位置。不占空间。滚动时，也在原来的位置 设置偏移:left right bottom top 如bottom:5px;
relative，相对定位。占空间。需要结合定位坐标。如果不结合定位坐标，就是原来的位置；如果结合定位坐标，相对于自身为参考点。（一般结合绝对定位来实现）
absolute，绝对定位。不占空间。不结合定位坐标，就是原来的位置；如果结合定位坐标，以设置定位坐标的父控件为参考点，如果父控件没有设置position，会找父父控件的position，一直找到父级有设置position的控件为止，来做参考点
网友评论