前端-CSS
目录
CSS总结
- CSS(Cascadig style sheet)：层叠样式表
- 选择器
CSS代码的引入方式
1.直接写在head标签里面
<head>
<style>
.c1{background-color:red;text-align:center;}
</style>
</head>
2.直接写在body标签里面 (也叫内联选择器)
<head>
<div style="background-color:red;text-align:center;"></div>
</head>
3.写入head标签里，从外部文件引入
<link rel='stylesheet' href='目标css文件'>
选择器
基本选择器
元素选择器
标签{属性:值}
div{height=100px;width=100px;}
类选择器
.类名{属性:值}
.c1{height=100px;width=100px;}
id选择器
#id值{属性:值}
.d1{height=100px;width=100px;}
通用选择器
*{属性:值} #所有标签都会具有的属性
*{height=100px;width=100px;}
组合选择器
后代选择器
div a{属性:值} #表示div标签后的所有a标签
儿子选择器
div>a{属性:值} #表示以div为父级标签的所有a标签
毗邻选择器
div+a{属性:值} #div标签的下一个标签
弟弟选择器
div~a{属性:值} #div标签后下一个为a的所有标签
属性选择器
- 属性选择器一般用在input标签中
input[title]{color:red} #找到属性为title的input标签
input[title='text']{color:red} #找到属性为title，且值为text的input标签
伪类选择器
- 伪类选择器一般用于a标签
a:link{} #未访问的网址链接
a:visited{} #访问过的网址链接
a:active{} #鼠标点击链接但还未抬起的时候
a:hover{} #鼠标移动到链接上，也可适用于其他标签
#注意，要想a标签同时具有移动到标签时改变属性的效果以及点击链接时改变属性的效果，必须先把active放在前面
input:foucus{outline:none;background-color:pink} #当选中input标签文本框时产生效果
伪元素选择器
标签:first-letter{}
div:first-letter{color:red;font-size:20px}
标签:before{}
p:before{content:'呵呵',color:blue;font-size:20px}
标签:after{}
p:after{content='哈哈',color:pink;font-size:20px}
分组与继承
#分组
div,p{属性:值}
#继承
所有的父级标签的属性后代都会有，除非后代自己设置了相同的属性将其覆盖
CSS选择器的优先级
继承的优先级(权重)为0
元素选择器的优先级为1
类选择器的优先级为10
id选择器的优先级为100
内联选择器的优先级为1000
可以通过添加!important属性使得标签的优先级最高
属性
高度宽度
height:高度
width:宽度
.c1{
height:100px;
width:100px
}
字体属性
-
font-family:字体
-
font-size:字体大小 默认为16px
-
font-weight:字体粗细 字体粗细有normal、bold、bolder、100-900(400等于normal，700等于bold)
-
color:字体颜色 颜色有四种形式
- color:red #颜色单词
- color:#ffffff #六位16进制
- color:rgb(255,0,0) #rgb三原色比
- color:rgba(255,0,0,0.4) #a表示透明度
.c1{
font-family:'宋体','楷体','黑体';
font-size:20px
font-weight:bold
color:rgba(255,255,0,0.3)
}
文字属性
-
文字排列：text-align:排列方式
- left：左对齐，默认
- right：右对齐
- center：居中对齐
- justify：两端对齐
-
文字装饰：text-decorate:装饰方式
- none：默认，标准文本
- underline：定义文本下的一条线
- overline：定义文本上的一条线
- line-through：穿过文本的一条线
- inherit：继承父类元素的text-decoration属性的值
-
首行缩进：text-indent:32px
.c1{ text-align:center; text-decorate:none; text-indent:32px; }
背景属性
-
background-color:背景颜色
- background-color:red #颜色单词
- background-color:#ffffff #六位16进制
- background-color:rgb(255,0,0) #rgb三原色比
-
background-image:url('路径')
-
background-repeat:重复方式
- repeat(默认)：背景图片在x,y轴下铺满整个标签
- no-repeat：背景图片不重复
- repeat-x：在x轴上铺满
- repeat-y：在y轴上铺满
-
background-position:位置
- left top center top right top
- left center center center right center
- left bottom center bottom right bottom
.c1{ background-color:rgb(255,0,0); background-image:url('佛卢瓦.jpg'); background-repeat:no-repeat; background.position:center center; } #简写形式 .c1{ background:rgb(255,0,0) url('佛卢瓦.jpg') no-repeat center center; }
边框属性border
- border-width:宽度
- border-style:样式
- solid:边框为实线
- dashed：边框为虚线
- dotted：边框为点
- border-color:颜色
- color:red
- color:#ffffff
- color:rgb(255,0,0)
- border-radius:百分比 控制四角圆度 50%就为圆形
.c1{
width:200px;
height:200px;
border-width:10px;
border-style:solid;
border:red;
border-radius:50%;
}
display属性
- display：
- inline 将标签设置为内敛标签
- block 将标签设置为块级标签
- inline-block 将标签设置为同时具有内敛标签和块级标签的标签，但不占一行
- none 隐藏标签，但不占之前的空间，与visibility:none 相比后者会继续占着空间
css盒子模型
padding内边距
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
可以简写为padding:10px(上下) 20px(左右);
padding:10px(上),20px(右),10px(下),20px(左)
margin外边距
margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;
可以简写为margin:10px(上下) 20px(左右);
margin:10px(上),20px(右),10px(下),20px(左)
#注意，当两个标签都设置了外边距的话，上下边距取最大值，左右边距取累加值
float属性
- float:
- right 往右飘
- left 往左飘
.c1{
float:right
}
注意：浮动会造成父级标签塌陷问题
解决父级塌陷的方法：1.父级标签设置高度
2.父级标签下一级标签设置clear:both属性
3.父级标签加上如下伪元素选择器属性
.clearfix:after{
content:'';
display:block;
clear:both;
}
overflow溢出属性
- overfloat:
- visible 默认值，内容溢出不会裁剪，会呈现在文本框之外
- hidden 内容会被修建，超出内容不可见
- scroll 内容会被裁剪，但超出文本框的内容会以滚动条的形式加以查看
- auto 如果内容被裁剪，超出文本框的内容能以滚动条的形式加以查看，多使用这种
#圆形头像实例
<head>
<meta charset="UTF-8">
<title>圆形头像实例</title>
<style>
.c1{
height:100px;
width:100px;
border:2px solid pink;
border-radius: 50%;
overflow: hidden;
}
.c1 img{
width:100%;
}
</style>
</head>
<body>
<div class="c1">
<img src="cat.jpg">
</div>
</body>
position属性
- position:
- realitive 相对定位，保留之前的标签位置，相对于之前的标签位置进行移动
- absolute 绝对定位，不保留之前的标签位置，相对于父级标签进行移动，如果没有父级标签，就找祖 父级标签body标签
- fixed 固定定位，相对于浏览器窗口进行移动，一旦确定就会固定在浏览器窗口的固定位置
/*position:定位方式;
top:px距离;
bottom:px距离;
left:px距离;
right:px距离;
*/
#实例
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
height:200px;
width:200px;
text-align: center;line-height: 200px;
border:2px solid pink;
padding: 20px;
position: fixed;
top: 50%; left: 50%;
margin-top: -100px;margin-left: -100px; #注意使用这行的形式
/*margin-bottom: 100px;margin-right: 100px;*/ #这种格式不会产生作用
}
</style>
</head>
<body>
<div class="c1">
啦啦啦
</div>
</body>
z-index属性
- z-index 值决定标签的上下关系，数值大的标签盖住数值小的标签，
- 只有定位了的标签，才能有z-index。不管相对定位，绝对定位，固定定位，都可以使用z-index，但是浮动元素float不能使用z-index
- 所有一般大布局就是使用float做的，小布局就是使用position做的
- z-index值没有单位，就是一个正整数，默认的z-index值为0，如果大家都没有z-index值，或者z-index值一样，那么哪个标签写在后面，哪个标签就在上面，定位了的标签，永远压住没有定位的标签
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
height:200px;
width:200px;
text-align: center;line-height: 200px;
background-color: red;
border:2px solid pink;
padding: 20px;
position: fixed;
top: 50%; left: 50%;
margin-top: -100px;margin-left: -100px;
z-index: 2;
}
.c2{position: absolute;
height: 600px;width: 100%;
background-color: blue;
z-index: 1;
}
</style>
</head>
<body>
<div class="c2">
</div>
<div class="c1">
啦啦啦
</div>
</body>
</html>
opacity透明属性
- opacity:透明度 透明度使用0-1表示，数值越大，越不透明
- opacity属性用于表示整个标签透明度，与rgba相比，rgba只是表示背景的透明度
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
height: 300px;width: 100px;
background-color: rgba(255,255,0,0.5);
border: 10px solid blue;
padding: 20px;
margin: 20px;
opacity: 0.3;
}
</style>
</head>
<body>
<div class="c1">
啦啦啦
</div>
</body>
</html>
