HTML+CSS属性

1、标签
文本标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

注意：
一级标题一般只使用一次，对网站logo使用
转译字符

 空格
&&符
&lt;<符
&gt;>符
&copy;备案中图标版权©

功能标记

<br>换行符
<hr>直线
<b></b><strong></strong>加粗内容
<em></em><i></i>倾斜
<u></u>下划线
<sup></sup>上标
<sub></sub>下标 例如：23

列表

无序列表

<ul>
    <li></li>
</ul>

有序列表

<ol>
    <li></li>
</ol>

注意：
type:规定列表中列表项目的项目符号类型 语法：

start属性规定有序列表的开始点 语法：

超链接应用

语法：
属性:target:页面打开方式 _blank在新页面打开 _self替换自己页面
表格

组成：

<table>
<tr>
<td></td>
</tr>
</table>

属性：
width:宽度
height:高度
border:边框
bgcolor:表格背景色
bordercolor:边框颜色
cellspacing:单元格与单元格之间的间距
cellpadding:单元格与内容之间的间距
水平对齐方式：align:left/center/right左、中、右
垂直对齐方式：valign:top/middle/bottom上、中、下
colspan:合并单元格的列数
rowspan:合并单元格的行数
表单

password:密码框 text:文本框 radio:单选框 submit:提交按钮 reset:重置按钮 控件内容为空时，设置默认内容：placeholder="内容" 2、CSS样式 样式表

外部样式表使用link标签引入
语法：

<link rel="stylesheet" type="text/css" href="路径">

外部样式表使用import导入
语法：

<style type="text/css">
@import url(路径);
</style>

内联样式表的优先级最高
内部样式表和外部样式表的优先级与书写顺序有关，后写优先级高
注意：
link属于XHTML标签，而@import完全是css提供的一种方式
当页面被加载时，link标签会同时加载，而@import会等页面全部加载完成时再被加载
@import只有在IE5以上版本才能识别，link无此问题
css选择器

元素选择器：p h1 div span a…
id选择器：#id名{属性：属性值}
class选择器：.class名{属性：属性值}
通配符:{属性：属性值}
伪类选择器：
:link{属性：属性值}超链接的初始状态
:visited{属性：属性值}超链接被访问后的状态
:hover{属性：属性值}鼠标经过时的状态
:active{属性：属性值}鼠标按下的状态

类型选择符的权重为0001
class选择符的权重为0010
id选择符的权重为0100
属性选择符的权重为0010
伪类选择符的权重为0010
伪元素选择符的权重为0001
包含选择符的权重为:所包含选择符权重之和
内联选择符的权重为1000
继承选择符的权重为0000
注意：
相同权重的选择符，样式遵循就近原则
伪元素与伪类
3、css核心属性
文本属性

文本大小:{font-size:字号} 单位:像素px

文本颜色:{color:颜色} 可直接颜色名，也可使用rgb三原色

文本字体:{font-family:字体一，字体二;}
注意：当字体是中文时，需要加引号
当英文字体有空格时，需要加引号
多个字体时，英文字体要写在中文字体前边

文字加粗:{font-weight:bolder(更粗的)/bold(加粗)/normal(常规)/600-900}

字体倾斜:{font-style:italic(倾斜)/oblique(倾斜)/normal(取消倾斜)}

水平对齐方式:{text-align:left/right/center}

垂直对齐方式:{vertical-align:top/bottom/middle/baseline(基线对齐)}

文字行高:{line-height:normal/高度;}

小型的大写字母:{font-variant:normal/small-caps(只对小写英文起作用)}

首行缩进:{text-indent:数值}(只对第一行起作用)

控制英文大小写:{text-transform:none(默认值)/capitalize(首字母大写)/uppercase(大写)/lowercase(小写)}

文本修饰:{text-decoration:none无修饰)/underline(添加下划线)/overline(添加上划线)/line-through(添加删除线)/blink(闪烁)}

字间距:{letter-spacing:数值}

词间距:{word-spacing:数值}

文本流控制:{layout-flow:horizontal(自左向右)/vertical-ideographic(自上而下)}

文本溢出属性:{text-overflow:clip(不显示省略标记(…))/ellipsis(溢出时显示省略标记);}

空余空间属性:{white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit}
normal:默认值，空白会被浏览器忽略
nowrap:文本不会换行，文本会在同一行上继续，直到遇到
为止
pre:空白会被浏览器保留
pre-wrap:保留空白序列，但是正常的进行换行
pre-line:合并空白序列，但是保留换行符
inherit:规定应该从父元素继承White-space属性的值;

自动换行设置方法：word-break:normal/break-all/keep-all;
normal:使用浏览器默认的换行规则
break-all:允许在单词内换行
keep-all:只能在半角空格或连字符出换行
注意：
font属性的简写顺序：font-style font-weight font-size/line-height font-family
只有同时指定font-size和font-family属性时才起作用，font-weight、font-style会使用默认值

使用text-overflow属性必须定义：
容器高度:width
强制文字在一行内显示:white-space:nowrap
溢出隐藏:overflow:hiddle
溢出文本显示省略号:text-overflow:ellipsis;
列表属性

列表符号样式:{list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)}
设置图片列表符号:{list-style-image:url(路径);}
列表符号定位:{list-style-position:outside(外边)/inside(里边)}
边框属性

border:边框宽度 边框风格 边框颜色
边框宽度:border-width;
边框颜色:border-color;
边框样式:border-style:solid(实线)/dashed(虚线)/dotted(点划线)/double(双线);
设置单方向边框：例border-top;
背景属性

背景颜色:{background-color:颜色值}
背景图片:{background-image:url(路径)}
背景图平铺:{background-repeat:no-repeat(不平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺);}
背景图固定性:{background-attachment:scroll(滚动)/fixed(固定);}
背景图定位:{background-position:left/center/right/数值 top/center/bottom/数值;}
浮动属性

float:left/right/none;
使块元素横向排列
清除浮动:clear:none/left/right/both;
left:不允许左边有浮动对象
both:不允许有浮动对象
注意：
这个属性只能影响使用清除的元素，不影响其他属性