css
1.内部样式表
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
行内式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
外部样式表
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
2.标签选择器
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
多类名选择器
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
id选择器
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
通配符选择器
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
3.css样式属性
font-size:字号大小
font-family:字体
font-weight:字体粗细
font-style:字体风格
font:综合设置字体样式
选择器{font: font-style font-weight font-size/line-height font-family;}
4.css外观属性
color:文本颜色
line-height:行间距
text-align:水平对齐方式
text-indent:首行缩进
text-decoration 文本的装饰
1.属性标签<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名> 如<color=xxx>
2.图像标签<img src="图片路径"/>
3.链接标签<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
4.锚点定位<a href="#111">链接文本文本</a> <h1 id="111">创建锚点链接,能快速定位到目标内容
5.路径 同级路径 < img src="xxx.jpg" >上一级 < img src="../xxx.jpg" >下一级 输入文件夹及文件名如 img src="img/xxx.jpg"
6.无序列表 无序列表的各个列表项之间没有顺序级别之分,是并列的
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
有序列表 有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
自定义列表 定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
7.创建表格
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
1.table用于定义一个表格。
2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。
3.td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。
背景图片
background-image : none | url (url)
背景平铺
background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat : 背景图像在纵向和横向上平铺(默认的)
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
背景位置
background-position : length || length
background-position : position || position
length : 百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right
浮动(float)
属性值 | 描述 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 元素不浮动(默认值) |