CSS基础知识

1、快速入门

1.1、CSS规范

规范，<style> 可以编写CSS代码，每一个声明最好使用分号隔开
语法：
    选择器 {
        声明1;
        声明2;
        声明3;
    }

1.2、CSS优势

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

1.3、四种引入方式

外部样式
- 链接式
  - <link rel="stylesheet" href="css/style.css">
- 导入式
  - @import 是CSS2.1特有的,一般不用
  - <style>@import url("css/style.css")</style>
内部样式
行间样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  <!--外部样式-->
  <link rel="stylesheet" href="css/style.css">
  
  <!--内部样式-->
  <style>
    h1{
      color: green;
    }
  </style>
  
</head>
<body>
<!--
  错误：
    优先级：行内样式>内部样式>外部样式
  正确：
    就近原则，谁离标签近谁生效
-->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color: red;">我是标题</h1>
</body>
</html>

2、选择器

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

2.1、基本选择器

标签选择器：选择一类标签标签{}

<style>
	/*标签选择器，会选择到页面上所有的这个标签的元素*/
    h1{
    	color: #a13d30;
        background: #3cbda6;
        border-radius: 24px;
    }
    p{
        font-size: 80px;
    }
</style>

类选择器 class：选择所有class属性一致的标签，跨标签，.类名{}

<style>
	/*
    类选择器的格式 .class的名称{}
    好处，可以多个标签归类，是同一个class，可以复用
    */
    .cltype1{
        color: blue;
    }
    .cltype2{
        color:#a24fff;
    }
</style>

Id 选择器：全局唯一！ #id名{}

<style>
    /*
    id选择器：id必须保证全局唯一！
    #id名称{}
    优先级：不遵循就近原则，固定的
    id选择器>class选择器>标签选择器
    */
    #idt{
        color: #ff008a;
    }
    .style1{
        color: #02ff00;
    }
    h1{
        color:#2d1dc1;
    }
</style>

2.2、层次选择器

后代选择器：在某个元素的后面祖爷爷爷爷爸爸你

/*后代选择器*/
body p{
    background: red;
}

子选择器

/*子选择器*/
body>p{
    background: #02ff00;
}

相邻兄弟选择器

/*相邻兄弟选择器：只有一个，相邻（向下）*/
.active + p{
    background: #2d1dc1;
}

通用选择器

/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
    background: #2d1dc1;
}

2.3、结构伪类选择器

/*!*ul的第一个子元素*!*/
ul li:first-child{
  background: #2d1dc1;
}

/*!*ul的最后一个子元素*!*/
ul li:last-child{
  background: #ff4832;
}

/*
  选中p1：定位到父元素，选择当前的第一个元素
  选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！顺序
*/
p:nth-child(1){
  background: #2700ff;
}

p:nth-child(2){
  background: #2795ff;
}

/*!*选中父元素，下的p元素的第二个，类型*!*/
p:nth-of-type(1){
  background: yellow;
}

2.4、属性选择器（常用）

/*属性名，  属性名 = 属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/

/*  存在ID属性的元素   a[]{}*/
a[id] {
    background: yellow;
}

/*title=test 的元素*/
a[title=test]{
    background: #299e4a;
}

/*class绝对等于 "item last" 的元素*/
a[class="item last"]{
    background: #ff4f4f;
}

/*class 中有 links 的元素*/
a[class*="links"]{
    background: #a24fff;
}

/* 选中href以http开头的 */
a[href^="http"]{
    background: #a13d30;
}

/* 选中href以 pdf 结尾的 */
a[href$="pdf"]{
    background: #ff008a;
}

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .demo a {
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: #274bff;
      text-align: center;
      color: gainsboro;
      text-decoration: none;
      margin-right: 5px;
      font: bold 20px/50px Arial;
    }

    /*属性名，  属性名 = 属性值（正则）
     = 绝对等于
     *= 包含这个元素
     ^= 以这个开头
     $= 以这个结尾
   */

    /*  存在ID属性的元素   a[]{}*/
    a[id] {
      background: yellow;
    }

    /*title=test 的元素*/
    a[title=test]{
      background: #299e4a;
    }

    /*class绝对等于 "item last" 的元素*/
    a[class="item last"]{
      background: #ff4f4f;
    }

    /*class 中有 links 的元素*/
    a[class*="links"]{
      background: #a24fff;
    }

    /* 选中href以http开头的 */
    a[href^="http"]{
      background: #a13d30;
    }

    /* 选中href以 pdf 结尾的 */
    a[href$="pdf"]{
      background: #ff008a;
    }
  </style>

</head>
<body>
<p class="demo">
  <a class="item first" id="first">1</a>
  <a href="" class="link2 item active" target="_blank" title="test">2</a>
  <a href="images/123.html" class="links item">3</a>
  <a href="images/123.png" class="links item">4</a>
  <a href="http://www.baidu.com" class="item">5</a>
  <a href="abc" class="item">6</a>
  <a href="/a.pdf" class="item">7</a>
  <a href="/abc.pdf" class="item">8</a>
  <a href="abc.doc" class="item">9</a>
  <a href="abcd.doc" class="item last">10</a>
</p>
</body>
</html>

3、美化网页元素

3.1、为什么要美化网页

有效传递页面信息
美化网页，页面漂亮，才能吸引用户
凸显页面的主题
提高用户的体验

span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #title1{
      font-size: 20px;
    }
  </style>
</head>
<body>
欢迎学习<span id="title1">CSS</span>
</body>
</html>

3.2、字体样式

<!--
    font-family:  字体
    font-size: 字体大小
    font-weight: 字体粗细
    color: 字体颜色
-->
<style>
    body{
        font-family: "Arial Black",楷体;
        color: #a13d30;
    }
    h1{
        font-size: 20px;
    }
    .p1{
        font-weight: lighter;
    }
</style>

<!--
    颜色：
    单词
    RGB 0~F
    RGBA A:透明度，0~1

    text-align: 排版居中
    text-indent: 2em;  段落首行缩进
    height: 300px;
    line-height: 300px;
    	行高和块高一致，就可以上下居中
-->
<style>
    h1{
        color: rgba(0,255,255,0.9);
        text-align: center;
    }
    .p1{
        text-indent: 2em;
    }
    .p3{
        background: #2700ff;
        height: 100px;
        line-height: 100px;
    }
    /*下划线*/
    .l1{
        text-decoration: underline;
    }
    /*中划线*/
    .l2{
        text-decoration: line-through;
    }
    /*上划线*/
    .l3{
        text-decoration: overline;
    }
</style>

<style>
    /*
    水平对齐~  参照物：a,b
    */
    /*img,span{*/
    /*  vertical-align: middle;*/
    /*}*/
    /*#l1,#l2{*/
    /*  vertical-align: middle;*/
    /*}*/
    .ver,.var2{
    	vertical-align: middle;
    }
</style>

3.3、文本样式

颜色：color rgb rgba
文本对齐的方式： text-align=center
首行缩进：text-indent:2em
行高：line-height:
装饰：text-decoration
文本图片水平对齐：vertical-align:middle;

3.4、阴影

/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径 */
#price{
	text-shadow: #529fee 10px -5px 2px;
}

3.5、超链接伪类

正常情况下：a, a:hover

 /*默认的颜色*/
a{
    text-decoration: none;
    color: #000000;
}
/*只需要记住悬浮*/
/*鼠标悬浮的状态*/
a:hover{
    color: orange;
    font-size: 50px;
}

3.6、列表

/** ul li */
/*
list-style
	none: 去掉圆点
	circle: 空心圆
	decimal: 数字
	square: 正方形
*/
/*ul{*/
	/*background: #a0a0a0;*/
/*}*/
ul li{
  height: 30px;
  list-style: none;
  text-indent: 1em;
}

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">图书</a>/<a href="#">音像</a>/<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>/<a href="#">手机</a>/<a href="#">数码</a></li>
        <li><a href="#">电脑</a>/<a href="#">办公</a></li>
        <li><a href="#">家居</a>/<a href="#">家装</a>/<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>/<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>/<a href="#">钟表</a>/<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>/<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>/<a href="#">旅行</a>/<a href="#">充值</a>/<a href="#">票务</a></li>
    </ul>
</div>
</body>
</html>

body{
  background: #f4f4f4;
}
#nav{
  width:200px;
  background: white;
  border-radius: 3px;
}

ul{
  padding-left: 0;
  padding-bottom: 10px;
  padding-top: 10px;
}

ul li{
  list-style: none;
  padding-left: 20px;
  background-image: url("../images/r.png");
  background-repeat: no-repeat;
  background-position: 180px;
  background-size: 10px 10px;
}

ul li:hover{
  background: #d9d9d9;
  border-radius: 2px;
  background-image: url("../images/r.png");
  background-repeat: no-repeat;
  background-position: 180px;
  background-size: 10px 10px;
}

a{
  color: #000;
  text-decoration: none;
}

a:hover{
  color:#c81623;
}

3.7、背景

背景颜色、背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        div{
            width: 1300px;
            height: 700px;
            /** 参数：粗细，样式，颜色
            * solid:实线
            */
            border: 1px solid red;
            /*默认是全部平铺的 repeats*/
            background-image: url("images/tx.jpg");
        }
        /* background-repeat:布局方式：
            *  repeat-x:水平平铺
            *  repeat-y:垂直平铺
            *  no-repeat:不平铺
            */
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

3.8、渐变

网站：https://www.grabient.com/

background-color: #8EC5FC;
background-image: linear-gradient(88deg, #8EC5FC 0%, #E0C3FC 100%);

4、盒子模型

4.1、什么是盒子模型

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

4.2、边框

4.2.1、边框的粗细

border-width

4.2.2、边框的样式

border-style

虚线：dashed
实线：solid

4.2.3、边框的颜色

border-color

4.3、内外边距

==margin: 0 0;#代表上下和左右==

==margin: 0 0 0 0;#代表上、右、下、左==

盒子的计算方式：这个元素到底多大？

margin + border + padding + 内容宽高

5、浮动

5.1、标准文档流

块级元素：独占一行

h1~h6  p  div  列表...

行内元素：不独占一行

span  a  img  strong....

行内元素可以包含在块级元素中，反之则不可以

5.2、display

<style>
    /*display:
    block 块元素
    inline 行内元素
    inline-block 是块元素，但是可以内联，在一行！
    none 隐藏
    */
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: none;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
</style>

这个也是一种实现行内元素排列的方式，但是我们很多情况都是使用 float

5.3、float

1、左右浮动 float

.layer01{
  border: 1px #F00 dashed;
  width: 200px;
  /*浮动：左浮*/
  /*float: left;*/
  float: right;
  display: inline-block;
}

.layer02{
  border: 1px #00F dashed;
  width: 500px;
  float: right;
  display: inline-block;
}