CSS


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;	/*设置透明度*/


文章作者: Dydong
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Dydong !
  目录