样式优先级:就近原则
1.直接在标签内使用style属性;
2.在<head>标签内使用<style></style>包裹;
3.链接式插入:
新建CSS文件,在HTML文件的head标签中插入<link>标签:
<link rel:"stylesheet" href="文件路径">
4.导入式(不使用)。
优先级:id > class > 标签
1.标签选择器
标签名{
样式语句;
}
2.类选择器
.类名{
样式语句;
}
3.id选择器
#id名{
样式语句;
}
1.后代选择器
选择在某个元素层级下的所有元素
标签名 标签名{
样式语句;
}
2.子类选择器
选择某个元素下一个层级的元素
标签名>标签名{
}
3.相邻兄弟选择器
选择某个元素下侧同级相邻的相同元素
元素名 + 元素名{
}
4.通用选择器
选择某个元素下侧同级的所有相同元素
元素名~元素名{
}
伪类:为样式的实现加一些条件
如:鼠标悬停后生效
a:hover{
color: red;
}
伪类选择器:
元素名 元素名:语句{
}
语句:
first-child 选择元素的第一个元素
last-child 选择元素的最后一个元素
nth-child() 选择一个或多个特定子元(参数为1,2,3....等)
nth-last-child 选择一个或多个特定子元(参数为1,2,3....等)倒着选
first-of-type() 选择父元素下的第一个同类元素(1,2,3...)
1.
元素名[属性名]{
}
2.
元素名[属性名=属性值]{
}
3.选择包含该属性值的元素
元素名[属性名*=属性值]{
}
4.选择以某值开头的元素
元素名[属性名^=属性值]{
}
*= 包含
^= 以..开头
$= 以...结尾
<span>标签:突出重点字
font- family 字体
size 字体大小
weight 字体粗细
font:字体风格(斜体:oblique,意大利体等) 字体粗细(bolder等) 字体大小 字体样式(楷体等);
颜色
color:blue
color:#ffffff;
color:rgb(123,123,123)
添加透明度:0-1
color:rgba(0.255.255,0.5)
对齐方式
text-align:left 文本左
center 文本居中
首行缩进
text-indent:2em 段落首行缩进两个中文字
行高
line-height:500px 一行的高度
装饰
text-decoration:underline;下划线
:through; 中划线
:overline;上划线
:none;清除下划线
文本图片水平对齐:
vertical-align:middle
阴影:
text-shadow:阴影颜色 x轴偏移 y轴偏移 模糊半径 ;
text-shadow:#ffffff 10px 10px 10px ;
悬浮时:
a:hover{
}
激活时(鼠标点击未松时)
a:active{
}
点击后:
a:cisited{
}
列表点的样式:
list-style:none;去圆点
:circle;空心圆
:decimal;数字
:square:正方形
background-repeat:repeat-x;水平平铺
:repeat-y;竖直平铺
:norepeat;不平铺
margin:外边距
padding:内边距
border:边框
粗细(px):样式(实线,虚线):颜色:
虚线:dashed
实线:solid
例:
border:1px solid red;
外边距使元素居中
margin:0 auto;(auto:自动对齐)
块级元素(独占一行)
<h1 - h6><p><div> <ul>
行内元素(不独占一行)
<span><a><img>
行内元素可以被包含在块元素中
display:block;设为块元素
:inline-block;设为块元素,但是可以内联在一行
: inline;行内元素
float:left;向左浮动
clear:right;右侧不允许有浮动元素
:left;左侧不允许有浮动元素
:both;两侧不允许有浮动元素
:none;不允许有浮动元素
解决:
1.增加父级元素高度
2.增加一个空div标签,清除其浮动
3.在父级元素中增加以下属性:
overflow:hidden;
4.父类中添加伪类:after
父类 :after{
content:'';
display:block;
clear:both;
}
相对于自己原来位置进行偏移,仍然在标准文档流中,保留了原来的位置
position:relative;四个位置,上下左右
left:20px;距离上边20像素
right:20px;距离右边20像素
top:距离上边的像素
bottom: 距离下边
基于XXX定位,不在文档流中,原来的位置不会被保留
1.没有父元素定位,基于浏览器定位
2.假设父级元素存在定位,我们通常相对于父级元素进行偏移
3.在父级元素内移动,无法超出
position:absolute;
position:fixed;
无论如何拖动网页,该元素都相对于屏幕不动
可做导航栏
层级,值为0-无限大,一般不设很大
不透明度:
opacity:不透明度(值0-1,小数)