CSS基础

CSS的优势：

1. 1. 内容和表现分离
   2. 网页结构表现统一，可以实现复用
   3. 样式十分的丰富
   4. 建议使用独立于html的css文件
   5. 利用SEO容易被搜索引擎收录

CSS的三种导入方式：

<!--优先级：行内样式>内部样式>外部样式-->

行内样式：<h1 style="color:green"></h1>

<!--    内部样式-->
    <style>
        h1{
            color: red;
        }
    </style>

/*外部样式*/
h1{
    color:green;
}

<!--    链接式-->
<link rel="stylesheet" href="style.css">
<!--    导入式-->
    <style>@import "style.css";</style>

选择器：

作用：选择页面上的某一个或者某一类元素

基本选择器：

/*标签选择器会选择页面上所有的这个标签的元素*/ 标签{}

类选择器 class：/*类选择器的格式   .class 的名称{}好处，可以多个标签归类是同一个class*/

ID选择器：/*id选择器：id必须保证全局唯一性*/ #id{}

优先级：ID选择器＞类选择器＞标签选择器

层次选择器：

后代选择器：在某个元素的后面的所有

子选择器：同辈

相邻弟选择器：相邻的同辈，他的下一个

通用选择器：选中的该元素其向下所有同类兄弟元素

后代选择器
body p{
    background:#16ff7b;
}
/*子选择器*/
body>p{/*一代才有效果*/
    background: red;
}
相邻兄弟选择器
.active + p{
    background: green;
}
通用选择器
.active~p{
    background: aqua;
}

结构伪类选择器：

/*ul的第一个子元素*/
ul li:first-child{
    background: #16ff7b;
}
/*ul的最后一个子元素*/
ul li:last-child{
    background: #ff54bc;
}
/*选择当前p元素的父级元素，选中父级元素的第1个子元素，并且这个元素是p元素才生效，按照顺序*/
p:nth-child(1){
    background: aqua;
}

.demo a{
    float: left;
    display: block;
    height: 50px;
    width: 50px;
    border-radius: 10px;/*边框变得圆润*/
    background: #16ff7b;
    text-align: center;
    color: red;
    text-decoration: none;/*下划线*/
    margin-right: 5px;/*右边距*/
    font: bold 20px/50px Arial;/*bold粗体 字体大小 行高 字体*/
}

属性选择器：

a[class *= "links"]{
    background: yellow;
}

*=包含这个元素     ==是绝对等于  ^=以这个开头   $=以这个结尾

美化网页元素

字体：

/*字体：font-family   字体大小：font-size    字体粗细：font-weight*/

文本样式：

1. 1. 颜色 color rgb rgba
   2. 文本对齐的方式：text-align:排版   
   3. 首行缩进text-indent：2em，段落首行缩进
   4. 行高： 行高和块的高度一直就可以上下居中 line-height
   5. 装饰 text-decoration
   6. Dashed 虚线  

超链接伪链：

/*鼠标悬浮的颜色*/
a:hover{
    color: orange;
}
/*鼠标按住的颜色*/
a:active{
    color: green;
}

阴影：

text-shadow：阴影颜色、水平偏移、垂直偏移、阴影半径

list-style：none 去掉圆点 circle空心圆

背景：

Border： 线条粗细 线条类型 线条颜色

background-image: url("../image/1024.jpg");/*默认是全部平铺的*/

background-repeat 平铺类型选定                             

背景渐变：background：linear-gradient（19deg，颜色   0%，颜色 100%）

盒子模型：

Margin：外边距

Padding：内边距

Border：边框

边框：border: 1px solid black;

圆角边框

Display：block 块元素

               Inline 行内元素

              Inlinke-block 是块元素也是行内元素 在一行

Float：浮动，但是网页缩放会导致图片以及排版改变

解决办法：1.增加父级元素的高度

#father{

       Border：1px #000 solid；

       Height：800px；

}

2.增加一个空的div标签，清除浮动

<div class = “clear”></div>

.clear{

Clear:both;

Margin:0;

Padding:0;

}