首页  思维导图  详情



 



CSS

2023-03-22 20:28:14   0  举报





仅支持查看

AI智能生成

CSS流程图

CSS 前端开发网页设计

模板推荐

作者其他创作

大纲/内容

美化网页

字体

font-family:  字体

font-size:    字体大小

font-weight:  字体粗细

color:        字体颜色

文本

文本对齐的方式 text-align = center

首行缩进 text-indent : 2em;

行高 line-height

装饰 text-decoration:

文本图片水平对齐 vertical-align : middle

超链接伪类

hover

列表样式

list-style

背景样式

背景颜色

背景图片

background-repeat:

渐变

https://www.grabient.com/

...

盒子模型

边框 border

内边距 padding

外边距 margin

盒子模型尺寸计算

border + margin + padding + 内容元素

box-size

圆角边框

border-radius:

阴影

box-shadow:

定位

相对定位

position: relative;

绝对定位

position: absolute;

固定定位

position: fixed;

z-index

0~999

透明度

opacity: 0.5;

初识及入门

CSS概念

CSS在网页中的应用

CSS的发展史

CSS1.0

CSS2.0

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

CSS2.1

浮动，定位

CSS3.0

圆角，阴影，动画...... 浏览器兼容性~

CSS的优势

CSS基本语法

style标签

3种引入方式

行内样式

<h1 style="color: red">我是标题</h1>

内部样式

外部样式

链接式

导入式

子主题

CSS的选择器

基本选择器

标签

h1{       color: #FF0000;     }

#qinqiang{         color: #4059f1;       }

class

.qinqiang{       color: cornflowerblue;     }

高级选择器

层次选择器

后代选择器

body p{           background: #FF0000;         }

子选择器

body>p{   background: gold; }

相邻兄弟选择器

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

通用选择器

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

结构伪类选择器

/*选中p1 ：定位到父元素，选择当前的第一个元素         选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！ */

p:nth-child(1){             background: blue;         }

属性选择器

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

/*选中href中以pdf结尾的元素*/     a[href$=pdf]{         background: cyan;     }

浮动

网页布局

标准文档流

display

block

inline

inline-block

浮动 float

左浮动

右浮动

清除浮动

clear

left

right

both

none

解决父级边框塌陷的问题

空div

父元素高度

子主题

overflow

父类添加一个伪类：after

inline-block-float区别

 Collect

Get Started

CSS

 Collect

Get Started

CSS

 Collect

Get Started

Web前端的学习路线

 Collect

Get Started

CSS





0 条评论

下一页