前端--CSS

三种CSS使用方法：  

外部：<link rel="" href="">

内部：<style>

h{

color: red;        

}

</style>

行内：<p style="text-align:conter; color:red">文字</p>

基本选择器：

标签选择器：

<style>

h1{

color:red;

background:green;

border-radius: 5em;

padding: 5em;

}

</style>

类选择器：

.zx{

color:red;

}

id选择器：

#zx{

color:red;

}

id选择器>class选择器>标签选择器

使用时  <h(标签) class="类选择"  / id="id选择"></h>

层次选择器：

后代选择器：（body下的所有 p标签）

body p{

background:red;

}

子代选择器：(body下的第一代--子代  p标签， 在ul,ol中的p不算)

body>p{

background: green;

}

兄弟选择器：（action下的第一个P标签）

.action+p{

background:blue;

}

相邻选择器：（active下的所有一级p标签）

.active~p{

background:purple;

}

结构伪类选择器：

选中ul第一个和最后一个元素
ul li:first-child{
    background: #148aff;
}
ul li:last-child{
    background: #148aff;
}

 选择父类为p的第一个元素

p:nth-of-type(1){
    background: purple;
}

属性选择器：

. demo a{

float:left;(浮动：向左)

display:block;(类型：块元素)

height:50px;(高：50像素)

width:50;(宽：50像素)

border-radius:15px;(模型圆角：15像素)

background:red;

text-align:conter;(文字居中)

color:purple;

text-decoration:none;(下划线格式：无)

margin-right：5px;(右外边距：5px)

font:bold 20px/50px Arial;

}

CSS作用及字体样式：

font-family:楷体;(字体)

font-size:50px;(字体大小)

font-weight:bold;(字体粗细)

color:red;(字体颜色)

px--像素单位  em--字体缩进单位

font: oblique bolder 12px "楷体";

字体格式（斜体/正体等）  字体粗细  字体大小  字体格式（楷体/宋体等）

文本样式：

颜色：1.单词   2.RGB  0~F 3.RGBA  A 0~1

<style>

p{

color: rgba(0,255,255,0.5);

text-indent: 2em;(首行缩进)

下划线：text-decoration:underline;

中划线：text-decoration:line-through;

上划线：text-decoration:overline;

去下划线：text-decoration:none;

水平对齐：vertical-align:middle;

}

</style>

文本阴影和超链接伪类：

<style>

默认：a{text-decoration:none;

color:#000000;}

鼠标悬停状态：a:hover{color:orange;

font-size:50px;}

鼠标按住未放状态：a:active{color:green;

}

</style>

阴影颜色:

#price{

text-shadow: #3cc7f5 10px 10px 2px;

}

背影图像应用及渐变：

设置div块背景图：

div{
    width: 1000px;
    height: 700px;
    border: 1px solid red;
    background-image: url("resources/OIP-C2.jpg");
}

图形平铺：repeat-x--水平平铺     repeat-y--垂直平铺   repeat--平铺

.div1{
    background-repeat: repeat-x;
}

.div2{
    background-repeat: repeat-y;
}

.div3{
    background-repeat: repeat;
}

 渐变：

background: #ffffff;
background-image: linear-gradient(115deg,#ffffff 0%,#6284ff 50%,#ff0000 100%);

 盒子模型及边框应用：

margin:外边距    padding:内边距    border:边框

边框粗细/样式/颜色

border: 1px solid black;

内外边距及div居中：

margin: 0 auto;

margin + border + padding + 内容宽度。

圆角边框及阴影：

 

圆角边框：border-radius： 50px;（顺时针四个角  配置）

阴影：向右  向下  半径  颜色

box-shadow:20px 10px 2px yellow;

display和浮动：

块级元素：独占一行   h1~h6  div  p  列表

行级元素：不独占一行   span  img  a  strong ...

display：inline-block;(行级和块级)

float：right;(向右浮动   脱离父级元素的)

overflow及父级边框塌陷问题：

clear:right;右侧不允许有浮动元素 left(左侧)  both(两边)

1.增加父级元素高度

2.增加空标签----clear：both;

3.使用溢出符号： overflow:scroll;

4.父类添加伪类：after  

相对定位：（以父级元素做参照）

position: relative;

绝对定位：（以当前浏览器界面做参照）

position: absolute;

固定定位：（固定在界面的某个位置）

position： fixed;

z-index及透明度：

透明度：opacity: 0.5;

z-index：z-index: 777;（取值0~1000）