CSS与HTML网页美化及布局技术详解-优快云博客

本文详细介绍了CSS用于HTML页面美化和布局的各种技术，包括选择器、字体属性、盒模型、定位、浮动、显示模式、CSS3新特性等。讲解了如何通过CSS创建响应式布局，实现圆角、阴影、渐变效果，并探讨了精灵图、字体图标、过渡效果等。此外，还提到了前端开发中的SEO优化和网页favicon图标设置。

CSS

美化HTML，使页面更简单，好看

css规则

两部分构成：选择器 {声名}

属性和属性值以“键值对”形式出现

属性：属性值

键值对间加分号

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语法规范</title>
        <style>
            /* 给谁改样式{改什么样式} */
            p {
                color: red;
                font-size: 12px;
            }
        </style>
    
</head>
<body>
    <p>有点意思</p>
</body>

规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pr2kjF1p-1644291648034)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220119232201535.png)]

选择器

基础选择器

标签选择器

标签名作为选择器

缺点：有多个相同标签时无法选中其中一个

类选择器

单独选中一个或某几个选择器

选择器自定义 . + 类名

被选择的标签后加 class=“类名”

<head>  
<title>语法规范</title>
        <style>
         .green {color: green;
        }
        </style>
    
</head>
<body>
<ul>    
    <li class="green">11</li>
    <li>22</li>
</ul>
</body>

多类名

一个标签对应多个类名

<标签 class=“类名1 类名2”>内容</标签>

类名用空格隔开

华仔

id选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6qdBLpJk-1644291648035)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120091507859.png)]

与类选择器去区别 id只能使用一次

通配符选择器

自动选中所有标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c5NGMFRr-1644291648036)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120092015788.png)]

字体属性font

字体系列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Mt9967p-1644291648037)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120094332755.png)]

默认显示第一个字体若浏览器不支持则显示下一个字体

（用单引号）

字体粗细

font-weight：数字（默认值一般400）100-900

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fjpJ4O9N-1644291648038)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120101602954.png)]

文字样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B0YLTNXy-1644291648038)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120101801652.png)]

复合属性

eg font：italic 700 16px/20px ‘Microsoft yahei’

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fPAtBhnN-1644291648039)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120110223895.png)]

文本属性

文本颜色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lm9DLOqM-1644291648040)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120110636073.png)]

对齐文本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g6tGtkSX-1644291648040)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120111553933.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k9AskRIt-1644291648041)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120111637767.png)]

装饰文本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MatOfgBi-1644291648042)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120111753694.png)]

重点掌握添加下划线和删除下划线

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cpIKCikb-1644291648043)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120112134556.png)]

文本缩进

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DC1t4Neo-1644291648044)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120112517154.png)]

行间距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w0LtVJYT-1644291648045)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120112905918.png)]

测量行间距：上一行文字底端到下一行文字底端

软件：FastStone Capture

CSS的引入方式

内部样式表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-laretP6H-1644291648045)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120113921500.png)]

==写在html文件内部，但单独放到head中

行内样式表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ky5LcDLy-1644291648046)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120114300352.png)]

外部样式表

样式单独写到css文件中，再引入html文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7HdWiSca-1644291648047)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120120726209.png)]

css中只有样式没有标签，不需要写style

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q7EhdQRz-1644291648047)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120120841978.png)]

chrome调试工具

F12打开

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rjWZuv4K-1644291648047)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120154258799.png)]

Emmet语法

生成html格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k7aKL9lc-1644291648048)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120154945245.png)]+tab=[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bsqhjTOh-1644291648048)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120155013262.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HRrJLkxA-1644291648048)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120155127102.png)]+tab=[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B1gshjDS-1644291648049)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120155202161.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZdMobEOw-1644291648049)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120155232360.png)]

生成css样式

简写第一个字母+tab

快速格式化代码

复合选择器

后代选择器

重要

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vN97MfLf-1644291648049)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121092107181.png)]

子元素选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9zQTRm6s-1644291648050)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121092323986.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hwnDpjUt-1644291648050)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121093552476.png)]

并集选择器

，表示和

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2IN7HSDO-1644291648050)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121095829632.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qveJinqg-1644291648051)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121095911838.png)]

链接伪类选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8NbRx20d-1644291648051)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121101357758.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ssHq5Z4V-1644291648051)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121101742143.png)]

：focus伪类选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-258HTWGM-1644291648052)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121104455869.png)]

元素显示模式

块元素

块元素一个占一行
行内元素一行可有多个

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xUO2mXW3-1644291648052)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121120919508.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7RpjgtBU-1644291648052)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121121105256.png)]

行内元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XU76wAtO-1644291648053)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121122018314.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zsu7rNd3-1644291648053)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121122202608.png)]

行内块元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3xyECX8M-1644291648053)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121141140193.png)]

显示模式转换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FP52LigL-1644291648054)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121142953054.png)]

snipaste

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UQHqZy77-1644291648054)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121143358868.png)]

单行文字垂直居中技巧

height=line-height

背景

背景颜色

background-color ：颜色

（一般默认值为transparent)

背景图片

background-image :none(默认无)

或

background-image : url(图片位置)

背景平铺

默认平铺 background-repeat ：repeat；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P27Z8Tsn-1644291648054)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121154837203.png)]

背景图片位置

重要

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jVsYMJYg-1644291648055)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121155527478.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EKXcENUz-1644291648055)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220121163858559.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tWt0XFpK-1644291648055)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220122120744142.png)]

背景图片固定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-olGlbN4f-1644291648056)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220122121125837.png)]

复合属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fqte02Sw-1644291648056)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220122122230164.png)]

背景颜色半透明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sMT5YsER-1644291648056)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220122122707177.png)]

r：red
g：green
b：blue
a：alpha透明度 0全透明-1不透明

三大特性

层叠性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kvcvJvKI-1644291648057)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220122163033123.png)]

继承性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MxehjtXC-1644291648057)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220122163011172.png)]

行高的继承

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gvhvowqg-1644291648058)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220123094131131.png)]

优先级

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jalRhpC7-1644291648058)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220123104848365.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gvrNh4xe-1644291648059)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220123105450603.png)]

权重继承

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9WXcGlI6-1644291648059)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220123105807132.png)]

盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xAtoJUNR-1644291648060)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220123113025086.png)]

盒子模型组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A7efRVJT-1644291648060)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220123113633377.png)]

边框border

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GQWcv1xq-1644291648060)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220123113741657.png)]

border-width参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BpD9YHYn-1644291648061)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220123114006446.png)]

重点记实线框solid 虚线框dashed 点线边框ditted

复合写法/边框分解

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xvfMMJLr-1644291648061)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220123114646593.png)]

表格的细线边框

border-collapse:collapse 相邻边框合并

内边距padding

padding-top/left…:20px;

padding简写

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z38Emwga-1644291648062)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220125121704897.png)]

注意

边框和内边距都会影响盒子实际大小

不给宽度则宽度不会变默认浏览器宽度

本身没给盒子赋值则内部块不会超过盒子大小不需要赋值赋值反而可能超过

外边距margin

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fr9pAxWQ-1644291648062)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220125161740460.png)]

水平居中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sek5Obgv-1644291648062)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220125162559302.png)]

外边距塌陷

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-49UXaYUP-1644291648063)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220125163144952.png)]

清除内外边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3gHHrveV-1644291648063)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220125165717108.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iUSUZ4OQ-1644291648063)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220125165926440.png)]

PS

基本操作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rl7fuOTR-1644291648064)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220125171005321.png)]

图片格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HtDRJdhY-1644291648064)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127120026355.png)]

图层切图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FIKN1HlN-1644291648064)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127121409838.png)]

分开合并的图层 ctrl+z

切片切图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KsXTJ3U8-1644291648065)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127122147804.png)]

图层最底下背景取消后切片得到透明背景

CSS3

圆角边框

重点

border-radius: 10px (为圆半径，越大弧线越长)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ot2BR6yF-1644291648065)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220125231318134.png)]

此时为圆形

半径设为高度的一半即圆角矩形（上下直线左右半圆）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FqYDCmR4-1644291648065)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220125231955673.png)]

盒子阴影

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7v8vIOKJ-1644291648066)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220125232145806.png)]

blur影子虚实

color常用rgba（0，0，0，.3）透明黑色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-afcp7aub-1644291648066)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220125232659921.png)]

文字阴影

text-shadow

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M10662g3-1644291648066)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220125233038361.png)]

浮动

传统页面布局标准方式

标准流

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yZL7mkoC-1644291648066)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220126105031216.png)]

定义

横向排列用浮动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ook1694-1644291648067)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220126105734534.png)]

浮动特性

重难点

脱标

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Arf9MC7-1644291648067)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220126110231855.png)]
浮动元素一行对齐

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a4d9VQRq-1644291648067)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220126110956918.png)]
浮动元素具有行内块特性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C4My7Fja-1644291648068)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220126120913135.png)]
浮动元素经常搭配标准流的父元素搭配使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vGe6BQAC-1644291648068)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220126121327366.png)]

注意点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZlIS0Yd6-1644291648068)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220126151638439.png)]

清除浮动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8FXwqsaO-1644291648069)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220126175350459.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0tj344b7-1644291648069)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220126174721485.png)]

额外标签法

clear: both;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SUEOxR65-1644291648069)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131112752968.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EyN6V514-1644291648070)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220126175203035.png)]

父级添加overflow

overflow: hidden;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V8BnTHch-1644291648070)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220126175648425.png)]

伪元素法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xzcqIO4r-1644291648070)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220126180431437.png)]

双伪元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aPyemodN-1644291648071)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220126182740070.png)]

.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  }

学成在线案例

准备工作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1gLKBYow-1644291648071)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127192623509.png)]

css书写顺序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qSpTmacg-1644291648071)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127193027289.png)]

布局思路

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yxvDHTuG-1644291648072)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127195943594.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RCbLDvuz-1644291648072)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127202105359.png)]

定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YHrnhCYI-1644291648072)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127133401700.png)]

定位模式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SMnNubrT-1644291648073)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127133422841.png)]

静态定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uAy2GviK-1644291648073)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127133958197.png)]

相对定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oe6KnfRd-1644291648073)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127134616316.png)]

绝对定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CiW7OG2e-1644291648074)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127141643705.png)]

子绝夫相

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BJnPPrb8-1644291648075)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127142655868.png)]

边偏移

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VJjCcnQf-1644291648075)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127133725369.png)]

固定定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FOQ8ciTj-1644291648076)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127144301836.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5mU596Sk-1644291648076)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127150237480.png)]

粘性定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cC5js9my-1644291648076)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127150947426.png)]

eg： top：10px；

滚动到距离浏览器顶端10px时开始固定

定位叠放次序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8qGa6IN9-1644291648077)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220127152039623.png)]

绝对定位盒子水平居中

加了绝对定位或固定定位不能用margin：auto（失效了）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Avtvyo2-1644291648077)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129161510887.png)]

定位特性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7kAqh4no-1644291648077)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129163237487.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YmSdWFcJ-1644291648078)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129163628789.png)]

标准流浮动定位区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UtBxe2ZL-1644291648078)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129172648028.png)]

元素显示与隐藏

display

重点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5AMJ0vQR-1644291648078)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129173117700.png)]

隐藏后不占空间

visibility

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KKl4RqQG-1644291648080)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129173321105.png)]

隐藏后位置还在

overflow溢出

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FGD4CVPx-1644291648080)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129173735890.png)]

CSS高级

精灵图

优点

将多张图片合并到一张图片上向服务器请求一次即可得到多个图片减少负担

精灵图的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a40JOqJc-1644291648081)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129210629248.png)]

设定一个方框覆盖在精灵图上，挪动精灵图使想要的背景刚好从方框中露出，得到想要的背景

一般针对小背景图片使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h5en1yz6-1644291648081)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129211123306.png)]

字体图标

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bBstAkiM-1644291648081)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129213215103.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OGMsD3x2-1644291648082)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129213843280.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L1ExwfJ3-1644291648082)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129214437713.png)]

字体文件放在html的根目录里（和html放在一起）
放入代码

  /* 字体声明 */
/* 放在style中 */
     @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?p4ssmb');
  src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
    url('fonts/icomoon.woff?p4ssmb') format('woff'),
    url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

demo.html中找如下图小框复制到span中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t5tc83zX-1644291648082)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129234713574.png)]

引入字体

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q2zlVEiA-1644291648083)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129234922245.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8JaBn8zI-1644291648083)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220129235318311.png)]

CSS三角形做法

width: 0;
height: 0;
//为了照顾兼容性添加下两行
line-height： 0；
font-size： 0；
border: 想要的大小 solid transparent（透明）；
border-top(想要的三角形顶角方向的对立反向)-color:  ;

原理：

盒子大小为0，边框为想要大小，透明色给想要的三角设定颜色

用户界面

鼠标样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-44C6AOQX-1644291648083)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130112133379.png)]

轮廓线outline

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zd1ks6pe-1644291648084)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130112609097.png)]

防止拖拽文本域

给文本域textarea添加resize： none；样式

文本域尽量代码放到一行上，避免空格出现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b12MYj82-1644291648084)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130113044111.png)]

行内块与文字居中显示

给行内块添加

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UADa3bni-1644291648084)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130114021315.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lq44tNZI-1644291648085)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130113437193.png)]

解决图片底部默认空白的问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TZ8GFk2c-1644291648085)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130144952470.png)]

单行文本溢出显示省略号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-381Hp8I9-1644291648085)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130145330965.png)]

多行文本溢出显示省略号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lb9ZD1SZ-1644291648086)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130145614305.png)]

margin负值运用

让每个盒子往左移动1px压住上一个盒子的右边框，使边框粗细保持一致

经过盒子时让该盒子变颜色（上一个问题补充

否则右侧边框不变色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-THmiVD0r-1644291648086)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130150905258.png)]

文字围绕图片显示

一个大盒子中放一个小盒子和文字，小盒子中放图片，浮动后文字即围绕图片显示

行内块全部居中对齐

给父盒子加text-align：center；

html5新增标签

语义化标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3KvNWby9-1644291648086)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130160326287.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jBVtIfVn-1644291648086)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130160641646.png)]

多媒体标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nvYqEFXc-1644291648087)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130160836668.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qXghrndN-1644291648087)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130161059874.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fQQHrY6a-1644291648087)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130161354446.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H5rx9iVr-1644291648088)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130162410294.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3RREYpzJ-1644291648088)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130162720418.png)]

input表单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FTEyJUZI-1644291648088)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130162844084.png)]

表单属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wptS6vIH-1644291648089)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130163643288.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-knSLmfhe-1644291648089)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220130163859110.png)]

需放在form中

css3新属性

属性选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tOOgLmT5-1644291648089)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131095319635.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RDI43cvd-1644291648090)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131094412156.png)]

结构伪类选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W77Pzq54-1644291648090)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131100610106.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UadrTDPH-1644291648091)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131100910636.png)]

只能是n，不能是其他字母

n可以是公式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CYtIGwol-1644291648093)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131100956146.png)]

区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WYGEc8tw-1644291648093)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131101843160.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2UxAS6Sm-1644291648094)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131101759582.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LXqVHY60-1644291648095)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131101926029.png)]

伪元素选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oL76Q2Pa-1644291648095)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131105237905.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CxIzIu5D-1644291648095)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131112039790.png)]

字体图标的两种使用方法

border-box

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-URtia9QO-1644291648096)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131130847920.png)]

滤镜filter

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sl1hjrPp-1644291648096)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131132315396.png)]

clac函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l4LF5cUc-1644291648097)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131133218288.png)]

可以实现子盒子永远比父盒子少80px的功能

css过渡

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FtBuX1Mv-1644291648097)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131133528995.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u9v6wgKx-1644291648098)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220131134213437.png)]

品优购项目

网站favicon图标

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-brOneZjD-1644291648098)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220201210016770.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GFA5yI6j-1644291648098)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220201210956868.png)]

三、在html中引入favicon图片

在head中引入代码

<link rel="shortcut icon" href=" /favicon.ico" />

TDK三大标签和SEO优化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gP4uiqIC-1644291648099)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220201212513310.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bxjEwzEi-1644291648099)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220201212655983.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LZUhOS8H-1644291648099)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220202172546375.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VN53K1sy-1644291648100)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220202173042245.png)]

常用模块命名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MhspZ3Tv-1644291648100)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220202175749125.png)]

SEO logo优化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0UNKzARC-1644291648101)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220202222854846.png)]

免费申请域名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bSuqE0zl-1644291648101)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220204232806057.png)]
转存中…(img-2UxAS6Sm-1644291648094)]

[外链图片转存中…(img-LXqVHY60-1644291648095)]

伪元素选择器

[外链图片转存中…(img-oL76Q2Pa-1644291648095)]

[外链图片转存中…(img-CxIzIu5D-1644291648095)]

字体图标的两种使用方法

border-box

[外链图片转存中…(img-URtia9QO-1644291648096)]

滤镜filter

[外链图片转存中…(img-Sl1hjrPp-1644291648096)]

clac函数

[外链图片转存中…(img-l4LF5cUc-1644291648097)]

可以实现子盒子永远比父盒子少80px的功能

css过渡

[外链图片转存中…(img-FtBuX1Mv-1644291648097)]

[外链图片转存中…(img-u9v6wgKx-1644291648098)]

品优购项目

网站favicon图标

[外链图片转存中…(img-brOneZjD-1644291648098)]

[外链图片转存中…(img-GFA5yI6j-1644291648098)]

三、在html中引入favicon图片

在head中引入代码

<link rel="shortcut icon" href=" /favicon.ico" />

TDK三大标签和SEO优化

[外链图片转存中…(img-gP4uiqIC-1644291648099)]

[外链图片转存中…(img-bxjEwzEi-1644291648099)]

[外链图片转存中…(img-LZUhOS8H-1644291648099)]

[外链图片转存中…(img-VN53K1sy-1644291648100)]

常用模块命名

[外链图片转存中…(img-MhspZ3Tv-1644291648100)]

SEO logo优化

[外链图片转存中…(img-0UNKzARC-1644291648101)]

免费申请域名

[外链图片转存中…(img-bSuqE0zl-1644291648101)]

CSS笔记

CSS

css规则

规范

选择器

基础选择器

标签选择器

类选择器

多类名

id选择器

通配符选择器

字体属性font

字体系列

字体大小

字体粗细

文字样式

复合属性

文本属性

文本颜色

对齐文本

装饰文本

文本缩进

行间距

CSS的引入方式

内部样式表

行内样式表

外部样式表

chrome调试工具

Emmet语法

生成html格式

生成css样式

快速格式化代码

复合选择器

后代选择器

子元素选择器

并集选择器

链接伪类选择器

：focus伪类选择器

元素显示模式

块元素

行内元素

行内块元素

显示模式转换

snipaste

单行文字垂直居中技巧

背景

背景颜色

背景图片

背景平铺

背景图片位置

背景图片固定

复合属性

背景颜色半透明

三大特性

层叠性

继承性

行高的继承

优先级

权重继承

盒子模型

盒子模型组成

边框border

border-width参数

复合写法/边框分解

表格的细线边框

内边距padding

padding简写

外边距margin

水平居中

外边距塌陷

清除内外边距

PS

基本操作

图片格式

图层切图

切片切图

CSS3

圆角边框

盒子阴影

文字阴影

标准流浮动定位区别