CSS基本属性用法

本篇文章主要讲了css的一些基本的属性使用，并不是全部，大佬可以绕路了

四种导入CSS方式

内部样式 行内样式 外部样式

外部样式分为链接式和导入式

1. 内部样式

<style>
    h1{
        color:blue;
    }
</style>

2. 外部样式链接式

<!--CSS/Style.css外部自己写的-->
<link rel="stylesheet" href="CSS/Style.css">

3. 外部样式导入式

4. 行内样式

<h1 style="color:green">标题1</h1>

优先级：行内样式最高，内部样式和外部样式谁离得近就谁的优先级高（就近原则）

三种基本选择器

1. 标签选择器：会选择这个页面上的全部这个标签元素
2. 类选择器 class：可以归类多个标签为同一个class
3. id 选择器:不能归类,id保证全局唯一，不能重复，class可以重复所以可以归类

优先级：id>class>标签 没有就近原则

标签选择器：标签{}

<!--标签选择器-->
<style>
    h1{
    color:green;
    background:red;
    }
</style>

类选择器：.class名{}

<!--  类选择器-->
    <style>
        .pro{
        color:green;
        }
    </style>

id选择器：#id名{}

<!--id选择器-->
    <style>
        #da{
        color:green;
        }
    </style>

层次选择器

1. 后代选择器：后面的全部
2. 子选择器:后面一代
3. 相邻兄弟选择器：相邻的，只有一个，下边的一个，对下不对上
4. 通用选择器：相邻的向下全部元素

后代选择器

<!--body后边全部的h1-->
body h1{
background:green;
}

子选择器

<!--子选择器-->
<style>
    body>h1{
    background:green;
    }
</style>

相邻兄弟选择器

<!--相邻兄弟选择器-->
<style>
    .zhang+h1{
    background:green;
    }
</style>

通用选择器

<!--通用选择器-->
<style>
    #zhang~h1{
        background:green;
    }
</style>

结构伪类选择器

/*ul下的li,第一个li*/
ul li:first-child{
background:#006622;
}

/*p的父级下(也就是同级）的第二个元素，且第二个元素必须是p*/
p:nth-child(2){
    background:red;
    }

/*p的父级下的第三个p元素*/
 p:nth-of-type(3){
    background:red;
    }

属性选择器（常用）

*=：包含

=：绝对等于

*=a :以a开头

$=a :以a结尾

/*a标签中有id的*/
a[id]{
background:red;
}


/*a标签中有id为first的*/
a[id=first]{
background:red;
}

/*a标签中有class包含first的*/
 a[class *= "first"] {
        background:red;
             }
/*a标签中href 以a开头的 */
  a[href ^=a] {
      background:red;
            }

/*a标签中href 以doc结尾的 */
  a[href $=doc] {
      background:red;
            }

字体样式

font-size:字体大小
font-family:全部字体格式
color:颜色
font-weight:字体粗细

/*和再一起写*/
/*字体风格(斜体...)  粗细   大小  字体*/
font:oblique bolder 16px "楷体";

文本样式

color:颜色
text-align:位置
text-indent:缩进
height:文本高度
line-height:行高，行高等于文本高度就只有一行，上下居中
text-decoration:underline; 下划线
text-decoration:line-through; 中划线
text-decoration:overline; 上划线

text-decoration:none; 没下划线

/*img和span垂直居中*/
img,span{
   vertical-align:middle;
}

文本阴影

超链接伪类

a:hover{/*鼠标放上去的时候*/
color:red;
}
a:active{/*鼠标按下时候*/
color:green;
}

文本阴影

/* 阴影颜色 左右（正右负左） 上下（正下负上） 阴影半径*/

#ten{
text-shadow:red 5px 0px 2px;
}

列表

设置列表样式

list-style:none;/*没有样式*/

背景

div{
width:1000px;
height:800px;
border:1px solid green;
background-image:url("image/a.png")/*默认铺满*/
}
.div1{
background-repeat:repeat-x;/*水平铺满*/
}
 .div2{
background-repeat:repeat-y;/*垂直铺满*/
}

 .div3{
background-repeat:no-repeat;/*不铺满，一个*/
}

/* 颜色 图片 水平位置 垂直位置 方式（水平铺满，垂直铺满，不铺满）
background:#009900 url("image/a.png") 250px 4px no-repeat;

盒子模型

盒子计算方式：设计的元素多大

margin+border+padding+内容宽度

最内层就是元素大小（蓝色部分）

padding填充， 最内层上下左右填充，

border 边框 上右下左边框

margin 边缘 里上右下左的距离

边框 border

/*粗细 样式 颜色*/
border:1px solid red;

外边距margin

margin:0;/*上下左右都为0*/
margin:1px 2px;/*上下为1 左右为2*/
margin:1px 2px 3px 4px;/*上1 右2 下3 左4 顺时针 */

内边框padding

padding:0;/上下左右都为0/
padding:1px 2px;/上下为1 左右为2/
padding:1px 2px 3px 4px;/*上1 右2 下3 左4 顺时针 */

圆角边框和阴影

/*左上 右上 右下 左下的弧度*/
border-radius:60px 0px 0px 60px;

阴影

/*阴影在右边10px 下边10px 清晰度6 黄色*/
box-shadow:10px 10px 6px yellow;

浮动

display:block; 块元素

display:inline; 行元素

display:inline-block; 块元素 但是可以内联在一行

**display:none; **隐藏

float：right；右浮动

float：left；左浮动

clear：none；元素不会被向下移动以清除浮动

clear：left;元素向下移动清除左浮动

clear：right;元素向下移动清除右浮动

clear：both; 元素向下移动清除左右浮动

父级边框塌陷

**overflow:hidden;**如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）

**overflow:scroll;**如果需要，内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。

1. 设置父级边框高度高于元素。

2. 在元素块下边加一个空的div标签，清除浮动

3. 在父级边框加上overflow:hidden;

4. 父类添加伪类：after

   #father:after{
          content:"";/*空内容*/
          display:block;/*变成块元素*/
          clear:both;/*不允许两边浮动*/
   }
   

定位

相对定位

相对于自己原来的位置进行偏移，相对定位后，它任然在标准文档流中，原来的位置被保留

top:10px;和原本位置上方差10px;向下移动10px;

方便记忆:方向加上负的数就是 往这个方向移动这个数的绝对值的距离，方向加上正数就是 往这个反方向移动这个数的距离。

top:-10px;

left:-10px;

bottom:-px;

right:-10px;

position:relative;/*相对定位*/
top:-204px;

绝对定位

相对于父级或者浏览器的位置进行偏移，绝对定位后，它不在在标准文档流中，原来的位置不被保留

不在标准文档中：当对父级内全部元素修改时，它不会被修改。

定位：基于XXX定位，移动

1. 没有父级元素定位的前提下，相对于浏览器偏移
2. 父级元素存在定位，相对于父级元素进行偏移

position:absolute;/*绝对定位*/
left:20px;/*没有父级元素定位的前提下，相对于浏览器偏移
距离浏览器左边20px;*/

position:relative;/*父级元素存在定位，相对于父级元素进行偏移*/

 position:absolute;
 left:20px;/*距离父类左边20px*/

固定定位

position:fixed;

position:fixed;/*绝对定位*/
right:20px;
top:575px;/*距离浏览器右边20px 上边575px*/

Z-index及透明度

z-index:层次,越上边越大

opacity:透明度（0-1）