关键字：HTML常用标签,CSS，CSS文本样式,盒子模型
html文本的内部基本结构
1.<!doctype html>:编写文档说明；
2.<html> 网页中的根标签
3 <head>
<meta charset="utf-8" />：设置页面的字符集
<title>title</title>
</head>
4.<body>
图像标签
<img src=" " alt=" " width=" " height=" " title=" "/>
alt:图像替代文字
title:鼠标悬停时显示的文字
链接标签
A标签
href: 链接路径
target:链接在哪个窗口打开,常用值：_self、_blank
CSS
CSS复合选择器
后代选择器
交集选择器
并集选择器
HTML中引入CSS样式
-
行内样式
内部样式表 -
CSS代码写在<head>的<style>标签中
优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底 -
外部样式表
<link href="style.css" rel="stylesheet" type="text/css" />
字体样式
属性名 含义 举例
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 设置所有字体属性 font:italic bold 36px "宋体";
文本样式文本属性
属性 含义 举例
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
vertical-align设置垂直对齐方式：middle、top、bottom；
伪类
:hover
伪类将应用于有鼠标指针悬停于其上的元素。
网页背景颜色
Web字体
Font Awesome---提供可缩放矢量图标 (<i>标签）
使用步骤
1.引入css
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
2.你可以通过设置CSS前缀fa和图标的具体名称，来把Font Awesome 图标放在任意位置。Font Awesome 被设计为用于行内元素（我们喜欢用更简短的<i>标签，它的语义更加精准）。
3.如果您修改了图标容器的字体大小，图标大小会随之改变。同样也适用于颜色。
盒子模型
div
每个div可以看成一个盒子;
一个盒子中主要的属性有5个：width、height、padding、border、margin.
- 外边距的妙用
网页居中对齐
前提，居中对齐的网页元素必须设定宽度。
margin:0px auto;
重置默认样式
为了兼容性，凡是浏览默认的样式，都不要使用。
重置默认样式 (css reset)
/*默认样式重置(css reset)*/
body, p, h1, h2, h3, h4, h5, h6, dl, dd {
margin: 0;
font-size: 12px; /* 中文字体大小的最小值 */
}
ol, ul {
list-style: none; /* 去除列表样式 */
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
元素分类
行级（内联）元素
块级元素
内联块元素
行级元素
a
strong
em
span
内嵌元素的特性：
1.默认同行可以继续跟同类型标签
2.内容撑开宽度
3.不支持宽高
4.不支持上下的margin
块级元素
p
div
h1~h6
ol-li
ul-li
dl-dt-dd
块元素的特性
1.默认独占一行显示
2.没有宽度时，默认撑满一排
3.支持所有css命令
内联块元素—代表元素img
inline-block的特点：
元素在一行显示
支持宽高
没有宽度的时候内容撑开宽度
display属性
控制元素的显示和隐藏
块级元素与行级元素的转变
值 说明
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block 内联块元素
none 设置元素不会被显示
背景图像
背景图像（属性
（块级标签里添加背景图像）
background-image属性
background-image:url(图片路径);
背景重复方式
background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
背景定位
background-position属性
Xpos Ypos
单位：px
Xpos表示水平位置，Ypos表示垂直位置
X% Y%
使用百分比表示背景的位置
X、Y方向关键词
水平方向的关键词：left、center、right
垂直方向的关键词：top、center、bottom
网友评论