1、标签
文本标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
注意:
一级标题一般只使用一次,对网站logo使用
转译字符
空格
&&符
<<符
>>符
©备案中图标版权©
功能标记
<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:合并单元格的行数
表单
外部样式表使用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:不允许有浮动对象
注意:
这个属性只能影响使用清除的元素,不影响其他属性