CSS

1.快速入门

单独新建一个css文件
link标签引入css样式

优势：

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

2.三种css导入的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速入门</title>
    <!--3.外部样式-->
    <link rel="stylesheet" href="./css/style.css">
    <!--2.内部样式-->
    <style>
        h1{
            color: blue;
        }
    </style>
</head>
<body>

<!--1.行内样式：在标签元素中，编写一个style属性-->
<h1 style="color: green">我是标题</h1>
<!--优先级：就近原则-->

</body>
</html>

优先级：就近原则

3.css选择器

3.1三种基本选择器：

标签选择器
类选择器
id选择器

优先级：id选择器>类选择器>标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*标签选择器，会选择页面上所有的标签*/
        h1{
            color: green;
            background: aqua;
            border-radius: 25px;
        }
        p{
            font-size: 60px;
        }
        /*
        类选择器的格式
            .class的名称{}
                好处：可以多个标签归类，是同一个class*/
        .learning{
            color: red;
        }
        /*id选择器格式
            #id的名称{}
                好处：全局唯一 */
        #good{
            color: blueviolet;
        }

    </style>
</head>
<body>
<!--
1.基本选择器：
        1.标签选择器
        2.类选择器
        3.id选择器
   优先级（不遵循就近原则）：id选择器>class选择器>标签选择器
-->
<h1 class="learning">java</h1>
<h1 class="learning">java</h1>
<h1 id="good">java</h1>
<p class="learning">java</p>
<p>java</p>
<p>java</p>

</body>
</html>

3.2层次选择器

后代选择器
子选择器
相邻兄弟选择器
通用兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*p{
            background: blueviolet;
        }*/
        /*
        后代选择器格式
            标签 标签{}
        */
        /*body p{
            background: blueviolet;
        }*/

        /*子代选择器格式
            标签>标签{}
        */
        /*body>p{
            background: red;
        }*/

        /*相邻兄弟选择器格式
            .class的名称+（同辈）标签{}
        */
        /*.active+p{
            background: blueviolet;
        }*/
        /*通用兄弟选择器格式
            .class的名称~同辈标签{}*/
        .active~p{
            background: blueviolet;
        }
    </style>

</head>
<body>
<!--
    层次选择器：
            1.后代选择器：后面所有标签
            2.子选择器:后面一代的标签
            3.相邻兄弟选择器：同辈,对下不对上，只有一个
            4.通用兄弟选择器:同辈，对下不对上，可以多个
-->
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p4</p>
<ul>
    <li>
        <p>p4</p>

    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>

</ul>
<p>p5</p>

</body>
</html>

3.3结构伪类选择器

<style>
        ul li:first-child{
            background: blueviolet;
        }
        ul li:last-child{
            background: red;
        }
        /*选中当前p元素到父级元素，选中父级元素的第二个，并且是当前元素才生效*/
        p:nth-child(2){

        }
        /*选中父元素下的p元素的第二个*/
        p:nth-of-type(2){

        }
    </style>

伪类：带有：

3.4属性选择器（重要）

1.标签[属性名]

2.标签[属性名=属性值]

　　　　=绝对等于

　　　　*=包含

　　　　^=开头

　　　　$结尾

4.属性

4.1字体样式

　　font-family 字体

　　font-size 字体大小

　　font-weight 字体粗细

4.2文本样式

　　text-align 对齐方式

　　text-indent 首行缩进

　　text-decoration 上中下画线

　　text-shadow 阴影

　　height 块的高度

　　line-height 行高

4.3列表样式

　　list-style

　　　　none 去掉无序列表圆点，有序列表数字

　　　　circle 空心圆

　　　　decimal 数字

　　　　square 正方形

4.4背景

　　background-color 背景颜色

　　background-image 背景图片

　　background-repeat 背景平铺方式

　　background-positon 背景位置

　　background-image:linear-gradient:背景渐变

4.5盒子模型

　　margin 外边距

　　border 边框

　　　　border-radius 圆角边框

　　padding 内边距

4.6display和浮动

　　display:方向不可控制

　　　　block 块元素

　　　　inline 行内元素

　　　　inline-block 是块元素，但是可以内联在一行，也是一种实现行内元素排列的方式

　　float:left 浮动起来会脱离标准文档流，所以要解决父级边框塌陷问题

4.7父级边框塌陷问题

解决方案：

　　　　1.设置父级元素的高度，不推荐

　　　　2. 浮动元素后面增加一个空的div标签， clear:both 清除浮动

　　　　3.在父级元素中增加一个overflow:hidden(父级元素尺寸是子级元素称起来的)

　　　　4.父级添加一个伪类：after {

　　　　　　　　　　　　　　　　content:' ';

　　　　　　　　　　　　　　　　display:block;

　　　　　　　　　　　　　　　　clear:both;

　　　　　　　　　　　　　　}

4.8定位

相对定位；相对原来的位置进行定位的偏移，仍然在标准文档流中，原来的位置会被保留

　　position:relative;

　　top,letf,right,bottom

绝对定位；不在标准文档流中，原来的位置不保留，相对于浏览器或者父级元素的定位

　　position:absolute;

　　top...

固定定位；直接写死在页面具体位置

　　position:fixed;

z-index；图层显示级别，默认最低0（opacity:0.5背景透明度）

CSS