1.CSS :指层叠样式表 (Cascading Style Sheets)。后缀名:.css
2.页面要用CSS样式,有三种引用方式:谁最后执行,谁的优先级更高(就近原则)。
2.1:行内样式:W3C不推荐使用。缺点:不能实现样式复用。内容和样式写在一起,违背了W3C 的规范。
<!--行内样式-->
<h1 style="color:red;">祝大家新年好</h1>
2.2:内部样式:写在head标签内部。优点:可以页面内样式复用。缺点:不能实现页面间的样 式复用。
<!--内部样式-->
<style type="text/css">
h1{
color: blue;
}
</style>
2.3:外部样式(推荐):先写一个css文件,再在head标签中引入这个文件。优点:可以实现样 式复用。
<link rel="stylesheet" type="text/css" href="css/3.css" />
3.CSS的使用总语法:
选择器{
样式名1:值1;
样式名2:值2;
......
}
4.CSS的选择器:
4.1:标签选择器:以标签名作为选择器的名称。
eg:h1{
color:blue;
}
4.2:类选择器:哪个标签要用类选择器,这个标签就先得取类名,以.类名开头。
在同一个页面同一个类名在多个地方用。
eg:<!--给标签取类名-->
<h1 class="c1 c5">你要回家</h1>
/*类样式*/
.c1{
color:gray;
}
4.3:ID选择器:哪个标签要ID选择器,这个标签就先得取ID名,以#ID名开头。
在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。在同一个页面,同一个id名只 能用在一个地方。
eg:<!--给标签取ID名-->
<h2 id="d1">天王盖地虎</h2>
/*id样式*/
#d1{
color:blueviolet;
}
4.4:三种基本选择器的优先级由高到低:id选择器>类选择器>标签选择器
4.5:通用选择器:*,表示选页面上所有的标签。
eg:/*通用选择器*/
*{
color:red;
}
4.6:群组选择器:给多个选择器同时设置样式,多个选择器之间用逗号隔开。
eg:/*群组选择器*/
h1,h3,h6{
color:yellowgreen;
}
4.7:后代选择器:给某个选择器的后代(子子孙孙)选择器设置样式,选择器之间用空格分开。
eg:/*后代选择器*/
p span{
font-size: 24px;
color: red;
}
4.8:子选择器:只给某个选择器子选择器设置样式,选择器之间用>分开。
eg:/*子选择器*/
p>span{
font-size: 24px;
color: red;
}
4.9:相邻兄弟选择器:选中当前元素后面一个弟弟元素,选择器之间用+分开。
eg:/*相邻兄弟选择器:选中当前元素后面一个弟弟元素*/
h1+h2{
color:brown;
}
4.10:属性选择器:[属性名],只要是包含这个属性的标签全选中。
eg:/*属性选择器*/
[class]{
color: green;
}
4.11:超链接伪类选择器:
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
5.CSS样式:
5.1:字体样式
eg:/*字体样式*/
p{
/*字体颜色*/
color:red;
/*字体大小*/
font-size: 50px;
/*字体类型*/
font-family: "宋体";
/*字体倾斜*/
font-style: italic;
/*字体粗细*/
font-weight: bolder;
}
/*字体的总样式*/
font:italic bolder 50px "宋体";
color:red;
5.2:文本样式
eg:/*文本样式*/
/*首选缩进*/
text-indent: 30px;
/*字符间距*/
letter-spacing: 10px;
/*文本对方方式*/
text-align: left;
/*行高:使字体在垂直方向居中*/
line-height: 30px;
/*文本修饰*/
text-decoration: line-through;
5.3:背景样式
eg:/*背景颜色*/
background-color: greenyellow;
/*背景图片,与背景颜色不能同时设置,背景图片会将背景颜色给覆盖*/
background-image: url("img/b.jpg");
/*背景平铺方式*/
background-repeat:no-repeat;
/*背景位置*/
background-position: 100px 300px;
背景样式的整体设置:
/*设置背景的整体样式*/
background: url(img/b.jpg) 100px 200px no-repeat;
5.4:列表项样式
eg:/*去掉列表项图标
list-style: none;*/
/*设置列表项图标
list-style-image: url(css/num_01.gif);*/
/*设置列表项图标的位置,outside图标不占li宽度,inside图标占用li宽度
list-style-position: outside;*/
/*图标样式*/
list-style-type: decimal;
5.5:边框样式:
eg:/*边框样式*/
/*边框的粗细
border-width: 2px;*/
/*边框颜色
border-color: red;*/
/*边框线的样式
border-style: solid;*/
/*边框总样式*/
border: dashed 5px red;
6.盒子模型:盒子模型的方位设置顺序:上右下左,上下和左右。
元素
内边距(padding):元素到边框之间的距离。
外边距(margin):元素边框与周围元素边框之间的距离。
边框
eg:border: solid 1px red;
/*内边距*/
padding: 30px 50px;
/*外边距*/
margin: 50px 100px 200px 30px;
盒子模型的宽度=元素宽度+左右内边距+左右边框。
盒子模型的高度=元素的高度+上下内边距+上下边框。
能用外边距调样式就不要用内边距。
7.CSS 定位 (Positioning) 属性允许你对元素进行定位。
css定位:静态定位static(平时用),绝对定位absolute,相对定位relative,固定定位fixed。
7.1:相对定位:相对于原有的位置发生改变,并且保留原有的空间位置。没有脱离标准文档流 (占了标准文档流位置)。
eg:/*相对定位*/
position: relative;
left: 200px;
top: -100px;
7.2:绝对定位:相对于他有position属性的父级元素进行定位,如果父级元素没有postion定 位,那么就找父级的父级,直到向上找到position定位为止,如果他 向上找不到position定位,那么就以最外层的body进行定位。
脱离标准文档流(不占用标准文档流位置)
eg: /*绝对定位*/
position: absolute;
left: 200px;
top: 100px;
7.3: 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
z-index:定位元素所在的层次。
eg:/*固定定位*/
position: fixed;
left:500px;
top:100px;
z-index: 1;
8.浮动:float,将块级元素变成行级元素。
eg:li{
float: left;
width: 100px;
list-style: none;
}
清除浮动:clear:left/right/both.
eg:#d1{
clear: both;
}
9.总结:
9.1:整个页面水平居中:margin:0px auto;
9.2:文本水平居中:text-align:center;
文本垂直居中:line-height:高度;
9.3:页面整体布局:div+css
9.4:导航菜单/左右侧菜单:div+ul-li
9.5:整齐表单:form+table
9.6:图文混排:div+dl-dt-dd