欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

初识CSS总结

程序员文章站 2022-09-14 10:27:37
初识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-width

设置边框的宽度

  • border-style

设置边框的样式

  • border-color

设置边框的颜色
border是一个复合属性
通常使用

.box{
border:1px solid red;
}

4. 外填充区域:margin

表示外边距,盒子与盒子之间的距离,是边框之外的间隔。
  • 设置盒子水平居中
.box{
margin:0 auto;
}
  • 块级元素

margin有重叠问题

  • 行内元素

margin在垂直方向上无效

5. 背景: background

  • background-color

设置盒子的背景颜色

  • background-image

设置盒子的背景图片

  • background-repeat

控制背景图片是否平铺

  • background-position

背景图片定位

三、字体和文本设置

字体设置

  • font-style

设置字体是否倾斜

  • font-weight

设置字体是否加粗

  • font-size

设置字体大小

  • font-family

设置字体类型

font是一个复合属性
  • color

设置字体颜色

文本设置

  • text-decoration

用来设置文本的装饰线

把a标签的默认的下划线去掉
a {
text-decoration:none;
}
  • text-indent

首行空两格

  • text-align

1)让盒子中的文本居中
2)让行内元素或行内块元素在一个盒子中居中

  • line-height

设置行高

四、浮动布局

浮动的初衷:为了实现新闻的字围效果。

浮动的主要作用

  使用浮动来让块级元素并排显示。

浮动的特点

  • 贴靠性 如果都向同一个方向浮动,这两个浮动的元素会紧紧的贴在一起,如果后面的空间不够贴靠的话,它会自动换行。
  • 包裹性 如果是一个块级元素,在没有设置宽度的情况下,只要它浮动了,那么它的宽度会尽可能小
  • 一个元素内部所有元素都浮动了,如果父元素在没有设置高度的情况下,它的高度会变成0,也就说父元素的高度塌陷了。
  • 如果一个行内元素浮动了,就可以设置宽度和高度。

清除浮动的影响

  • 清除对父元素造成的影响
  • 使用overflow:hidden
.box{
overflow:hidden;
}
  • 对父元素添加高度
  • 清除对兄弟元素造成的影响
  • 使用clear:both
.box2{
clear:both;
}

本文地址:https://blog.csdn.net/TH_Kakashi/article/details/107284711