文章目录
css
基本概念
cascading style sheet 层叠级联样式表
css优势:
1.变现与结构相分离
2.网页结构表现统一,可以实现复用
3.样式十分丰富
4.建议使用独立于html的css文件
5.利用SEO,容易被搜索引擎
css导入的三种方法:
行内 内部 外部
优先级:就近原则
选择器
基本选择器
1.标签选择器 会选择到页面上所有这个标签的元素
<head>
<style type="text/css">
h1{
color: bisque;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h1>css学习</h1>
<h1>css学习</h1>
<p>看视频学习</p>
</body>
2.类 选择器 可以多个标签归类
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.one{
color: azure;
}
.two{
font-size: 20px;
}
</style>
</head>
<body>
<h1 class="one">标题1</h1>
<h1 class="one">标题1</h1>
<h1 class="two">标题1</h1>
<h5 class="one">标题5</h5>
</body>
3.id 选择器 id必须保证唯一
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#o{
color: aquamarine;
}
#t{
color: bisque;
}
#h{
color: coral;
}
</style>
</head>
<body>
<h1 id="o">标题1</h1>
<h1 id="t">标题1</h1>
<h5 id="h">标题5</h5>
</body>
优先级:id选择器>class选择器>标签选择器 不遵循就近原则
层次选择器
<body>
<p>p1</p>
<p class="a">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
后代选择器:在某个元素后面的所有元素
/*后代选择器*/
body p{
background-color: #F0FFFF;
}
子选择器:一代元素
/*子选择器*/
body>p{
background-color: blue;
}
相邻兄弟选择器:同级且相邻的一个(向下)元素
/*相邻兄弟选择器*/
.a + p{
background-color: blueviolet;
}
通用选择器:同级的所有在后面的元素
/*通用选择器*/
.a ~ p{
background-color: #FF7F50;
}
结构伪类选择器
伪类:条件
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*ul第一个子元素*/
ul li:first-child{
background-color: #0000FF;
}
/*ul最后一个子元素*/
ul li:last-child{
background-color: #0000FF;
}
/*p的父元素中的第一个且为p元素*/
p:nth-child(1){
background-color: #8A2BE2;
}
/*p的父元素中第一个类型是p的元素*/
p:nth-of-type(1){
background-color: aqua;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
属性选择器
结构:元素[]{} =绝对等于 *=包含 ^=以其开头 $=以其结尾
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.demo a{
float: left;
text-decoration: none;
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background-color: #8A2BE2;
margin-right: 5px;
border-radius: 10px;
text-align: center;
}
.demo a[id]{
background-color: aqua;
}
.demo a[id="first"]{
background-color: #F0FFFF;
}
.demo a[class*="link"]{
background-color: antiquewhite;
}
.demo a[href^="img"]{
background-color: #7FFFD4;
}
.demo a[href$="doc"]{
background-color: #FF7F50;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="link item " id="first">1</a>
<a href="123.html" class="link item active" target="_blank" title="test">2</a>
<a href="img/1.jpg" class="link item">3</a>
<a href="img/1.html" class="link item">4</a>
<a href="img/1.png" class="link item">5</a>
<a href="abc" class="link item">6</a>
<a href="/a.pdf" class="link item">7</a>
<a href="/abc.pdf" class="link item">8</a>
<a href="abc.doc" class="link item">9</a>
<a href="abcd.doc"class="link item " id="last">10</a>
</p>
</body>
页面美化
字体样式
font标签中可以按顺序设置如下属性:
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*font-family 字体样式
font-size 字体大小
font-style 字体风格
font-weight 字体粗细
color 字体颜色*/
p{
font:oblique bolder 20px arial "微软雅黑" ;
}
/*p{
font-family: arial "楷体";
font-size: 20px;
font-style: oblique;
font-weight: 900;
color: #FF7F50;
}*/
</style>
</head>
<body>
<p>
一 莫高窟大门外,有一条河,过河有一溜空地,高高低低建着几座僧人圆寂塔。塔呈圆形,状近葫芦,外敷白色。从几座坍弛的来看,塔心竖一木桩,四周以黄泥塑成,基座垒以青砖。历来住持莫高窟的僧侣都不富裕,从这里也可找见证明。夕阳西下,朔风凛冽,这个破落的塔群...
</p>
<p>
王掌柜,常四爷,秦二爷,宋二爷…… 六十年的老茶馆,终究没有能抵挡得住那股浊气弥漫的年代。 见证了是非转变的王掌柜,终究没有逃脱恶霸流氓的欺辱。 一心实业救国的秦二爷,终究穷困潦倒无所获。 问心无愧的常四爷,孤独终生无人送终。 宋二爷爱鸟如命,却终被浊气所污。 这些个见证了六十年时代的更变,从大清受洋...
</p>
<p>
Just because someone doesn't love you the way you want them to,doesn't mean they don't love you with all they have.
</p>
</body>
文本样式
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: #FF7F50;
/*缩进两个字*/
text-indent: 2em;
}
.t1{
/*颜色设置 rgb()和rgba() a表示透明度0-1*/
/*color:rgb(0,255,255);*/
color:rgba(0,255,255,0.1);
/*文本位置*/
text-align: center;
}
.en{
background-color: #7FFFD4;
height: 60px;
/*行高设置,且可设置上下居中(行高=height)*/
line-height: 60px;
}
.c1{
/*上划线*/
text-decoration: overline;
}
.c2{
/*中划线*/
text-decoration: line-through;
}
.c3{
/*下划线*/
text-decoration: underline;
}
a{
/*去掉下划线*/
text-decoration: none;
}
img{
width: 50px;
height: 50px;
}
s1,img{
/*图片文字垂直居中*/
vertical-align: middle;
};
</style>
</head>
<body>
<p class="t1">文本</p>
<p>
一 莫高窟大门外,有一条河,过河有一溜空地,高高低低建着几座僧人圆寂塔。塔呈圆形,状近葫芦,外敷白色。从几座坍弛的来看,塔心竖一木桩,四周以黄泥塑成,基座垒以青砖。历来住持莫高窟的僧侣都不富裕,从这里也可找见证明。夕阳西下,朔风凛冽,这个破落的塔群...
</p>
<p>
王掌柜,常四爷,秦二爷,宋二爷…… 六十年的老茶馆,终究没有能抵挡得住那股浊气弥漫的年代。 见证了是非转变的王掌柜,终究没有逃脱恶霸流氓的欺辱。 一心实业救国的秦二爷,终究穷困潦倒无所获。 问心无愧的常四爷,孤独终生无人送终。 宋二爷爱鸟如命,却终被浊气所污。 这些个见证了六十年时代的更变,从大清受洋...
</p>
<p class="en">
Just because someone doesn't love you the way you want them to,doesn't mean they don't love you with all they have.
</p>
<a href="#">123</a>
<p class="c1">12345</p>
<p class="c2">12345</p>
<p class="c3">12345</p>
<p>
<img src="img/n1.jpg"/>
<span id="s1">
1234567
</span>
</p>
</body>
超链接伪类
在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*未访问*/
a:link{
color:#000000;
}
/*鼠标点击*/
a:visited{
color: #8A2BE2;
}
/*鼠标悬浮*/
a:hover{
color: #FF7F50;
}
/*激活以后*/
a:active{
color: #00FFFF;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点击一下</a>
</body>
阴影
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*text-shadow:水平向右 垂直向下 阴影宽度 阴影颜色*/
p{
text-shadow: 5px 5px 5px red;
}
</style>
</head>
<body>
<p>
王掌柜,常四爷,秦二爷,宋二爷
</p>
</body>
列表图标
/*square正方形
circle 空心圆
decimal 数字
none 去掉
*/
ul li{
list-style: none;
}
背景
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性。
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 500px;
height: 500px;
border: 1px solid black;
/*background: red;*/
}
#d1{
/*背景图片*/
background-image: url("img/logos.jpg");
/*背景图片是否重复*/
background-repeat: no-repeat;
}
#d2{
background:bisque url("img/logos.jpg") no-repeat 0px 0px ;
}
#d3{
background-image: url("img/logos.jpg");
background-repeat: repeat-x;
/*背景颜色*/
background-color: aquamarine;
/*背景图片的位置*/
background-position: 0px 100px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
渐变
渐变详细解释:https://www.runoob.com/css3/css3-gradients.html
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients)- 由它们的中心定义*/
#b{
width: 200px ;
height: 200px;
background-image: linear-gradient(19deg, #FF3FEF 0%, #21DEFF 100%);
}
</style>
</head>
<body>
<div id="b"></div>
</body>
盒子模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dw9RDpJH-1610535262984)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210112153229489.png)]
margin:外边距
border:边框
padding:内边距
边框
边框粗细
边框颜色
边框样式
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#app{
border: 1px solid black ;
}
h4{
background: bisque;
text-align: center;
}
#n1:nth-of-type(1) input{
/*背景颜色*/
background: lavender;
/*设置边框*/
border: 2px solid rosybrown;
}
#n2:nth-of-type(2){
background: lavender;
}
#n3:nth-of-type(3) input{
background: lavender ;
border: 3px dashed lawngreen;
}
</style>
</head>
<body>
<div id="app">
<h4>会员登录</h4>
<form>
<div id="n1">
<span>用户名</span>
<input type="text" name="un" id="un" />
</div>
<div id="n2">
<span>密码</span>
<input type="text" name="un" id="un" />
</div>
<div id="n3">
<span>邮箱</span>
<input type="text" name="un" id="un" />
</div>
</form>
</div>
</body>
内外边距
#app{
border: 1px solid black ;
/*上 右 下 左*/
margin: 1px 2px 3px 4px;
/*上下 左右*/
padding: 5px 10px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-da6BSPS3-1610535262985)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210112164223052.png)]
圆角
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#app{
width: 100px;
height: 50px;
background-color: rosybrown;
/*左上 右上 右下 左下*/
border-radius: 50px 50px 0 0;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
盒子阴影
/*水平方向 垂直方向 阴影距离 颜色*/
box-shadow: 10px 10px 100px red;
浮动
文档流
文档流处在网页最底层,它表示的是一个页面中的位置,我们所创建的元素都默认在文档流中。
块元素:独占一行,自上而下排列 可以设置高度和宽度
内联元素:只占自身大小,默认从左向右 设置高度和宽度无效,大小由内容撑开
display
<head>
<!--
描述:display inline内联元素 block块元素 inline-block既是内联又是块元素 none不显示元素,并且不会在页面中继续占据位置
-->
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
width: 100px;
height: 100px;
border: 1px solid rosybrown;
display: inline-block;
}
#s2{
width: 100px;
height: 100px;
border: 1px solid rosybrown;
display: block;
}
</style>
</head>
<body>
<div id="d1">div</div>
<span id="s2">span</span>
</body>
float
有高度塌陷的问题
使用浮动从而脱离文档流
块元素脱离文档流,高度和宽度都被内容撑开
内联元素脱离文档流会变成块元素
浮动的元素不会挡住文字
`<head>
<!--
描述:float left左浮动 right右浮动 none默认在文档流中
-->
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
width: 100px;
height: 100px;
border: 1px solid rosybrown;
float: left;
}
#d2{
width: 150px;
height: 150px;
border: 1px solid rosybrown;
float: left;
}
#d3{
width: 200px;
height: 200px;
border: 1px solid rosybrown;
float: right;
}
#s2{
border: 1px solid rosybrown;
}
</style>
</head>
<body>
<div id="b">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<span id="s2">
王掌柜,常四爷,秦二爷,宋二爷…… 六十年的老茶馆,终究没有能抵挡得住那股浊气弥漫的年代。 见证了是非转变的王掌柜,终究没有逃脱恶霸流氓的欺辱。 一心实业救国的秦二爷,终究穷困潦倒无所获。 问心无愧的常四爷,孤独终生无人送终。 宋二爷爱鸟如命,却终被浊气所污。 这些个见证了六十年时代的更变,从大清受洋...
</span>
</div>
</body>
清除浮动
clear:both清除两边浮动 left清除左边浮动 right清除右边浮动 none不清除浮动
#s2{
border: 1px solid rosybrown;
display: block;
clear: both;
}
解决父元素高度塌陷问题
1.给父元素固定的高度
#father{
border: 2px solid rosybrown;
height: 300px;
}
2.在父元素的最后设置空的div
<div class="clear"></div>
.clear{
clear: both;
margin: 0;
padding: 0;
}
3.使用overflow(visible不会对溢出内容做任何处理 hidden对溢出的内容修剪 scroll为父元素添加滚动条 auto根据需要添加滚动条)
#father{
border: 2px solid rosybrown;
overflow: hidden;
}
4.给父类使用after伪类(推荐)
#father:after{
content: '';
display: block;
clear: both;
}
定位
相对定位
position: relative;
(距离右边)right、left、top、bottom
相对于元素原来的位置进行定位且元素不会脱离文档流,原位置仍然保留,使元素提升一个层级。
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
height: 40px;
border: 1px solid red;
}
#d1{
height: 10px;
border: 1px solid greenyellow;
background-color: #ADFF2F;
position: relative;
right: 5px;
}
#d2{
height: 10px;
border: 1px solid greenyellow;
background-color: #BC8F8F;
position: relative;
left: -10px;
}
#d3{
height: 10px;
border: 1px solid greenyellow;
background-color: aqua;
position: relative;
top: 10px;
}
</style>
</head>
<body>
<div id="father">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
绝对定位
position: absolute
会脱离文档流,即不会保留原来位置。
如果祖先元素都没有开启定位,则相对于浏览器定位,一般情况下父元素开启相对定位,会相对于父元素定位。
绝对定位会改变元素的性质,即块元素会成为内联元素,内联元素会成为块元素。
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
padding: 10px;
border: 1px solid red;
position: relative;
}
#d1{
height: 30px;
border: 1px solid greenyellow;
background-color: #ADFF2F;
position: absolute;
left: 35px;
}
#d2{
height: 30px;
border: 1px solid greenyellow;
background-color: #BC8F8F;
position: absolute;
/*距离父元素右边10px*/
right: 10px;
}
#d3{
height: 30px;
border: 1px solid greenyellow;
background-color: aqua;
}
</style>
</head>
<body>
<div id="father">
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
</div>
</body>
固定定位
position: fixed;
永远相对于浏览器定位,不随滚动条滚动
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
height: 1000px;
background-color: black;
}
#d1{
width: 100px;
height: 100px;
background-color: #ADFF2F;
position: absolute;
right: 0px;
bottom: 0px;
}
#d2{
width: 50px;
height: 50px;
background-color: #00FFFF;
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div id="father">
<div id="d1">absolute</div>
<div id="d2">fixed</div>
</div>
</body>
层级和透明度
z-index 没有开启定位的元素不能使用 父元素层级再高也不能盖住子元素
opacity 透明度 0-1之间
( IE8及以下设置 filter: alpha(opacity=透明度) ) 透明度0-100
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: wheat;
position: relative;
z-index: 2;
opacity: 0.5;
}
.box2{
width: 100px;
height: 100px;
background-color: darkblue;
position: absolute;
left: 70px;
z-index: 10; /*可以设置层级,前提是开启定位*/
opacity: 0.6;
}
.box3{
width: 100px;
height: 100px;
background-color: cadetblue;
position: relative;
left: 50px;
top: -50px;
z-index: 20; /* 父元素层级再高都不会盖住子元素*/
opacity: 0.6;
}
.box4{
width: 80px;
height: 90px;
background-color: black;
position: absolute;
z-index: 10;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">
<div class="box4">
</div>
</div>
</body>
如有不对的地方欢迎指出,大家共同进步!