一、初识CSS 1.1 CSS是什么 CSS：Cascading Style Sheet 层叠级联样式表

    CSS作用：表现（美化网页）

            字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动……

    CSS的优势：

            1、内容和表现分离

            2、网页结构表现统一，可以实现服用

            3、样式十分的丰富

            4、建议使用独立于html的css文件

            5、利用SEO，容易被搜索引擎收录！

1.2 CSS发展史 CSS1.0

    CSS2.0    DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

    CSS2.1    浮动，定位

    CSS3.0    圆角，阴影，动画……    浏览器兼容性

1.3 CSS的三种导入方式 1.3.1 内部样式：在中用可以编写css的代码，每一个声明最好使用分号结尾，语法如下：

选择器{ 声明1; 声明2; 声明3; }

Title

<!--规范,<style> 可以编写css的代码,每一个声明 最好使用分号结尾
语法:
    选择器{
        声明1;
        声明2;
        声明3;
    }
-->
<style>
    h1{
        color: red;
    }
</style>

我是标题

1.3.2 外部样式（推荐使用）：两种写法：

    ①链接式（推荐）：在html文件的<head>中，用 <link> 引用css文件

    <link rel="stylesheet" href="css/style.css">

 注：css文件夹与此 html 在同一个文件夹里

    index.html ：

Title

<!--引用css文件-->
<link rel="stylesheet" href="css/style.css">

我是标题

    css/style.css ：

h1 { color:red; } ②导入式：在html中，在的中使用 @import @import url("css/style.css");

    强烈推荐link方式，慎用import，区别如下：

    a.加载顺序差别：当页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式，网速慢的时候明显。

    b.语法结构不同：@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，只能放入html中使用，可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

    c.兼容性差别：@import是CSS2.1才有的语法，只能在IE5+才能识别，link作为html元素，不存在兼容性问题

1.3.3 行内样式在标签元素中,编写一个style属性,编写样式即可

    <h2 style="color: aqua">小标题</h2>

    注：不同样式，可以用 ；隔开

三种样式的优先级：

    （就近原则）行内样式 > 内部样式 > 外部样式

二、CSS选择器⭐ 选择器的作用：用于选择页面上某一个或者某一类元素。

2.1 三种基本选择器 2.1.1 标签选择器选择到页面上所有的这个标签的元素，格式：

    标签 { }       eg:     h1 { }

2.1.2 类选择器选择所有class属性一致的标签，跨标签，格式：

    .class的名称 { }

    好处：可以跨标签归类，可以复用

2.1.3 ID选择器选择该id对应的标签，格式：

    #id的名称 {  }

    特点：id 必须保证全局唯一！

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

三种基本选择器的代码如下：

三种基本选择器的使用

<style>
    /* 1.标签选择器：会选择到页面上所有的这个标签的元素 */
    h1{
        color: peachpuff;
    }

    /* 2.类选择器的格式
       .class的名称{}
       好处:可以跨标签归类,可以复用
    */
    .study1{
        color:goldenrod;
    }

    /* 3.id选择器 : id 必须保证全局唯一!
       #id名称{}
       优先级：id选择器 > class选择器 > 标签选择器
    */
    #study{
        color:deepskyblue;
    }

</style>

标题1

标题2

标题3

标题4

标题5

页面效果截图如下：

2.2 层次选择器本节所用代码body部分：

    效果截图：

2.2.1 后代选择器（空格）在祖先元素 (parent) 的所有后代中，查询指定元素 (p)，格式：

parent p{} 代码样例：

body p{ background: gold; }

    效果截图：

2.2.2 子选择器（>）在父元素 (parent) 的所有第一级子元素 (p) 中进行查找，格式：

parent>p{} 代码样例：

body>p{ background: gold; } 效果截图：

2.2.3 相邻兄弟选择器（+）选中兄弟元素 (brother) 后面的某一个相邻兄弟元素 p，格式：

brother+p{} 在本节开始的body部分，p1、p7均设有class="study"，以便学习兄弟选择器，style部分代码如下：

.study+p{ background: gold; }

    效果截图：

2.2.4 通用兄弟选择器 (~) 选中兄弟元素（brother）后面的所有的兄弟元素 p，格式：

brother~p{} 代码样例：

.study~p{ background: gold; }

    效果截图：

2.3 结构伪类选择器（:）伪类：用于定义元素的特殊状态（。用" : " ）

    例如，它可以用于：

设置鼠标悬停在元素上时的样式（hover）为已访问和未访问链接设置不同的样式设置元素获得焦点时的样式代码格式：

selector:pseudo-class { property: value; } 代码样例：css部分：

/*1. ul 的第一个子元素 */ ul li:first-child{ background: red; }

/2. ul 的最后一个子元素/ ul li:last-child{ background: yellow; }

/*3. 选中p1 : 定位到父元素，选择其子元素的二个元素选择当前p元素的父元素，再选该父元素的第一个子元素，并且是当前元素才生效按照子元素的顺序找 */ p:nth-child(2){ background: pink; }

/*4. 选中p2：定位到父元素下的 p元素的第二个按照类型的顺序找 */ p:nth-of-type(2){ background: orange; }

    效果截图：

2.4 属性选择器（常用）⭐ 选择具有特定属性的HTML元素样式，id与class 的结合

= 绝对等于

*= 包含这个元素即可 eg: [title~=flower] --> red flower2

~~= 独立包含这个元素 eg: [title~~=flower] --> red flower

|= 只包含这个元素 eg: [title|=flower] --> flower

^= 以这个元素开头

$= 以这个元素结尾

    代码示例：

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

/* id=first 的a元素*/ a[id=first]{ background: orange; }

/* class中有hello的元素 / a[class=hello]{ background: pink; }

/* herf中以http开头的元素 */ a[herf^=http]{ background: skyblue; }

/* herf中以com 结尾的元素 */ a[herf$=com]{ background: lightgreen; }

三、美化网页（文字，阴影，超链接，列表） 3.1 概述 CSS的作用：

有效地传递页面信息美化页面，页面漂亮，才能吸引用户凸显页面的主题提高用户体验 span标签：用来组合文档中的行内元素，重点要突出的字，使用span套起来

Title

<style>
    #title1{
        font-size: 50px;
    }
</style>

欢迎学习Java

3.2 字体样式 /* 字体样式 font-family：字体 font-size：字体大小 font-weight：字体粗细 color：字体颜色 */ 代码示例：

#title1{ font-size: 50px; }

body{ font-family: 楷体,Arial; color: orange; } h1 { font-size: 20px; font-weight: bolder; } 3.3 文本样式颜色： ①单词 --> color:red ②RGB(0~F) --> color:#000000 ③RGBA(加透明度)--> color:rgba(0,225,225,0.5) 文本对齐的方式⭐： text-align:center 可设置居中、左、右首行缩进⭐： text-indent:2em 单位：em(字)、px(像素) 行高⭐： line-height:30px 和块的高度一致就可以上下居中（line-height=height）装饰：text-decoration underline | line-through | overline 下划线文本图片对齐: 参照物 a b --> img,span{ vertical-align:middle; }
3.4 文本阴影（text-shadow） /*基础的文本阴影效果 text-shadow: 水平偏移，垂直偏移，阴影半径，阴影颜色 */ #price{ text-shadow: 5px 5px 5px #FF0000; } 第一个值（必选）表示水平阴影的位置，允许负值

    第二个值（必选） 表示 垂直阴影的位置，允许负值

    第三个值（可选） 表示 模糊的距离

    第四个值（可选） 表示 阴影的颜色

    效果：

3.5 超链接伪类(a:hover) 在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

    /*未访问的链接的颜色*/
    a:link{
        color: #0000FF;
    }
    /*链接访问后的颜色*/
    a:visited{
        color: mediumpurple;
    }
    /*鼠标悬浮的状态*/
    a:hover{
        color: orange;
    }
    /*鼠标点击未释放时的状态*/
    a:active{
        color: lightgreen;
    }

    注意：

    a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

    a:active 必须被置于 a:hover 之后，才是有效的。

3.6 列表 css 列表属性

属性描述 list-style 把所有列表的属性设置与一个声明中 list-style-image 把图片设置为列表项标志 list-style-position 设置列表中列表标志的位置 list-style-type 设置列表项标志的类型

    举例：

ul li{ height: 30px; /行高/ /list-style-type 标记类型 none 去掉原点 circle 空心圆 decimal 数字 square 正方形/ list-style-type: square;

/*list-style-position 标记位置
  inside:列表项目标记放在文本以内
  outside:默认标记位于文本左侧*/
list-style-position: outside;

/* list-style-image用图片替换标记 */
list-style-image:url("../image1.jpg") ;

text-indent: 1em;

}

3.7 背景 3.7.1 背景颜色（background-color） body { background-color:#11aaaa; } 颜色值的定义三种方式： #FF0000 rgb(255,255,255) red

3.7.2 背景图片（background-image）默认情况下，背景图片以平铺重复显示

body{ background-image:url("../image1.jpg"); } 1、平铺设置（background-repeat）

body{ background-image:url("../image1.jpg"); background-repeat: repeat-x;/水平方向/ } repeat-x：只水平方向平铺 repeat-y：只垂直方向平铺 no-repeat：不重复

2、设置图片位置（background-position）

body{ background-image:url("../image1.jpg"); background-repeat: no-repeat; background-position: 200px top;/中间用空格/ } 第一个值是水平方向，可以写像素值表示离左边有多远，也可以用 left right center来表示

    第二个值是垂直方向，可以写像素值表示离上边有多远，也可以用 top  bottom  center表示

    注：中间用 空格 隔开，如果仅指定一个，其他值默认center

    还有一种写法是用百分比(x%  y%)表示， 左上角是0% 0% 右下角是 100% 100%，默认值是0% 0%  若仅指定一个，其他值默认为50%

3、联合设置背景（background）

/* 将背景设置在一起颜色图片图片位置平铺方式*/ background: red url("../image1.jpg") 270px 10px no-repeat; 用background，所用值中间用空格隔开即可

3.8 渐变（Gradients）一个比较好的设置渐变色的网站：Grabient

3.8.1线性渐变语法：

    direction: 设置角度；

    color: 颜色，可以设置多个渐变颜色，方式同文字的设置方法，有三种：

            ①单词 --> red    ②RGB(0~F) -->#000000       

            ③RGBA(加透明度)--> rgba(0,225,225,0.5)

1、角度设置

   ①预定方向

    默认是从上到下，不用设置direction。从红色过渡到黄色 ，如下所示：

    也可以通过单词设置direction，来设定不同的角度，如

to right 从左到右， to bottom 从上到下， to top 从下到上……

to bottom right 从左上到右下 ……

      例如：从右上到左下，从红色过度到黄色 ，示例：

   ② 自定义方向

    

     如图所示，0deg 表示从下到上， 90deg 表示从左到右，-90deg 表示从右到左……

     例如：从右下到左上（-45deg） 从透明到粉色再到黄色：

2、设置颜色所占比例

    在颜色后加上百分比，设置改颜色所占的比重，如下所示：

3.8.2 径向渐变语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

    shape：形状，circle（圆形）、ellipse（椭圆，默认）

    size：  渐变的大小，closest-side    farthest-side    closest-corner   farthest-corner

    ①渐变的大小（size）

            closest-side:半径为从圆心到最近边

            closest-corner:半径为从圆心到最近角

            farthest-side:半径为从圆心到最远边

            farthest-side:半径为从圆心到最远角

    如下，圆心为（30%，60%）的地方，如果用colset-color时，半径就是，圆心到最近的角（左下角）的距离：

    

background-image: radial-gradient( closest-corner at 30% 60% ,red 5%, yellow 15%, green 60%);

四、盒子模型⭐ 4.1 什么是盒子模型所有html元素都可以看作一个盒子，封装周围的HTML元素，

     包括 边距、边框、填充和实际内容

       

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

4.2 边框（border）可以设置border 的粗细（width）、样式（style）和颜色(color)

    可以合并设置

/border:粗细、样式、颜色/ #box{ width: 300px; /设置宽度/ border: 1px solid red ; /设置边框/ } 4.3 内、外边距（padding、margin） padding、maigin的属性值的个数可以是

4个值（上、右、下、左） 3个值（上、左右、下） 2个值（上下、左右） 1个值（4个边距统一设置）可能的值的：

auto：依赖于浏览器，自动使用固定值：例如100px，单位可以是 px pt em等使用百分比：如30% 使用技巧：巧用magin，使盒子左右居中：

    margin:0 auto
    注：margin 可以使用负值，重叠内容

    也可以进行单独边的设置，如下图：

#box{ width: 300px; /宽度/ border: 1px solid red ; /边框/ margin: 100px auto; /外边距，左右居中/ padding-left:20px; } 盒子的计算方式：你这个元素到底多大？

            margin+border+padding+内容宽度

4.4 圆角边框（border-radius） border-radius 值的个数可以为

4个：左上右上右下左下（顺时针） 3个：左上右上和左下右下 2个：左上和右下右上和左下 1个：适用于所有四个角代码：

div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    /*圆角边框: 左上 右上 右下 左下（顺时针）*/
    border-radius: 50px 20px 10px 0;
}
    如图：

    如果要设置成圆圈，则让圆角=半径

    注：border-radius也可以用来设置图片

4.5 盒子阴影（box-shaddow） div{ width: 100px; height: 100px; border: 10px solid red; /圆角边框: 左上右上右下左下（顺时针）/ /若要设置成圆圈：圆角=半径/ border-radius: 100px ; /设置阴影/ box-shadow: 10px 10px 10px yellow ; } 如图：

五、浮动（float） 5.1标准文档流 1、标准文档流定义

    文档流是指元素排版布局郭恒忠，默认自动从左往右、        从上往下的流式排列方式

            eg：高矮不齐时候，底边对齐  /  一行写不下时候，自动换行

2、等级分类

    块级元素：独占一行，不能与其他元素并列，能设置宽高

    h1~h6   p    div  列表 ……

    行内元素：不独占一行，能与其他元素并排，不能设置宽高，默认宽度为文字宽度

    span    a     img    strong……

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

5.2 display display属性规定元素应该生成的框的类型，也是一种实现行内元素排列的方式，但是我们更多使用float

    常用属性值：

    none：此元素不会被显示

    block：显示为块元素，独占一行

    inline：行内元素，可以内联，即可以在一行，元素前后没有换行符（默认）

    inline-block：行内块元素，也可以内联，(能保证所有块元素大小相同，固定大小)

    用途：例如ul  li元素，本身是block  但是 可以用下列代码，将各个li 设置为一行，用于上侧导航栏。

    li{
        display: inline-block;
    }
    如图：

5.3 float 浮动（float），会使元素向左或向右移动，其周围的元素也会重新排列

1、左右浮动

    一个浮动的元素，会尽量向左或向右移动，直到碰到 框 或者另一个浮动元素的边框为止

    css代码:

img { float:right; } html代码如下：

5.4 父级边框塌陷问题 5.4.1 clear 清除浮动指定元素的某侧不允许浮动，属性值：

    right：右侧不允许有浮动元素

    left： 左侧不允许有浮动元素

    both：两侧都不允许有浮动元素

    none：允许浮动元素出现在两侧，默认值

    inherit：从父元素继承clear属性的值

    css 代码如下：

    div{
        margin:10px;
        padding: 5px;
    }
    #father{
        border: 3px solid red;
    }
    .layer01{
        border: 1px blue dashed;
        display: inline-block;
        float: left;
    }
    .layer02{
        border: 1px pink dashed;
        display: inline-block;
        float: left;

    }
    .layer03{
        border: 1px orange dashed;
        display: inline-block;
        float: right;
    }
    .layer04{
        border: 1px greenyellow dashed;
        display: inline-block;
        float: right;
        clear: both;
    }

    html代码如下：

浮动演示，让图片一直浮动在右侧，绕开文本

    <div class="layer01"><img  src="image/image1.jpg" width="100" height="100" /></div>
    <div class="layer02"><img src="image/image1.jpg" width="150" height="150" /></div>
    这里有很多字。这里有很多字。这里有很多字。这里有很多字。
    这里有很多字。这里有很多字。这里有很多字。这里有很多字。
    这里有很多字。这里有很多字。这里有很多字。这里有很多字。
    这里有很多字。这里有很多字。这里有很多字。这里有很多字。
    这里有很多字。这里有很多字。这里有很多字。这里有很多字。
    这里有很多字。这里有很多字。这里有很多字。这里有很多字。
    这里有很多字。这里有很多字。这里有很多字。这里有很多字。
    这里有很多字。这里有很多字。这里有很多字。这里有很多字。
    <div class="layer03"><img  src="image/image1.jpg" width="200" height="200" /></div>
    这里有很多字。这里有很多字。这里有很多字。这里有很多字。
    这里有很多字。这里有很多字。这里有很多字。这里有很多字。
    这里有很多字。这里有很多字。这里有很多字。这里有很多字。
    这里有很多字。这里有很多字。这里有很多字。这里有很多字。
    这里有很多字。这里有很多字。这里有很多字。这里有很多字。
    <div class="layer04">
        浮动的盒子可以左右浮动，直到碰到边缘为止
    </div>

    效果截图：



    如图所示，例如 layer04  是向右浮动，但是右侧有layer03时候，会自动换到下一行，

    并且，很明显，用过float元素后，父类元素出现了塌陷。

    .clear{
        clear: both;
        margin:0;
        padding: 0;
    }

5.4.2 解决方案 1、增加父级元素的高度（不推荐）

       把父类元素设的足够高，不推荐使用

 2、浮动元素后增加一个空的div，清除浮动

        在父类元素内部的最后，即layer04之后再加入一个空的div，然后清除该div左右的浮动即可。

        html 增加的代码如下：

    <div class="clear">   </div>
        css增加的代码如下：

    .clear{
       clear: both;
        margin:0;
        padding: 0;
    }
       效果如下：



3、用overflow去解决

    在父级元素中增加一个 overflow: hidden

    #father{
        border: 3px solid red;
        overflow: hidden;
    }
    overflow  经常用于列表显示不完全的时候的滑轮，属性选scroll

4、父类添加一个伪类 :after（推荐）

    目前比较认可的一种方式，通过设置父类的 after  引入一个空内容，并且清除左右浮动，块类型设置为block即可。

    #father:after{
        content:'';
        display: block;
        clear: both;
    }
小结（常考）：⭐

    方法1  设置父元素的高度

            简单，但是元素有了固定的高度就会被限制

    方法2   浮动元素后边增加一个空div

            简单，但是代码中应尽量避免空div

    方法3   overflow

            简单，但是下拉的场景应避免使用

    方法4  父元素添加一个伪类 :after（推荐）

            写法稍微复杂一点点，但是没有副作用

5.5 对比 display 方向不可以控制

    float         浮动起来的话会脱离标准文档流，所以要解决父级边框他先的问题

六、定位 6.1 相对定位（position:relative）相对于自己原来的位置，进行指定的偏移，相对定位，它仍然在标准文档流中，原来的位置会被保留

   top：-20px    负数表示朝着指定的方向，即向上 20px

   bottom: 20px    整数表示远离指定的方向，这里也是向上20px

   left: -30px      同理，表示向左30px

    right: -20px   同理，表示向右30px

注：因为原来的位置保留，所以会产生父类塌陷的情况

    初始效果图：

    

     加了position之后，代码如下：

    #father{
        border: 1px red solid;
        margin: 10px;
        padding: 10px;
    }
    #first{
        margin: 10px;
        background-color: orange;
        position: relative;
        top:-20px /*向上👆移动20px*/
    }
    #second{
        margin: 10px;
        background-color: pink;
        position: relative;
        left: -20px;/*向左👈移动20px*/
    }
    #third{
        margin: 10px;
        background-color: lightgreen;
        position: relative;
        bottom: 10px;/*远离底部10px，即向上👆移动10px*/
    }

      如图所示：

6.2 绝对定位（position:absolute）定位：基于XXX定位，上下左右

    1、假设父级元素存在定位，我们通常相对于父级元素定位

    2、若没有父元素定位，则相对于初始状态下的浏览器边界定位，若滑轮滚动，位置还会变，若调整浏览器大小，位置不变

    3、在父级元素范围内移动

    相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不再标准文档流中，原来的位置不会被保留

    代码同6.3 中一起给出

CSS | 字节青训营

我是标题

我是标题

标题1

标题2

标题3

标题4

标题5