导图社区 css基础

css基础

css基础入门，小白必看！看完这个你可以完成页面一些简单的渲染和排版布局！CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

编辑于2021-04-05 13:43:17

新手上路

溪中捕鱼

他的近期作品查看更多>>

高数上册知识点
涵盖了高数上册的所有知识点，主要内容有第一节映射与函数、第二节数列的极限、第三节函数的极限、第四节无穷小与无穷大、第五节极限运算法则等。
css基础
css基础入门，小白必看！看完这个你可以完成页面一些简单的渲染和排版布局！CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

css基础

社区模板帮助中心，点此进入>>

溪中捕鱼

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 33.8k
- 906
- 2.4k
- 390
MindMaster
组织架构-单商户商城webAPP 思维导图。
- 14.6k
- 3
- 184
- 10
Kacyun
域控上线
- 1.6k
- 162
- 11
- 4
jackrao
python思维导图
- 5.4k
- 523
- 242
- 7
(*^▽^*)
css
- 1.2k
- 1
- 43
- 3
A张舫
CSS
- 3.2k
- 261
- 188
- 33
journey
计算机操作系统思维导图
- 4.2k
- 333
- 203
- 18
journey
计算机组成原理
- 1.5k
- 97
- 70
- 8
journey
IMX6UL(A7)
- 511
- 40
- 5
- 0
Handler XU
考试学情分析系统
- 680
- 50
- 10
- 1
蒋龙

css

注释代码为 /*注释内容*/

1. 引入方式

1. 外部样式表

1. 将需要渲染的样式代码单独放在一个css文件里面，在html中在head里面插入link标签引入。代码展示： <link type="text/css" rel="stylesheet" href="css文件的相对路径"/>

2. 内部样式表

2. 将css文件放在head里面的style标签中。代码展示： <head><style type="text/css">/*这里写css文件*/</style></head>

3. 行内样式表

3. 在标签的style中定义代码展示： <div style="color:blue;">你好</div>

2. 选择器

1. 元素选择器

1. 元素本身可作为选择器，选择相同的元素。代码展示  <div>你好</div> /*这是CSS文件*/ div{color:blue;} 注意：各个属性之间用分号隔开，CSS属性结束后用分号结尾

2. class选择器

2. 可为同个页面的相同或者不同的元素设置相同的class，使用相同的CLASS的元素具有相同的css样式。代码展示：  <div class="div1">你好</div> <p class="div1">hello</p> /*这是css文件*/ .div1{color:blue;} 注意：class选择器的选择符前面必须有选择符前缀.

3. id选择器

3. 同一个页面不能出现两个相同的id 代码展示：  <p id="1">你好</p> /*css文件*/ #1{color:blue;} 注意：id名称前面必须带选择符前缀#

4. 后代选择器

4. 用来选择元素中的某个元素代码展示  <div> <h1>标题</h1> <p>段落</p> </div> /*css代码*/ div h1{color:blue;} 语义：选中div元素中的h1元素，并将其字体颜色改为蓝色。注意：选择器间用空格隔开

5. 群组选择器

5. 同时对多个选择器进行相同的操作代码展示：  <div>你好</div> <p class="p1">hello</p> <h1 id="h1">hi</h1> /*css文件*/ div,.p1,#h1{color:blue;} 注意：多个选择器用逗号隔开

选择需要渲染或者排版的元素

3. 字体样式

1. font-family

1. 字体类型，定义文字的字体。可以指定多种字体，用逗号隔开，浏览器优先选用排在第一的字体，依次向后，防止有些字体没安装。注意：汉字和两个单词及以上的字体要使用双引号。

2. font-size

2. 设置字体大小，单位可为px,em（当前长度）,rem(根长度)

3. font-weight

3. 属性取值： normal 正常(默认) lighter 较细 bold 较粗（常用） bolder 很粗（和bold差不多）

4. font-style

4. 属性取值： normal 正常（默认） italic 斜体（注意有的字体没这个取值） oblique 斜体（更广泛）字体风格比较少用

5. color

5. 定义字体颜色取值： 1.颜色的英文，例如：div{color:blue;} 2.16进制颜色，例如：div{color:#fff}

4. 文本样式

4. 注意：a元素不具有继承性，可以通过取值inherit强制使a继承父元素的属性取值

1. text-indent

1. 取值为像素值 CSS代码展示： p{text-indent:60px;} 注意：假如字体为30px,text-indent取值为60px，说明首行缩进2个汉字。

2. text-align

2. 设置文本对齐取值： 1.left(靠左对齐) 2.center(居中对齐) 3.right（靠右对齐）

3. text-decoration

3. 定义文本修饰效果（下划线，中划线，顶划线）属性取值： none（去除所有的划线效果默认） underline（下划线） line-through（中划线） overline(顶划线)

4. text-transform

4. 转换大小写属性取值 none（无转换默认值） uppercase（转换为大写） lowercase（转换为小写） capitalize(只将每个英文单词首字母转换为大小写)

5. line-height

5. 控制一行文本高度属性取值为像素值px

6. letter-spacing

6. 控制字间距属性取值为像素值px 注意英文的每个字母的间距算字的间距

7. word-spacing

7. 控制两个单词间的距离，只针对英文单词而言取值属性为像素px

5. 边框样式

5. 几乎所有元素都可以定义边框

属性

属性冒号写取值，取值后用；结尾

1. border-width

1. 定义边框的宽度属性取值为像素px

2. border-style

2. 定义网页外观属性取值： none（无样式默认值） dashed（虚线） solid(实线)

3. border-color

3. 定义边框的颜色属性取值：颜色的英文 16进制颜色

简写形式为：border：2px solid blue; 四条边框还可以单独定义。当边框宽度为0时，即为去除边框属性为：border-top-width border-right-width border-bottom-width border-left-width。其他的属性一样，简写形式为：border-top:2px solid blue;

6. 列表样式

属性

1. list-style-type

1. 只在ol或ul中定义

有序列表取值

1. decimal

1. 阿拉伯数字（123……）排序

2. lower-roman

2. 小写罗马数字（i ii iii ……）排序

3. upper-roman

3. 大写罗马数字（I II III……）排序

4. lower-alpha

4. 小写英文字母（abc……）排序

5. upper-alpha

5. 大写字母（ABC……）排序

无序列表取值

1. disc

1. 实心圆（默认值）

2. cicle

2. 空心圆

3. square

3. 实心正方形

去除列表项符号的属性取值为none

2. list-style-image

取值

url(图片路径)

7. 表格样式

属性

1. caption-side

1. 定义表格标题的位置可以在table或caption中定义一般在table中定义即可

取值

1. top

1. 默认值，标题在顶部

2. bottom

2. 标题在底部

2. border-collapse

2. 表格边框合并，在table元素中定义

取值

1. separate

1. 边框分开，有空隙（默认值）

2. collapse

2. 表格合并，无空隙

3. border-spacing

3. 定义表格边框边距属性取值为像素值px

8. 图片样式

属性

1. width

1. 定义图片宽度，取值为像素

2. height

2. 定义图片高度，取值为像素

均在img中定义，定义了图片的大小，但是实际开发中，一般按需在ps里面制图，优化网页加载速度。

3. text-align

3. 定义图片对齐方式（和文本取值一样）属性取值： 1.left(靠左对齐) 2.center(居中对齐) 3.right（靠右对齐）

4. vertical-align

4. 定义图片垂直方向的对齐取值： 1.top 顶部对齐 2.middle 中部对齐 3.baseline 基线对齐 4.bottom 底部对齐

5. float

5. 实现文字环绕效果取值： 1.left 图片浮在左 2.right 图片浮在右

9. 背景样式

9. 定义元素的背景样式

属性

1. background-color

1. 定义元素背景颜色，取值为颜色英文或16进制颜色

2. background-image

2. 定义背景图片地址取值： url(图片路径) 代码展示： background-image:url(fishinger.jpg);

3. background-repeat

3. 定义背景图片的重复方式取值： 1.repeat(在水平和垂直方向同时平铺，默认值) 2.repeat-x（在水平x方向平铺） 3.repeat-y(在垂直y方向平铺) 4.no-repeat(不平铺) 注意：元素的宽度和高度大于图片高度才会有重复的效果

4. background-position

4. 定义背景图片的位置参考原点为元素的左上角， 1.属性取值为像素值，例：background-position:10px 30px; 说明背景图片距元素左边界的距离为10px,背景图片距元素上边界的距离为30px。 2.属性取值为关键字，共计9个关键字，由5个英文单词组合而成。 top left top center top right left center center center right center bottom left bottom center bottom right

5. background-attachment

5. 定义背景图片是和元素一起滚动还是固定不动属性取值： 1.scroll(随元素一起滚动，默认值) 2.fixed(固定不动)

定义背景图片

10. 超链接样式

超链接伪类

1. a:link

1. 定义a元素未访问时的样式，未访问的状态可以直接用a即可

2. a:visited

2. 定义元素访问过后的样式

3. a:hover

3. 定义鼠标经过a元素时的样式

伪类:hover可以定义任何一个元素在鼠标经过时的样式

4. a:active

4. 定义鼠标单击激活时的样式

鼠标样式

cursor

定义鼠标样式属性取值： 1.default(默认值)就是系统鼠标箭头 2.pointer（鼠标变成小手状） 3.text(鼠标变成输入文本状) 4.crossshair(鼠标变成十字架状) 5.wait(鼠标变成圆圈加载状) 6.help(鼠标变成箭头加疑问号状) 7.move（鼠标变成十字拖动状） 8.e-resize或w-resize(鼠标变成左右双向箭头) 9.ne-resize或sw-resize(鼠标变成/方向的双箭头) 10.nw-resize或se-resize(鼠标变成\方向的双箭头) 11.n-resize或s-resize(鼠标变成竖直方向的双箭头)

自定义鼠标样式

代码展示： cursor:url(图片地址),属性值; 鼠标图片的后缀名一般都是.cur，可通过一些小软件制作，属性值就是之前的11个。

定义元素的渲染样式

11. 盒子模型

1. content

1. 内容区属性： width(定义内容区的宽度，取值为像素) height(定义内容区的高度，取值为像素) 注意：行内元素无法设置宽高，此时需要用display:block;将其转换为块元素方可设置，display:inline-block;可以将块元素转换为行元素。

2. padding

2. 定义内容区距边框的距离属性取值为像素简写方式： 1.padding:10px;(上下左右的内边距均为10px) 2.padding:10px 30px;(上下的内边距为10px,左右的内边距为30px。) 3.padding:10px 40px 60px 20px;（顺时针赋值，上内边距10px,右内边距40px,下内边距60px,左内边距20px。） 4.padding:10px auto;（上下的内边距为10px,左右内边距自动。）

3. border

3. 定义边框样式，和边框样式属性取值方法一样，简写形式：border:2px solid red;

4. margin

4. 设置外边距，定义边框到另一个元素盒子的最外边（当这个元素盒子没有设置外边距的时候，此时两元素盒子边框的距离即为margin值）的距离。 margin值可以是子元素到父元素边框的距离，也可以是兄弟元素之间的距离，也可以是元素盒子到浏览器边的距离，当既有父元素也有兄弟元素时，该元素先看四个方向有无兄弟元素，有，则此方向的margin是相对兄弟元素，否则相对父元素。简写形式：margin:20px 40px 60px 40px; 简写意思和padding一样都是顺时针取值

浏览器的审查元素可以清楚的看到盒子模型的具体参数

12. 浮动布局

12. 常用于水平方向的并排布局，如两列布局、三列布局、

float

好像被文字包围的图片。属性取值： left（左浮动） right（右浮动）注意：当元素设置了浮动时，元素的宽高由内容撑起来，下一个元素会紧跟其后，

清除浮动

clear

清除浮动带来的影响, 取值： left(清除左浮动) right(清除右浮动) both(清除左浮动和右浮动)最常用代码展示： <--html文件--> <div class="father"> <div id="son1"></div> <div id="son2"></div> <div id="clear"><div> </div> /*css文件*/ #son1,#son2{float:left;} #clear{clear:both;}

13. 定位布局

13. 实现元素的精准定位，但是不如浮动布局灵活。

属性

1. position

取值

1. static

1. 静态定位（默认值）

2. relative

2. 相对定位（不算脱离文档流）相对该元素的原始位置计算得到的，在css代码中必须有该元素的原始定位

两者属于正常文档流：指元素按行或块元素的属性排列，块元素独占一行，行元素可以挤在一行，块元素可以内嵌块元素和行元素，行元素只能内嵌行元素

3. fixed

3. 固定定位，位置是相对于浏览器而言常用于回到顶部特效被固定的元素不会随着滚动条的拖动而改变位置

4. absolute

4. 绝对定位，位置是相对浏览器而言，应用最广泛，完全脱离文档流，绝对定位的前面和后面的元素会认为这个元素并不存在，此时该元素完全浮在其他元素上面，已经完全独立出来。

脱离文档流

2. top

3. bottom

4. left

5. right

取值均为像素值，或者其他，定位只需确定其中两个值即可，类似于平面直角坐标系，参考对象为浏览器的4条边(fixed和absolute)，或者原来位置（relative）

定义元素的排版