引入css
<link href="xxx.css" rel="stylesheet" type="text/css">
rel:告诉浏览器引入的是一个样式表文件
type:文件的类型
href:路径
路径：
1.绝对路径：
- 本地存放文件的地址 D:\miaov\4-12\index.css
- 网络地址 https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491994791514&di=798f627c77983625c2a311a600f51edc&imgtype=0&src=http%3A%2F%2Fimg.tuku.cn%2Ffile_big%2F201507%2F6568e0bd07c6474a9fa400942ad1fa19.jpg
2.相对路径： - 相对于当前文件 的路径
例：
index.css 当前文件下的index.css文件
css/index.css 当前文件下的css文件夹里面的index.css文件
边框 border
- 颜色color ：transparent 透明
- 样式 style：solid 实线、dashed虚线、dotted点线
- 大小width：
- border-width：40px ；相当于设置上右下左4条边框都是40px
- border-width ：10px 40px ；相当于设置 上下边框是10px 左右边框是40px
-border-width: 10px 40px 100px；上边框 10px 左右边框都是40px 下边框是100px
注意 针对同一个元素的相同样式设置，后者覆盖前者
背景 background
- position定位：position(x,y)
X轴
1.（关键字） left 图片的左侧和元素的左侧对齐
2.（关键字） center 图片的中间和元素的中间对齐
3.（关键字） right 图片的右侧和元素的右侧对齐
1.（具体的数值）正值 图片往右移动对应的距离
2.（具体的数值）负值 图片往左移动对应的距离
Y轴
1.（关键字）top 图片的顶部和元素的顶部对齐
2.（关键字）center 图片的中间和元素的中间对齐
3.（关键字）bottom 图片的底部和元素的底部对齐
1.（具体的数值）正值 把图片从上往下移动对应的距离
2.（具体的数值）负值 把图片从下往上移动对应的距离
百分比
图片的百分比位置和元素的百分比位置对齐
- attachment 背景图片固定
1.scroll 滚动
2.fixed 固定（位置不随着页面的滚动而变化）
注意：使用fixed之后背景图片位置的position计算方式就不是根据元素的左上角进行计算了，而是根据可视区的位置
字体font
样式：
-
font-style:italic斜体 -
font-weight:bold加粗 -
line-height:行高值是具体的数字
*带单位 行高就是具体的像素值
*不带单位 行高是字体大小的倍数
*文字上下的所空出的距离 = （行高-字体大小）/2，如果这个值变成了一个小数，那么上面小下面大
样式集合
固定顺序：font:weight style size/line-height family
font:bold italic 20px/40px '微软雅黑'font-size,font-family是必写项
文本
text-align 文字对齐
text-decoration 文本修饰
*underline 下划线
*line-through 删除线
*overline 上划线
间距（可以是负值）
letter-spacing 字母间距/字间距
word-spacing 单词间距/词间距
white-space:
white-space: pre; //保留文本输入格式
white-space:pre-wrap; //保留空白符序列，但是正常地进行换行
white-space:pre-line; //合并空白符序列，但是保留换行符
white-space: nowrap; //制不换行，文本在元素中一行显示，不换行
词内断行 word-break: break-all;
padding
1.padding区域可以显示元素背景
margin 外边距
1.margin叠压：两个相邻元素的margin是叠压在一起的，距离以大的为准
2.margin传递：元素的上下margin会传递给父级，（父元素的第一个子元素的上margin、父元素的最后一个子元素的下margin，会传递给父级（作用在父级身上））
- margin-left: auto; (元素在父级中居右显示)
- margin-right: auto;(元素在父级中居左显示)
- margin: 0 auto; (元素在父级中水平居中显示)
a标签
- 不会继承父级的字体颜色，必须在自己身上设置
- 换行会产生空格（解决：1.不换行 2.设置父级的字体大小为0）
- href值为#id名称 跳转至id元素所在位置
- target 在何处打开链接
<a href="17-红色背景页.html" target="_blank" >点击跳转打开新窗口</a>
<a href="17-红色背景页.html" target="_self" >点击跳转当前窗口打开</a>
- base 定义页面上所有的链接的默认打开方式 和 默认地址
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
-
a标签下划线的颜色和字体颜色一致
常用布局标签
dl 定义列表
dt 定义列表的列表项
dd 对dt展开说明
- header 页面头部或者板块头部
- footer 页面底部或者板块底部
- section 区域板块
- nav 导航
- article 一篇文章，或者帖子
- aside 附属信息，一般用在article的属性信息,或者作为整个页面附属，如侧边栏
- cite 引用
- mark 标记 （清除：background-color:none;）
- time 时间
图片 img
图片默认样式清除：vertical-align: top;
-top 以顶部对齐
-middle 以中部对齐
-bottom 以底部对齐
清除底边距离：border: none;
（低版本ie 下边框）
表格 table
- caption表格标题 （可以没有）
- thead 表头
- tbody 表格主体
- tfoot 表格底部（可以没有）
- tr 行/th 单元格 (加粗、居中)/td 单元格
表格默认样式
td和th有padding（padding 0），一般在td和th上设置背景颜色
直接设置在表格上的内容： - cellspacing 单元格间距 (直接加在html里面）
cellspacing='10px'; - cellpadding 单元格填充
cellpadding='10px'; - rowspan 合并行
rowspan="2";//合并两行 - colspan 合并列
colspan="2";//合并两列
加在样式表中间的内容 - border-spacing 单元格间距
- border-collapse 边框合并
border-collapse:collapse;//合并
border-collapse:separate;//分离（默认）
在td、th元素上设置的内容
- 单元格设置宽度，一列宽度都会进行变化
- 单元格设置高度，一行高度都会进行变化
- 单元格的内容垂直对齐方式 通过修改单元格的vertical-align(top/middle/bottom)
表单form
- action 数据的提交地址,数据提交成功之后的跳转地址
- name 数据名称 (添加name来提交数据)
- type 类型
text 文本输入框
password 密码输入框
radio单选框
checkbox 多选框(复选框)
submit 提交按钮
reset 重置按钮
file 选择文件
hidden 隐藏控件 - select 下拉菜单
option 下拉菜单的选项 - textarea 文本域
rows 行
cols 列 - label标签的使用
for属性 要辅助的按钮的id名
表单的属性
readonly 只读属性 可以被提交
disabled 禁用或者说不可用的 不会被提交
checked 单选框或者复选框的默认选中
selected 设置下拉菜单的默认选中项
网友评论