首页  思维导图  详情



 



CSS

2021-10-28 15:02:02   3  举报





CSS使用脉络，请收藏，持续更新

互联网

CSS

计算机

HTML

CSS

HTML5

VUE

网站开发

模板推荐

作者其他创作

大纲/内容

概念与基础

显示模式

行内元素

一行显示多个

不能设置宽度和高度

默认的大小是内容的大小

span a u b i strong

文本级元素

块级元素

一行放一个标签

霸道

可以设置宽度和高度

默认大小浏览器的宽度或者父亲的宽度 100%

div p ul ol dl table ...

容器级元素

行内块元素

一行可以放多个

可以设置宽度和高度

默认的大小是内容的大小

img input td

转换

display：block

转换为块级元素

display：inline

转换为行内元素

display：inline-block

转换为行内块元素

三大特性

层叠性

如果样式冲突，我们采取就近原则

继承性

子级不指定，有一些样式会继承父亲的样式

文字类的样式 text- font- line- 颜色等

优先级

不同选择器级别执行不一样

通配符选择器或者继承

权重 0

标签选择器

权重1

类选择器伪类

权重 10

id选择器

权重100

行内样式表

权重 1000

!important

权重最高的

权重会叠加

.nav ul li

权重 12

选择器

基础选择器

标签/元素选择器

选择某类型所有标签

类选择器

选择一个或者多个标签

用点来声明 class 来调用

可以重复使用很多很多次

id选择器

使用方法和类相同

只能使用一次唯一的

通配符选择器

* 所有的选择所有的标签

特殊情况使用

复合选择器

后代选择器

.nav li

选择所有的子孙后代

子代选择器

.nav&gt;li

选择亲儿子第一级别的儿子

并集选择器

.nav, .footer

如果偶遇相同的样式集体声明逗号隔开

交集选择器

p.nav

这个是p标签而且他的类名一定是nav

链接伪类选择器

a 和 a：hover

a 浏览器自带样式如果我们给a指定样式，就需要单独给a 从新给定样式

文字属性

字体

font-size

别忘了跟单位

font-style

跟斜体有关系 em i

font-weight

字体加粗 strong b h

font-family

综合写法

font: 斜体加粗字号/行高字体;

综合写法字号和字体一定不能省略

文本

color

十六进制的颜色必须 # 开头

line-height

行高

text-align

让盒子里面文本水平居中对齐

text-indent

首行缩进

text-indent:2em; 首行缩进2个字

text-decroation

文本的修饰

none

取消下划线

underline

添加下划线

vertical-align与垂直居中

vertical-align原理

div行高默认50px

文字行高默认16px

div是html中css排版元素， 文字是html骨架元素，两个体系

背景属性

参考资料

不可思议的混合模式 background-blend-mode

背景颜色

background-color

背景图片

background-image

背景位置

background-position

背景平铺

background-repeat

背景固定

background-attachment

宽度高度

css3自适应布局单位vw,vh详解

SASS

入门与工具

过时实现

Ruby

Ruby安装

基于Ruby，先安装Ruby，再安装Sass

MacOS

brew install ruby

gem install sass

升级到最新版本

bash

echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.bash_profile

zsh

echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zsh_rc

验证

ruby -v

Ruby库的安装

MacOS

Gem

换源

主流实现

Dart Sass

安装

Github下载

教程

阮一峰

官方文档

Webstorm

自动编译

MacOS

Preferences->Tools->File Watchers

快速上手

编写

文件input.scss

$blue:blue; .blue {     color:  $blue; }

编译

sass input.scss output.css

嵌入

其他

sass --watch

sass --help

后缀名

sass

使用大括号和分号

scss

使用大括号和分号

基础语法

变量

符号

老版本用!表示变量，新版本用$

CSS里面有个import也是使用!，为了防止冲突，然后还有美观问题？

赋值

任何CSS可以使用的赋值，都可以用于SASS

作用域

{}内定义，那么只能作用于{}内

命名

使用中划线命名，命名全名且有意义

当然下划线也可以，在Sass中变量，函数，混合器相互兼容，但CSS部分不兼容中划线和下划线

嵌套CSS

用于为容器及其子元素编写样式

导入

编译文件夹内全部文件

sass --update input_dir:output_dir

import

use

记住，ruby版本的sass用不了这个。。。

语句

操作符

实际使用

常用函数与库

LESS

盒子布局 -  父元素内部位置

参考资料

top和margin-top的区别

vue 页面组件遮罩层无法全屏的一个解决方案

菜鸟教程 CSS 盒子模型

盒子模型

说明

盒子模型用得少了，一般用flex自适应

元素定位

参考资料

CSS 布局1（绝对定位、相对定位、浮动）

菜鸟教程 CSS Position(定位)

Flex布局 - 对子元素进行布局

参考资料

Flex 布局语法教程

启动Flex布局

.box{     display: -webkit-flex; /* Safari */     display: flex; }

基本使用

display: -webkit-flex; /* Safari */ display: flex; flex-direction: column; justify-content: center; /* Main Axis */ align-items: center; /* Other Axis */

Flex基本结构

容器属性说明

flex-direction

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

justify-content

定义了项目在主轴上的对齐方式

flex-wrap

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

align-items

定义项目在交叉轴上如何对齐

align-content

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

项目属性说明

 收藏

立即使用

Vue Router

 收藏

立即使用

Vue

 收藏

立即使用

Pandas

 收藏

立即使用

NumPy

啦啦啦

职业：硕士

去主页

 Collect

Get Started

CSS

 Collect

Get Started

Web前端的学习路线

 Collect

Get Started

CSS

 Collect

Get Started

CSS





0 条评论

下一页