在页面中引入CSS:
l 嵌入式:<style type=“”></style>
l 行内式:写在第一个标签中 <h1 style=“”></h1>
l 链接式:<link href=“html.css” type=“text/css” rel=“stylesheet”
- 选择器:
l 标签选择器:
l Id选择器:“#”
l 类别选择器:“.”
l 复合选择器{交集选择器:“无空格,标签+id/class”;并集选择器:(风格完全相同或者基本相同时,可使用并集选择器,用逗号隔开);后代选择器:“空格”}
l 全局:*{margin=0;padding=0;}
- CSS的继承特性:
l 子标签可继承父标签的特性
l 子标签也可单独设置自己的特性
- CSS的层叠特性:
行内式>id选择器>类别选择器>标签选择器
- 盒子:
A:盒子组成:
l Border:边框
l Padding:内边距
l Margin:外边距
l Width:宽
l Height:高
B:边框属性:
l Border:1px #fff solid;
l Border-color:表框颜色
l Border-style:边框类型
l Border-width:边框宽度
Border-top-color: ;border-left-style: ;border-bottom-width: ;
- 文字的属性:
l Font-size:12px; 文字尺寸
l Color:#fff; 文字颜色
l Font-weight:bold; 加粗
l Font-famliy:“黑体”; 文字字体
l Text-decoration:underline; 文字样式—下划线(是否具有下划线)
l Text-transform:uppercase; 文字大小写—大写(英文全部变成大写)
l Line-heifht:60px; 行高(设置行高和文字的垂直居中方式)
l Font-style:Italic; 文字样式—斜体(是否斜体)
l Letter-spacing:50px; 文字间距
l Overflow:hidden; 溢出处理,隐藏溢出文字
l Display:none; 隐藏标签
l Display:inline; 块级元素变成行内元素
l Display:block; 行内元素变成块级元素
/*在HTML中常用的行内元素包括<Span><a><b><u><font><strong>等标签*/
/*行内元素的特性:所有的行内元素在一行显示,并且不能设置其宽和高*/
/*在HTML中常用的块级元素包括<div><p><ul><li><hx><ol>等标签*/
/*块级元素的特性:在页面中独占一行,顺次向下排列*/
![](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvMzU2OTUvMjAyMjAxLzM1Njk1LTIwMjIwMTA0MTQ0NTU3OTczLTU0NjEyODcyOC5qcGc%3D.jpg?w=700)