CSS Cascading Style Sheets (层叠样式表)
-
css几种导入方式
<h1 style="color: blue">好嘞~</h1>
<head>
<style>
h1{
color:yellow;
font-size: 90px;
}
</style>
</head>
<body>
<h1 style="color: blue">好嘞~</h1>
</body>
两种方式:
1:<link rel="stylesheet" href="/css四种导入方式/css/index.css">
2:<style>@import "/css四种导入方式/css/index.css";</style>
但是不推荐使用导入import,元素较多会出现html结构先展示,后再css样式渲染,慢慢被淘汰使用
link修饰是和网页一块渲染展现
-
优先级:就近原则!! 谁离这个要修饰的元素最近,就用谁的样式
-
基本选择器修饰(不遵循就近原则 id选择器 > class选择器 > 标签选择器)
1:标签选择器
<h1>嘿嘿</h1>
<p>哈哈</p>
修饰:
h1{
color: aqua;
}
p{
color: red;
}
2:类选择器(class定义名称,修饰时用 .名称调用)class名称可以重复
<h1 class="hh1">嘿嘿</h1>
<p class="hhp">哈哈</p>
修饰:
.hh1{
color: aquamarine;
}
.hhp{
color: burlywood;
}
3:id选择器(id定义名称,修饰时用 #名称调用)id名称是唯一不可重复
<h1 id="hh1">嘿嘿</h1>
<p id="hhp">哈哈</p>
修饰:
#hh1{
color: aquamarine;
}
#hhp{
color: burlywood;
}
-
层次选择器
/*后代选择器*/
body p{}
/*子选择器*/
body > p{}
/*相邻兄弟选择器(同辈、同类型) 只会向下找相邻的一个元素,不包含自身*/
.flag + p{}
/*通用选择器 向下找,~后面相同类型的所有元素,不包含自身*/
.flag ~ a{}
-
结构伪类选择器
/*无序列表中的第一个子元素*/
ul li:first-child{}
/*无序列表中的最后一个子元素*/
ul li:last-child{}
/*选择当前元素的父级元素,括号是几就往下数几个元素,并且数到的元素必须是当前元素类型一致才会生效 (按照顺序和元素类型)*/
p:nth-child(1){}
/*选择当前元素的父级元素,根据类型去找括号中数字第几个元素*/
p:nth-of-type(4){}
-
属性选择器
/*选中a标签中有id属性的*/
.as a[id]{}
/*选中a标签中id等于具体值的*/
.as a[id = id3]{}
/*选中a标签中class包含link的*/
.as a[class *= link]{}
/*选中a标签中href值以../开头的*/
.as a[href ^= "../"]{}
/*选中a标签中href值以pdf结束的*/
.as a[href $= "pdf"]{}
-
字体常用样式
{
/*字体大小*/
font-size: 20px;
/*字体颜色*/
color: black;
/*字体粗细*/
font-weight: lighter;
/*字体样式*/
font-family: 新宋体;
/*简写(字体粗细 字体大小 字体样式)*/
font: bold 50px "华文楷体";
}
-
文本常用样式
{
/*文本居中*/
text-align: center;
/*首行缩进*/
text-indent: 2em;
/*文字行高(单行文字行高 = 所在容器高度时,文字会上下居中)*/
line-height: 50px;
/*下划线*/
text-decoration: underline;
/*中划线*/
text-decoration: line-through;
/*上划线*/
text-decoration: overline;
/*图片和文字能够水平居中 (图片和文字座位参照物需要选中两个元素)*/
#pic img,span{
vertical-align: middle;
}
/*超链接去掉下划线*/
text-decoration: none;
}
-
浮动、解决父级塌陷
//ul 去掉实心圆
list-style-type: none;
//display
display:bolck(块元素); inline(行内元素); inline-block(既是行内元素、又是块元素);
//背景图片
background-image: url("images/mn.png");
//背景图片是否重复
background-repeat: no-repeat;
//背景图片偏移
background-position: 2px;
//圆角
border-radius: 50%;
//阴影
box-shadow: 1px 1px 1px 1px color;
//浮动
float:left;right;none;
//元素溢出滚动条
overflow: scroll;
//清除浮动
clear:left;right;both(两侧不允许有浮动元素)
//透明度
opacity:0.5;
//设置图层高度,不被覆盖,默认是0,最高无限制
z-index:999;
//解决父级元素塌陷
1:给父级元素足够高度(不推荐)
2:设置一个空的div,对div进行修饰{margin:0px; padding:0px;clear:both;}
3:父级元素中增加修饰overflow: hidden;
4:父级伪类 #father:after{content: ''; clear:both; display:block;}(极力推荐)
-
定位
//相对定位
position: relative;
bottom: 100px;
right: -100px;
//绝对定位
1:如果元素没有父级元素,默认是根据浏览器进行定位 position: absolute; left: 200px; 元素会距离浏览器向右偏移200px;
2:如果元素有父级元素,则相对于父级元素开始偏移 父级元素需要设置position: relative;将自身变为参照物。 子元素修饰position: absolute; left: 200px; 元素会距离父级元素向右偏移200px;
//固定定位
position: fixed;