

首页  思维导图  详情



CSS3

2020-07-07 23:12:04   60  举报





AI智能生成

CSS最强总结

CSS

模版推荐

作者其他创作

大纲/内容

概述

用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

拥有对网页对象和模型样式编辑的能力。

css是可以把页面布局，字体布局，背景颜色，字体颜色修改

使用

 内链样式    只需要在标签里面写入style="属性：即可使用scc

外链样式

新建css文件，在文件中编辑，但是必须在html的head中用Link引入css， 并在html标签中写上Class属性

常用选择器

*

全局选择器，选择所有的html标签进行样式添加

类选择器，选择class名相同的标签进行样式添加

id选择器，选择id名相同的标签进行样式添加，id是唯一的

div

标签选择器，选择所有同样的标签进行样式添加

idv,p

把div和p的所有标签进行样式添加

li[index]

选择li标签下有index属性的标签

li[index=a]

选择li标签下有index属性的标签并且值为a

a:hover

定义鼠标悬浮在链接上时的样式

a:active

定义鼠标点击链接时的样式

a:link

定义正常链接的样式

a:visited

定义已访问过链接的样式

常用属性

background设置背景颜色，图片

背景图重复

background-repeat： no-repeat 不重复 repeat 重复(默认) repeat-x 延x轴平铺 repeat-y 延y轴平铺

背景的合写：不区分顺序

background：red url(img/123.png) no-repeat 10px 20px; background：10px 50px url(img/bg.png) no-repeat red;

最常用的书写顺序：

background:url(img/bg.png) no-repeat 10px 50px #ccc;

border设置边框宽度，颜色

合写：

border：1px solid red；               宽度线性颜色

分写：

宽度： border-width:1px;

线性： border-style： solid 实线                         dotted 点化线                         dashed 虚线

颜色： border-color：

border的四个方向： border-top/right/bottom/left:1px solid red;

color设置字体颜色

font-size设置字体大小

字体大小： font-size：14px；(浏览器默认的字体大小16px)

字体系列： font-family：

划线： text-decoration：overline 上划线/顶划线 line-through 中划线/删除线 underline 下划线(在a标签默认) none 无(除a标签之外默认)

text-align水平对齐left居左(默认)center居中right居右

line-height垂直对齐（只要高度和行高一样就可以实现居中）

行内元素，块元素，行内块元素

行内元素

不支持宽高，共处一行，受空格和换行的影响

标签：span，a，b，strong，i，em

块元素

支持宽高，独占一行，不受空格和换行影响

标签：div，p，h1-h6

行内块元素

支持宽高，共处一行，受空格和换行的影响

标签：img

元素互相转换使用display属性

display：inline；块变成行内 display：inline-block;变成行内块 display：block；行内变成块(大多都是行内变成块)(可以控制元素显示) display：none；隐藏元素

盒子模型

所有的页面的元素都可以看成是一个盒子，占据一定的页面空间。

一个div就是一个盒子

边距

内边距（padding）

Padding （填充）属性定义元素边框与元素内容之间的空间

外边距（margin）

围绕在元素边框的空白区域是外边距。

浮动

左浮动

float:left左浮动

右浮动

float:right右浮动

清浮动

给浮动元素父级加overflow：hidden

弊端：溢出隐藏，可能会带来不便。

给浮动元素下面加：

弊端：需要手动改变html代码，麻烦

给浮动元素父级加clearfix： .clearfix:after{ display:block; content:''; clear:both;} .clearfix{zoom:1;}

定位

固定定位

position：fixed； top：10px； left：20px；

特点： 1.完全脱离文档流 2.改变元素类型 3.参照物：屏幕可视区

绝对定位

position:absolute; top:50%; left:50%;

特点： 1.完全脱离文档流 2.使元素支持宽高，改变元素类型

3.参照物： 如果父级有定位，参照物就是定位父级 如果父级没有定位，参照物是body

相对定位

position：relative；

作用：加给定位元素的父级

特点： 1.不脱离文档流 2.不改变元素类型 3.参照物：自己

层级

z-index

就像（Ｘ　Ｙ　Ｚ）轴中的ｚ轴，数值越高，层级越高，越先显示

遮罩

可以将与遮罩层相链接的图形中的图像遮盖起来。

opacity:0-1,数值越大，透明度越低

注意： 1.同级元素一个浮动，其他的都要浮动 2.浮动元素能设置宽高，尽量设置宽高

普通元素 < 浮动元素 < 定位元素 < z-index

 收藏

立即使用

html

 收藏

立即使用

CSS3

 收藏

立即使用

JQuary

 收藏

立即使用

ｊｓ

天赐

职业：暂无

去主页

 Collect

Get Started

CSS

 Collect

Get Started

CSS

 Collect

Get Started

CSS

 Collect

Get Started

CSS





0 条评论

下一页