登录免费注册



CSS3

首页  思维导图  详情



CSS3

2021-09-29 20:54:37   0  举报





AI智能生成

CSS的基础总结很全面，常用的都在里面

程序员必备

css

html5和css3基础

学习笔记

软件开发

前端技术

模版推荐

作者其他创作

大纲/内容

导入方式：就近原则

行内样式：body里

内部样式head里

外部样式

链接式link

导入式@import url(CSS/style.css)

选择器<br>

基本选择器<br>id选择器>class选择器>标签选择器

标签选择器

类选择器：  .class的名称{}   ，可以复用

Id选择器：#id名称{}   ，id唯一不能复用<br>

层次选择器

后代选择器body p

子选择器body>p只有一代

相邻兄弟选择器.m+p向下的一个

通用兄弟选择器.m~p向下的所有同辈<br>

结构伪类选择器

ul的第一个子元素ul li:first-child

ul的最后一个子元素ul li:last-child

定位到父元素，然后选第一个元素，按顺序选p:nth-child(1)

定位到父元素，然后选p元素中的第二个元素，按类型选p:nth-of-type(2)

属性选择器（常用）

字体

font-family:字体样式

font-weight:字体粗细<br>

text-decoration: none取消下划线

text-align: center居中

首行缩进text-indent:1em

line-height行高

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

阴影text-shadow:水平距离，竖直距离，模糊半径，颜色

超链接伪类

鼠标悬浮的状态a:hover{}

鼠标按住未释放的状态a:active{}

背景图片:默认都是平铺<br>background-image:<br>url("路径");

不平铺就一个no-repeat

x轴方向平铺background-repeat: repeat-x;

y轴方向平铺background-repeat: repeat-y;

盒子模型

盒子

外边距margin，整个框居中：margin: 0 auto

边框border，solid实线；dashed虚框

内边距padding

auto×auto=margin + padding + border + 内容宽度

圆角边框border-radius

圆角边框也有四个参数，仍为顺时针顺序

盒子阴影box-shadow

浮动

display

display: inline;行内元素

display: block;块元素

inline-block 既是块元素又有行内元素特性

float上下左右浮动

父级塌陷解决方案

设置父级边框高度足够高

在div里增加一个空的div，清除浮动<br>clear: both;<br>clear: right;

overflow

在父级添加一个伪类：after

定位

相对定位relative，仍然在标准文档流里面，基于原来的位置定位

绝对定位absolute，不在标准文档流

基于父级定位

基于浏览器定位

固定定位fixed

z-index

层级0-999，相当于图层概念

 Collect

Get Started

CSS3

 Collect

Get Started

css3知识体系整理

 Collect

Get Started

css3样式汇总

 Collect

Get Started

前端开发语言-CSS3













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document