初识CSS总结
程序员文章站
2022-04-19 13:31:10
初识CSS一、什么是CSS?1、CSS的定义2、CSS的主要作用1. 布局2. 美化二、盒子模型盒子的分类块级元素行内元素行内块元素盒子模型的六大属性1. 内容区域:width 和 height块级元素行内元素2. 内填充区域: padding块级元素行内元素3. 边框: borderborder-widthborder-styleborder-color4. 外填充区域:margin设置盒子水平居中块级元素行内元素5. 背景: backgroundbackground-colorbackground-im...
一、什么是CSS?
1、CSS的定义
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
2、CSS的主要作用
1. 布局
- 盒子模型
- 块级元素并排显示
2. 美化
- 字体设置
- 文本设置
- 列表设置
- 表格设置
二、盒子模型
一张网页就是一堆的盒子堆积起来的。盒子就是标签,都是矩形。
盒子的分类
盒子可以分为三类:
盒子模型的六大属性
1. 内容区域:width 和 height
可以设置width和height,表示内容区域。
width和height不起作用
2. 内填充区域: padding
用来设置内填充,也称补白。表示内容区域和边框之间的距离
上下padding可以撑起块级元素盒子的高度
padding在垂直方向上不影响行高
3. 边框: border
设置边框的宽度
设置边框的样式
设置边框的颜色
border是一个复合属性
通常使用.box{ border:1px solid red; }
4. 外填充区域:margin
表示外边距,盒子与盒子之间的距离,是边框之外的间隔。
.box{ margin:0 auto; }
margin有重叠问题
margin在垂直方向上无效
5. 背景: background
设置盒子的背景颜色
设置盒子的背景图片
控制背景图片是否平铺
背景图片定位
三、字体和文本设置
字体设置
设置字体是否倾斜
设置字体是否加粗
设置字体大小
设置字体类型
font是一个复合属性
设置字体颜色
文本设置
用来设置文本的装饰线
把a标签的默认的下划线去掉
a { text-decoration:none; }
首行空两格
1)让盒子中的文本居中
2)让行内元素或行内块元素在一个盒子中居中设置行高
四、浮动布局
浮动的初衷:为了实现新闻的字围效果。
浮动的主要作用
使用浮动来让块级元素并排显示。
浮动的特点
- 贴靠性 如果都向同一个方向浮动,这两个浮动的元素会紧紧的贴在一起,如果后面的空间不够贴靠的话,它会自动换行。
- 包裹性 如果是一个块级元素,在没有设置宽度的情况下,只要它浮动了,那么它的宽度会尽可能小
- 一个元素内部所有元素都浮动了,如果父元素在没有设置高度的情况下,它的高度会变成0,也就说父元素的高度塌陷了。
- 如果一个行内元素浮动了,就可以设置宽度和高度。
清除浮动的影响
.box{ overflow:hidden; }
.box2{ clear:both; }
本文地址:https://blog.csdn.net/TH_Kakashi/article/details/107284711