CSS
一、概述
CSS:Cascading Style Sheet,层叠样式表(级联样式表)
作用:
1、美化页面
2、对页面中所有样式的设置统一了规则
特点:
1、.css结尾的文件
2、嵌入在html页面
二、写法
1、内联样式
做法:
在元素的开始标记中写上
style=“属性名:属性值;属性名:属性值;...”;
<span style="color: red;background:yellow;border:1px blue dashed;:>span</span>
2、内部样式表
做法:
在head标签中定义style标签
在style标签中使用选择器设置样式
<style type="text/css">
p{
color:yellow;
font-size:40px;
background:purple;
}
</style>
3、外部样式表
做法:
新建.css的外部样式表文件
在该文件中定义标签的样式
在想要使用该样式表的页面的head标签中使用link标签引入.css文件资源
<link rel="stylesheet" tyoe="text/css" href="css/test.css"/>
优先级:
1、内联最高
2、内部和外部,后写的优先级高
三、选择器
选择所有指定的元素
格式:
元素名{
样式
}
3.2 类选择器
选择所有具有相同class值的元素
格式:
先为指定的元素设置class值
.class{
样式
}
3.3 id选择器
选择唯一id值的元素
格式:
先为指定的元素设置唯一的id值
#id{
样式
}
3.4 分组选择器
将多个选择器以逗号分隔进行统一的样式设置
格式:
选择器1,选择器2,...{
样式
}
3.5 属性选择器
针对具有指定属性或属性值的元素进行样式的设置
格式:
选择器[属性名 = ‘属性值’][ ]...{
样式
}
3.6 子代、后代选择器
格式:
子代
选择器1>选择器2{
样式
}
后代
选择器1 选择器2{
样式
}
3.7 伪类选择器
格式:
a:link,表示超链接的默认状态
a:visited,表示超链接被访问过的状态
a:hover,表示鼠标悬浮在元素上的状态
a:active,表示鼠标按住时的状态
3.8 css3.0的新选择器
:nth-of-type(2n+1)
3.9 通配符选择器
选择所有元素进行统一样式的设置,一般设置全局的字体和内外边距
格式:
*{
样式
}
四、盒子模型 box model
概念:研究内边距、外边距、边框和元素中的内容在hi见的关系
4.1 外边距margin
margin:npx,表示四个方向的外边距都是n像素
margin:apx bpx,表示上下方向的外表据是a像素,左右方向的外边距是b像素
margin:apx bpx cpx dpx,表示上右下左的外边距分别是a、b、c、d像素
margin-left:npx
margin-right:npx
margin-top:npx
margin-bottom:npx
注:
1、两个盒子上下外边距取较大值
2、两个盒子的左右外边距取两者之和
4.2 内边距padding
padding:npx,表示四个方向的内边距都是n像素
padding:apx bpx,表示上下方向的内边距是a像素,左右方向的内边距是b像素
padding:apx bpx cpx dpx,表示上右下左的内边距分别是a、b、c、d像素
padding-left:npx
padding-right:npx
padding-top:npx
padding-bottom:npx
注:
内边距会影响整个盒子的大小
4.3 边框border
标准格式:
border:粗细 颜色 样式;
注:粗细 颜色 样式的先后顺序是任意的
样式的取值:solid、dashed、double、dotted
边框圆角
border-radius:npx,用半径为n像素的圆内切盒子的四个角形成圆角矩形
五. 定位position
取值:
1、static:默认值
2、absolute:绝对定位,元素根据整个窗口实现上下左右位置的定位
3、relative:相对定位,元素根据没有使用定位时的默认位置实现定位
4、fixed:固定定位,一旦定位后元素的位置不会发生变化
六. 浮动
使用浮动样式的元素,可以使元素脱离原始的文档流,可以使块级元素与其他元素在同一行中。
浮动:
float:left/right
清除浮动:
clear:left/right/both
七. 隐藏显示
属性:visibility
1、hidden:隐藏 (占位置)
2、visible:显示
八. 行内元素和块级元素
块级:block
p、div、h、ol/ul、li、table、tr
行内:inline
img、td、a、span、font
行内和块级的转换:display
1、块级->行内
display:inline
2、行内->块级
diplay:block
隐藏:(不占位置)
display:none