学习归纳8：CSS

CSS：层叠样式表(Cascading Style Sheets)，用于页面美化

行内样式：

style="css属性：属性值 ；css属性：属性值"

颜色：

RGB：红，绿，蓝

RGBA：红，绿，蓝，透明度

HSL：色相，饱和度，亮度

HSLA：色相，饱和度，亮度，透明度

直接输入颜色对应的单词

内部样式：

<style>
         选择器  {
           属性名:属性值;
           属性名:属性值;
           ....
         }
      </style>

外部样式：

1，创建一个.css文件。
2，在css文件内写代码使用。
3，.html文件里关联.css文件。
 <link rel="stylesheet" href="./css/index.css">

选择器：

1.类选择器

先给标签起一个class名，然后

<style>
         .class名  {
           属性名:属性值;
           属性名:属性值;
           ....
         }
      </style>

2.标签选择器

<style>
         标签名  {
           属性名:属性值;
           属性名:属性值;
           ....
         }
      </style>

3.id选择器

先给标签起一个id名，然后

#id名  {
           属性名:属性值;
           属性名:属性值;
           ....
         }
      </style>

4.伪类选择器

默认样式  
    a{
       color:
       text-decoration:
    }

访问过的样式
    a:visited{
      如果visited没有设置下滑线样式，使用默认样式
    }

鼠标划过样式
    a:hover{
    }
    

鼠标点击的样式
    a:active {
    }

要按该顺序编写，不然可能会失效

常用属性：

font-weight:bold;    设置文字粗体

font-style:italic;   设置文字斜体

font-famliy: "字体的名字"; 设置文字字体

font-size: **px;     设置文字的字号

text-align:left/center/right;      设置文字对齐方式

text-decoration:underline;      设置文字有下划线

text-decoration:none;              取消下划线

border:1px red solid;    设置四周的外边框，颜色，宽度，线种类可以按任意顺序写；solid实线，dotted点线，none无线，dashed短线线，double双线，groove槽线，ridge脊线，inset内嵌，outset突起

list-style-type:none;    去掉列表项的默认开头符号

list-style-image:图片;   自定义列表项的默认开头符号的图片

<a>标签的title属性可以设置鼠标悬停时显示的内容

表和盒的区别：表：法做复杂页面 div ：即读即加载

盒子模型：盒子本身+内边距+边框+外边距
1.盒子本身的宽和高 
2.内边距：盒子本身到边框的距离：调整内容在盒子中的位置 padding
3.边框 border
4.外边距:它不影响盒子的可见框大小，但影响盒子的位置 margin

块级元素：常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

块级元素特点：独占一行、高度宽度内外边距可控、宽度默认是父级元素的100%、是一个容器及盒子，其中可以放行内元素和块级元素

行内元素：常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

行内元素特点：相邻行内元素在一行上一行显示多个、高宽直接设置无效、默认宽度是本身内容的宽度、只能容纳文本或其他行内元素

CSS三大特性：层叠性、继承性、优先级

<span>标签：本身不带任何样式和属性，专门配合css进行使用

样例

<style>
        /* 先将默认样式取消 */
        * {
            margin: 0;
            padding: 0;
        }
        .b1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 内边距，调节盒子内内容的位置，写两个值时第一个值为上下，第二个为左右；写三个值是第一个为上，第二个为左右，第三个为下；写四个值时按顺时针从上开始*/
            padding: 20px;
            /* 外边距，调节盒子的位置 */
            margin: 20px;
            border: 10px red solid;
        }
        .b2 {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>

<style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            border-top: solid 5px orange;
            border-bottom: solid 2px #ccc;
            /* 去掉无序列表样式 */
            list-style-type: none;
            width: 100px;
            height: 60px;
            /* 浮动 */
            float: left;
            /* 设置文字行高 */
            line-height: 60px;
            text-align: center;
            font-family: "楷体";
            /* <span>无默认样式和属性，配合css使用 */
        }
        li:hover {
            background-color: #ccc;
        }
        p {
            width: 1000px;
            height: 1000px;
            /* 背景图片比标签小时默认重复平铺 原点在左上角，右和下为x和y的正方向*/
            background-image: url(/html文件/day1/images/4.png);
            /* 不平铺 */
            background-repeat: no-repeat;
            /* 前x后y */
            background-position: 100px 20px;
            
        }
    </style>