CSS
[TOC]
导入方式(就近原则)
1:
<h1 style="color: gold"> word </h1>
2:
/*选择器{
声明1.
声明2.
声明3.
}*/
<style>
name{
}
<\style>
3.
<link rel="stylesheet" href="path">
基本选择器
标签选择器:
<style>
name{
}
<\style>
类选择器(支持复用):
<style>
.name{
}
<\style>
<h1 class="name"> word </h1>
<link rel="stylesheet" href="path">
<h1 class="name"> word </h1>
ID选择器(不可复用):
<style>
#num{
}
<\style>
<h1 id="num"> word </h1>
层次选择器
后代选择器
body p{
background: red;
}
子选择器
body>p{
background: red;
}
相邻兄弟选择器
.active + p{
background: red;
}
<p class=".active">
通用选择器
.active ~ p{
background: red;
}
<p class=".active">
结构伪类选择器
<style>
/*选择父级元素(body)的第n个表达器,同时元素是p才生效*/
p:nth-child(1){
color: gold;
}
/*选择父级元素(body)的p元素的第一个*/
p:nth-of-type(1){
color: red;
}
/*移上去可以产生渐变*/
a:haver{
color red;
}
</style>
属性选择器
<style>
a[id=word]{
id=word;
}
a[class="word"]{
class=word;
}
a[class^="word"]{
word开头;
}
a[class$="word"]{
word结尾;
}
</style>
字体美化
class {
font-size: 20px; /*大小*/
font-family: "Agency FB"; /*字体样式*/
font-weight: bold; /*粗细*/
color: gold; /*颜色*/
}
文本样式
.text{
color: rgba(0,255,255,1); /*rgb透明度*/
text-align: center; /*居中*/
text-indent: 2em; /*缩进*/
background: black; /*底色*/
color: white; /*文字颜色*/
height: 300px;/*与下面一个调一样,中间居中*/
line-height: 300px;
text-decoration: underline;/*下划线*/
text-decoration: none;/*去下划线*/
text-shadow: /*颜色,水平偏移,垂直偏移,阴影半径*/
}
列表样式
ul li{
list-style: none; /*无样式*/
height: 20px; /*高度*/
text-align: center; /*居中*/
}
背景图片
背景图片可以去这里找:Grabient。
div{
width: 500px;
hight: 500px;
border: 1px solid red; /*边框*/
background-image: url("path"); /*路径*/
background-repeat: repeat-x; /*x轴平铺*/
background-position: num1 num2; /*定位*/
background: red url("path") 20px 20px no-repeat; /*直接定义xy轴位置*/
}
盒子模型
body,a,h1,li,ul{
margin: 0;
padding: 0;
text-decoration: none;
}
圆角样式
div{
margin:0 auto; /*居中*/
text-align:center /*居中,有时候要与上面的结合使用*/
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 10px 10px 10px 10px; /*一个是1/4大小*/
box-shadow: 10px 10px 10px 10px; /*阴影*/
}
/*可以设置原型头像*/
链接变色
a:hover{
background: red;
}
Display
/*可以把div变成line,把span变成block*/
div{
display: inline-block;
}
span{
display: block;
}
name{
float: right; /*浮动,把图片提到最上层然后往指定方向飘*/
}
父级边框塌陷问题
clear right; /*右侧不允许有浮动*/
clear left; /*左侧不允许有浮动*/
clear both; /*不允许有浮动*/
/*可以加大父级的边框||加入额外的div*/
Overflow(滚动条)
overflow: scroll;
相对定位
div{
position: relative; /*相对定位*/
left: 200px;
top: -100px;
}
绝对定位
div{
position: absolute; /*绝对定位,一般套在相对定位中*/
left: 200px;
top: -100px;
}
固定定位
div{
position: fixed; /*nav等*/
right: 200px;
bottom: 0px;
}
z-index
z-index: 50; /*是一个层级的关系,因此我们可以利用这个特性来做多层图片*/
opacity: 0.5; /*设置透明度*/