1.外部样式表 css代码和html代码都单独放在不同的文件中 内部样式表:指的就是css和html代码放在同一个文件中 css样式放在style标签中定义 style标签必须放在head标签内 内联样式表: 把css代码和html代码放在同一个文件中,与内部样式表不同的是 css样式不是在标签对中定义,而是在style属性中定义
2.id和class id也可以写成name name是HTML的标准 id是XHTML的标准 现在网页的使用标准都是id
3.元素选择器: div{属性:属性值...} id选择器 #box{width:100px;height:100px} #(id选择符前缀)box(id名称) 大括号里的是属性:属性值 class选择器: .red{color:red;} .(class选择符的前缀) red(class名称) 大括号里面是属性:属性值
4.子元素选择器 :选中某个元素下的子元素 然后对该子元素设置css样式 #father(父元素选择) #p1(子元素选择){属性:属性值 } 说明:父元素和子元素必须用空格隔开
5.相邻选择器:#lv+div {color:red;} lv是元素a div是元素a的相邻的下一个兄弟元素
6.群组选择器 : h1,h2,h3 span{color:red;}
7.文本样式总结:font-family:字体名 font-size:像素值 color:字体颜色 在线调色板 font-weight 字体粗细 bold normal font-style(斜体) normal italic(斜体) oblique(直接倾斜)
8.css注释 /* */
9.text-decoration none underline下划线 line-throuth(删除线) overline(顶划线) text-transform none uppercase 转换成大写 lowercase 转换为小写 capitalize 每个单词的首字母大写 font-variant:normal small-caps(大写小型字母) text-indent:像素值 用来控制文本的首行缩进
text-align:left(左对齐)center(居中对齐)right(右对齐) 该标签只针对文本文字和img标签 line-height:像素值(行高) letter-spacing:像素值 字间距 word-spacing:像素值
10.边框样式 要设置一个元素的边框 必须设置以下三个方面 :1边框的宽度(border-width:像素值) 边框的外观(border-style:solid dashed) 边框的颜色(border-color) border :1px solid gray (大小 样式 颜色)
border-top border-bottom border-left border-right
11.背景颜色:background-color :颜色值
12.去除下划线的超链接 text-decoration:none
13.hover:用于指定当用户将鼠标悬停在元素上时应用的样式 :hover
很多人都以为设置图片水平对齐是在img标签设置,其实这是错误的。大家记住,图片是要在父元素中进行水平对齐的。在这个例子中,img元素的父元素是div,img元素是相对于div元素进行水平对齐的。因此要想对图片进行水平对齐,就要在父元素(div元素)中设置text-align属性。
14.vertical-align top 顶部对齐 middle 中部对齐 baseline 基线对齐 bottom 底部对齐
15.文字环绕效果-float left:元素向左浮动 right:元素向右浮动
16.设置图片与文字的间距:margin-top:像素值 margin-bottom;margin-left margin-right
17.border-collapse属性去除单元格之间的空隙 separate 默认值 边框分开不合并 collapse 边框合并 如果相邻则公用一个边框
18.border-spacing 表格边框间距 border-spacing:像素值 当设置了一个像素值时,这个值将用作横向和竖向 当设置了两个像素值时,第一个用做横向,第二个用作竖向
19.caption-side 表格标题位置 caption-side:top(默认值标题在顶部) bottom(标题在底部)
20.盒子模型:border 边框元素 margin 外边距 padding 内边距 content 内容
21.display:inlin-block 将元素呈现为内敛块级元素,可以自动调整宽度
22.padding :20 四个方向 20 40 上下20 左右40 上右下左
23.斜体
24.float:取值 left向左浮动 right向右浮动 变成浮动元素后 宽度不再延伸 而是由内容确定
25.clear清除浮动元素 clear:left(清除左浮动) right(清除右浮动) both(左右浮动一起清除 使用这一个足以)
26.固定定位元素 position:fixed(使得元素成为固定定位元素) 接着使用top bottom left right(这4个属性要联合一起使用) 当尝试拖动浏览器的滚动条 固定定位的元素不会发生位置变化 只需要使用top和left即可
27.相对定位元素 其位置是相对于它的原始位置计算而来的,相对定位是通过将元素从原来的位置向上,向下,向左,向右移动来定位的 positive:relative top bottom left right
28.绝对定位absolute(该元素浮与其他元素上面)