前端 css
css样式
样式的引入
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入方式二:内接引入-->
<!--<style>-->
<!--div{-->
<!--color: blue;-->
<!--}-->
<!--</style>-->
<!--引入方式三: 外接样式-链接式 :link导入一个连接 重点重点重点*****-->
<!--<link rel="stylesheet" href="index.css">-->
<!--引入方式四: 外接样式-导入式 :style导入一个@import url('路径')-->
<!--<style>-->
<!--@import url("index.css");-->
<!--</style>-->
</head>
<body>
<!--引入方式一 :行内引入-->
<!--<div style="color:red">wahaha</div>-->
<body>
基本选择器
元素选择器:
div{ #标签名字
color:red;
}
id选择器:id值不能重复
<div id="xuefei">
雪飞大美女
</div>
#xuefei{
color:green;
}
类选择器: 类值可以重复
<div id="dazhuang" class="c1">
大壮dsb
</div>
<div id="xuefei" class="c1">
雪飞大美女
</div>
.c1{
color: green;
}
div.c1{ #div标签里面含有class值为c1的标签
color: green;
}
通用选择器
*{ #找到所有的标签
color: green;
}
组合选择器
后代选择器
div a{ #找到div标签后代里面的所有a标签
color:red;
}
儿子选择器
div>a{ #找到div的儿子标签这一代的a标签
color:red;
}
毗邻选择器
div+a{ #找到是紧挨着div标签的下一个标签(是兄弟标签)
color: red;
}
弟弟选择器
div~a{ #找到的是同级的后面的所有兄弟标签
color: red;
}
属性选择器
#通过属性名来查找
[title]{ #找到所有含有title属性的标签
color: red;
}
div[title]{ #含有title属性的div标签
color: red;
}
#通过属性名对应的值来查找,当属性值的值为数字的时候,数字要加上引号[title='666']
input[type=text]{ #含有type属性,并且type属性的值为text的input标签
background-color: red;
}
分组
多个选择器选择的标签设置相同css样式的时候,就可以用分组
div,p{ #div选择器和p选择器共同设置相同的样式,可以逗号分隔
color:red;
}
伪类选择器
a标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */ 这个用的比较多,可以应用在其他标签上
a:hover {
color: #FF00FF
}
/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus { #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
#outline: none;
background-color: #eee; #框里面的背景色
}
伪元素选择器
/*伪元素选择器*/
div:first-letter{
color: red;
font-size: 20px;
}
/*在p标签内容的前面插入一些内容*/
p:before{
content: '?';
color: green;
font-size:100px;
}
/*在p标签内容的后面插入一些内容*/
p:after{
content: '哈哈!';
color: pink;
}
选择器的优先级
/*优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式*/
/*id选择器优先级为100*/
/*#d1{*/
/*color:deepskyblue;*/
/*}*/
/*!*继承的优先级为0*!*/
/*body{*/
/*color:red;*/
/*}*/
/*!*类选择器的优先级是10*!*/
/*.c1{*/
/*color: blue;*/
/*}*/
/*.c2{*/
/*color: orange;*/
/*}*/
/*!*元素选择器优先级是1*!*/
/*div{*/
/*color: green;*/
/*}*/
内敛样式优先级为1000
<p class="cc3" style="color: red;">我是cc3的p标签</p>
important优先级最高,最牛逼
.cc1 .cc3 {
color: purple!important;
}
css属性相关
高度宽度设置,注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的
div{
width: 100px; 宽度
height: 100px; 高度
background-color: pink;
}
a标签颜色
补充:a标签的字体颜色设置必须选中a标签才行
.c1 a{
color: red;
}
字体属性
字体
.c1{
font-family: '楷体','宋体','微软雅黑';
}
字体大小
.c1{
/*font-family: '楷体','宋体','微软雅黑';*/
font-size:14px; 默认字体大小为16px.
}
字体颜色
color:red;
子重,粗细
.c1{
font-weight: bold;
font-weight: 100;
}
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
颜色表示方式
p{
/*color: red;*/
/*color: #78FFC9;*/
/*color: rgb(123,199,255);*/
color: rgba(123,199,255,0.3); 多了一个透明度的数字:0-1的一个数字
}
文字属性
文字对齐
text-align
div{
width: 200px;
height: 200px;
background-color: yellow;
/*text-align: center;*/
text-align: right;
}
left 左边对齐 默认值
right 右对齐
center 居中对齐
文字装饰
text-decoration
div a{
/*text-decoration: none;*/ #给a标签去除下划线
/*text-decoration: line-through;*/
text-decoration: overline;
}
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
首行缩进
p {
text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px
}
背景属性
背景颜色
background-color: red;
div{
width: 600px;
height: 600px;
/*background-color: red;*/
/*background-image: url("yeye.jpg");*/
/*background-repeat: no-repeat;*/
/*background-position: 100px 50px;*/ 相对于div标签的,距离左边100px,距离上面50px
background:url("yeye.jpg") no-repeat left center;
/*background-position: right top;*/
}
简写方式,颜色 图片路径 是否平铺 图片位置
background:#ffffff url('1.png') no-repeat right top;
边框
div{
width: 200px;
height: 200px;
/*border-style: solid;*/ 边框样式
/*border-color: red;*/ 边框颜色
/*border-width: 10px;*/ 边框宽度
/*border:10px solid red;*/ 简写方式
/*border-left-style: solid;*/
/*border-left-width: 10px;*/
/*border-right-style: dashed;*/
/*border-top-style: dashed;*/
/*border-bottom-style: dashed;*/
/*border-right-width: 5px;*/
border-left:10px solid red; 单独设置边框的简写方式
}
控制圆角
border-radius: 50%;
display属性
块和行内的概念\转换
用于控制HTML元素的显示效果
div{
width: 100px;
height: 100px;
border: 1px solid red;
/*display: inline; !* 将标签设置为内敛标签 *!*/
/*display: inline-block; !* 将标签设置为同时具备内敛和块级标签的一些特性,比如可以设置高度宽度,但是不独占一行 *!*/
/*display: none; !* 隐藏标签 ,并且不占用自己之前的空间*!*/
}
span{
border: 2px solid blue;
}
.c1{
width: 200px;
height: 200px;
/*display: inline-block;*/
display: block; /* 将内敛标签设置为块级标签 */
}
值 意义
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin- bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。
隐藏标签
visibility: hidden; /* 隐藏标签,但是标签还占用原来的空间 */
/*display: none; !* 隐藏标签 ,并且不占用自己之前的空间*!*/
css盒子模型
content内容区域
padding 内边距
border 边框宽度
div{
width: 200px;
height: 100px;
border: 2px solid deeppink;
/*padding-top: 10px;*/
/*padding-left: 5px;*/
/*padding-right: 2px;*/
/*padding-bottom: 4px;*/
/*padding: 10px 20px; !* 10px上下内边距 ,20px左右内边距 *!*/
/*padding: 10px 20px 5px 2px; !* 10px上下内边距 ,20px左右内边距 *!*/
padding: 10px 20px 5px 0; /* 10px上下内边距 ,20px左右内边距 */
}
margin 外边距
top距离上面标签的距离
bottom距离下面标签的距离
left 距离左边标签的距离
rigth 距离右边标签的距离
.d1 {
width: 200px;
height: 100px;
border: 2px solid deeppink;
margin-bottom: 200px;
}
.d2{
margin-top: 100px;
border: 2px solid blue;
}
两个简写的方式
/*margin: 10px 20px;*/
margin: 10px 5px 6px 3px;
两个情况:
垂直方向如果上下两个标签都设置了margin外边距,那么取两者的最大的值
水平方法,两个标签都设这外边距,取两者的边距之和
浮动float
.c1{
background-color: red;
height: 100px;
width: 100px;
float: left;
}
.c2{
background-color: blue;
height: 100px;
width: 100px;
float: right;
}
浮动会造成父级标签塌陷问题
解决方法:
1 父级标签设置高度
2 伪元素选择器清除浮动,给父级标签加上下面这个类值
.clearfix:after{
content: '';
display: block;
clear: both; 清除浮动clear
}
clear的值和描述
值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
overflow溢出属性
.c1{
width: 200px;
height: 200px;
border: 1px solid red;
/*overflow: hidden;*/
overflow: auto;
}
<div class="c1">
总结一下：为什么要有浮动啊，是想做页面布局，但是浮动有副作用，父级标签塌陷，所以要想办法去掉这个副作用，使用了clear来清除浮动带来的副作用，我们当然也可以通过设置标签为inline-block来实现这种布局效果，但是把一个块级标签变成一个类似内敛标签的感觉，不好操控，容易混乱，所以一般都用浮动来进行布局。
</div>
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
圆形头像示例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圆形的头像示例</title>
<style>
.header-img {
width: 150px;
height: 150px;
border: 3px solid white;
border-radius: 50%;
overflow: hidden;
}
.header-img>img {
width: 100%; #让img标签按照外层div标签的宽度来显示
}
</style>
</head>
<body>
<div class="header-img">
<img src="meinv.png" alt="">
</div>
</body>
</html>
总结一点:width宽度设置的时候,直接可以写100px,30%这种百分比的写法,它的宽度按照父级标签的宽度的百分比来计算.
position定位
position : relative /absolute /fixed
top:10px;
right:10px;
bottom:10px;
left:10px;
相对定位 :相对自己原来的位置移动,移动之后还占据原来的位置
绝对定位 :绝对定位是相对于整个html页面,不会占据原来的位置,层级的提升
如果我们设置了绝对定位的元素 的父元素 没有设置position,那么我们对元素的所有设置都是基于整个页面
如果设置了position,那么子盒子的absolute位置会根据父盒子的位置定位
父相子绝:子元素设置的绝对位置会对应着祖级元素的相对位置
固定定位 :固定是相对于整个窗口的
回到顶部示例
position为fixed固定定位,通过相对于浏览器窗口的距离来设置位置.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 500px;
width: 200px;
}
.c2{
background-color: green;
height: 500px;
width: 200px;
}
.s1{
position: fixed; /*固定定位,位置是根据浏览器窗口来的*/
/*top:20px;*/
left: 20px;
bottom: 20px;
background-color: blue;
height: 40px;
width: 80px;
text-align: center;
line-height: 40px; /* 和标签高度一致,标签内容就垂直居中 */
}
.s1 a{
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<!--<a name="top">这里是顶部,亲爱的</a>--> <!-- 锚点 -->
<div id="top">这是顶部</div> <!-- 锚点 -->
<div class="c1"></div>
<div class="c2"></div>
<span class="s1">
<a href="#top">回到顶部</a> <!-- 触发锚点 -->
</span>
</body>
</html>
锚点设置的两种方式
<!--<a name="top">这里是顶部,亲爱的</a>--> <!-- 锚点 -->
<div id="top">这是顶部</div> <!-- 锚点 -->
触发锚点的a标签写法
<a href="#top">回到顶部</a> <!-- 触发锚点 -->
z-index控制层数
模态对话框示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.shadow{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
.mode{
position: fixed;
height: 400px;
width: 300px;
background-color: white;
z-index: 100; /* 数值越大越在上层显示 */
left: 50%; /* 按照窗口宽度的50%来移动 */
top:50%; /* 按照窗口高度的50%来移动 */
margin-left: -150px;
margin-top: -200px;
}
</style>
</head>
<body>
<div>
<h1>
22期,吴老板唱歌
</h1>
</div>
<div class="mode">
</div>
<div class="shadow">
</div>
</body>
</html>
opacity透明度
.c1{
background-color: rgba(255,0,0,0.3); /* 背景颜色或者字体颜色等单独的透明度 */
height: 100px;
width: 100px;
}
.c2{
background-color: rgb(255,0,0);
height: 100px;
width: 100px;
opacity: 0.3; /* 整个标签透明度 */
}
<div class="c1">
你好
</div>
<div class="c2">
我好
</div>
总结
基本选择器
元素选择器 p{color:red;}
id选择器 #d1{color:red;}
类选择器 .c1{color:red;}
通用选择器 *{}
组合选择器
后代选择器 选择器 选择器{}
儿子选择器 选择器>选择器{}
毗邻选择器 选择器+选择器{}
弟弟选择器 选择器~选择器{}
属性选择器
[属性名] --- [title]
[属性名=属性值] --- [title=xxx]
伪类选择器
a:hover{} 鼠标悬浮
a:link{} 为未问的a标签
a:active{} 点击瞬间设置的效果
a:visited{} 已访问连接设置效果
input:focus{} 获取焦点时设置的样式
伪元素选择器
选择器:first-letter 首字母
选择器:before 选择器对应标签内部前面插入一些内容
选择器:after 选择器对应标签内部后面插入一些内容
分组选择器 选择器,选择器,选择器....{}
选择器优先级
继承 0
元素 1
类 10
id 100
内敛 1000
最牛逼 !important color:red!important;
css属性相关
字体属性
字体 font-family:'宋体'
字体大小 font-size:48px; 默认16px
字体颜色 color:red;
color:#ffffff
color:rgb(0,0,0)
color:rgba(0,0,0,0.3) 0.3透明度
子重 font-weight:bold; 100-900的数字
字体对齐 text-align:left;right;center
文字装饰:text-decoration:none;underline;overline;line-through;
首行缩进:text-indent:32px; 16px
背景属性
背景颜色 background-color:red;
背景图片 background-image:url('图片路径')
背景平铺 background-repeat:no-repeat;
图片位置 background-position:100px 50px; 距离左100px,距离上50px;
图片位置 background-position:right bottom;
简写:background:red url('路径') no-repeat 100px 50px;
###background-attachment:fixed; 固定在屏幕的某个位置上
边框
border-style:solid;
border-width:1px;
border-color:red;
简写:
border:1px dotted red;
单独
border-top-style:solid;
简写
border-top:1px dotted red;
边框圆角
border-radius:50%
display
display的值:
none:隐藏标签,不占空间 --- visibility:hidden;隐藏标签,占用空间
inline:将标签做成内敛样式
block:将标签做成块级样式
inline-block:同时具备两种标签的一些特点,能够设置高度宽度,并且不独占一行
盒子模型
content 内容
padding 内边距 内容与边框之间的距离 padding:10px 20px;上下 左右 padding:1px 20px 30px 40px;上右下左
border 边框
margin 外边距 与其他标签之间的距离
float浮动
布局用的,设置了浮动的标签会脱离正常文档流,会造成父级标签塌陷的问题
float:left;
float:right;
解决塌陷:
1.父级标签设置行高
2.伪元素选择器清除浮动
.clearfix:after{
content:'';
display:block;
clear:both;
}
父级标签class='clearfix'
overflow溢出
overflow:auto; 出现滚动条
overflow:hidden; 隐藏内容
position定位
position:static. 默认就是它
position:relative;相对定位,保留原来位置的空间,相对自己原来的位置移动
position:absolute;绝对定位,不保留原来位置的空间,按照父级标签或者祖先标签中有设置了position为相对定位的标签,如果有,按照他的位置移动,如果没有按照body移动
position:fixed; 固定定位.根据浏览器窗口位置来定位
z-index控制层级
z-index的值谁大谁在上面
透明度opacity
opacity标签透明度
rgba(255,0,0,0.3) 单独设置的某个属性的透明度
锚点
设置
<a name='top'>顶部<a/>
<div id='top'>顶部</div>
触发点:
<a href='#top'></a>
