【你也能从零基础学会网站开发】Web建站之HTML+CSS入门篇 CSS常用属性

🚀 个人主页 极客小俊
✍🏻 作者简介:web开发者、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

CSS常用属性

使用CSS基本上能够处理的属性有:背景、文本、字体,边框、内边距、外边距,列表、表格、尺寸,定位、分类、伪类!

对于新手而言,我个人从里面挑选了一些最常用的CSS属性,大家可以先学习,熟练之后,再去深入学习其他的CSS属性!

CSS 背景(background)

该属性定义元素的背景效果。
元素的背景区包括前景之下直到边框边界的所有空间。因此,内容框与内边距都是元素背景的一部分,且边框画在背景上。
CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果,具体有如下:

Background                      简写属性
background-attachment           背景图像是否固定或者随着页面的其余部分滚动。
background-color                设置元素的背景颜色。
background-image                把图像设置为背景。
background-position             设置背景图像的起始位置
background-repeat               设置背景图像是否平铺及如何平铺。
CSS 文本

使用文本属性,你可以改变文本的颜色,增加或减少文本中的字符间距,对齐文本,装饰文本,对文本中的首行进行缩进等。
具体有如下属性:

Color           设置文本颜色
Direction       设置文本方向。
line-height     设置行高。(一般只作用于文字)
text-align      对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent     缩进元素中文本的首行。
text-transform  处理文本的大小写。
letter-spacing  设置字符(字母)间距。
word-spacing    设置词(词组)间距。

text-indent    一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于
行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果
一块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。

white-space   当 white-space 属性设置为 normal 时,会合并所有的空白符,并忽略换
行符.当 white-space 属性设置为 pre 时,浏览器不会合并空白符,也不会忽
略换行符.值是 nowrap,它会防止元素中的文本换行,除非使用了一个 br 元
素如果元素的 white-space 设置为 pre-wrap,那么该元素中的文本会保留空
白符序列,但是文本行会正常地换行。如果设置为这个值,源文本中的行分隔
符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反,会像正常文本
中一样合并空白符序列,但保留换行符。
CSS 字体(font)

CSS 字体属性允许您设置字体系列 (font-family) 和字体加粗 (font-weight),我们还可以设置字体的大小、字体风格(如斜体)和字体变形(如小型大写字母)

具体有如下属性:

Font         简写属性
font-family  设置字体系列。
font-size    设置字体的尺寸。
font-style   设置字体风格。
font-variant 以小型小写字体或者正常字体显示文本。
font-weight  设置字体的粗细
CSS 边框(border)

CSS边框属性可以规定元素边框的粗细、样式和颜色。
具体如下:

    border        简写属性
    border-style  用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
    border-width  用于为元素的所有边框设置宽度,或者 单独地为各边边框设置宽度。
    border-color  设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 

    Top(上)  right(右)   bottom(下)   left(左)
CSS 外边距(margin)

CSS外边距属性定义元素周围的空间,设置外边距会在元素外创建额外的“空白”。“空白”通常指不能放其它元素的区域,而且在这个区域中看得到父元素的背景。

例如: h1 {margin : 10px 0px 15px 5px;}

这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的:margin: top right bottom left

具体如下:

  margin           简写属性
  margin-bottom    设置元素的下外边距。
  margin-left      设置元素的左外边距。
  margin-right     设置元素的右外边距。
  margin-top       设置元素的上外边距。   
CSS 内边距(padding)

CSS 内边距属性定义元素边框与元素内容之间的空白 。
例如: td {padding : 2px 2px 2px 2px;}

具体如下:

Padding         简写属性。
padding-bottom  设置元素的下内边距。
padding-left    设置元素的左内边距。
padding-right   设置元素的右内边距。
padding-top     设置元素的上内边距。
CSS 列表

CSS 列表属性可以放置、改变列表项标志,或者将图像作为列表项标志 。

使用方式如下属性:

list-style           简写属性。
list-style-image     将图象设置为列表项标志。
list-style-position  设置列表中列表项标志的位置。
list-style-type      设置列表项标志的类型。
CSS 表格

CSS 表格属性允许你设置表格的布局。

使用方式如下属性:

border-collapse: 设置是否把表格边框合并为单一的边框。
border-spacing : 设置分隔单元格边框的距离。
empty-cells :    设置是否显示表格中的空单元格。
caption-side:    设置表格标题的位置。
table-layout :   设置显示单元、行和列的算法
CSS 尺寸(Dimension)

CSS 尺寸(Dimension)属性可以控制元素的高度和宽度及行间距。(单位为:px)

常见的使用方式如下属性:

Height      设置元素的高度。
line-height 设置行高。
max-height  设置元素的最大高度。
max-width   设置元素的最大宽度。
min-height  设置元素的最小高度。
min-width   设置元素的最小宽度。
Width       设置元素的宽度。
CSS 分类(Classification)

CSS 分类属性可以规定如何以及在何处显示元素, 这一块里面的属性几乎是CSS布局的核心

常见的使用方式如下属性:

Clear     设置一个元素的侧面是否允许其他的浮动元素。
Cursor    规定当指向某元素之上时显示的指针类型。
Display   设置是否及如何显示元素。
Float     定义元素在哪个方向浮动。
Position  把元素放置到一个静态的、相对的、绝对的、或           固定的位置中。
Visibility设置元素是否可见或不可见。

Display 的属性值:如下

None          此元素不会被显示。
Block         此元素将显示为块级元素,此元素			   前后会带有换行符。
Inline        默认。此元素会被显示为内联元素,			   元素前后没有换行符。
inline-block  行内块元素。

块元素默认独占一行的元素。例如:DIV、TABLE、PRE、H1..H6、UL、LI、OL、FORM等元素。
特点:
1)独占一行,
2)可以设置宽、高

内联元素(行内元素):默认不独占一行的元素,它们可以放在一起。
例如:FONT、A、SPAN、INPUT、IMG等…
特点:
1)不独占一行,
2)宽度跟高度不可以控制。

块元素转换成行内元素:display:inline
行内元素转换成块元素:display:block

CSS浮动属性

Float 属性,用于让元素脱离文档流,进行浮动, 它的属性值如下:

   left    文本或图像会移至父元素中的左侧。
   right   文本或图像会移至父元素中的右侧。
   none    默认。文本或图像会显示于它在文档中出现的位置。

clear 清除浮动元素属性, 它的可选值如下:

Left    在左侧不允许浮动元素
Right   在右侧不允许浮动元素
Both    在左右两侧均不允许浮动元素
None    默认。允许浮动元素出现在两侧。

float属性是个重点, 在 CSS 中,任何元素都可以浮动。
浮动元素会生成一个块级框,而不论它本身是何种元素, 且要指明一个宽度,否则它会尽可能地窄, 另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。

visibility 属性

visibility 属性设置元素是否可见或不可见。
即使不可见的元素也会占据页面上的空间。

如果不可见元素不占据页面空间则用display来控制
它们之间的区别: Visible 元素是可见的, Hidden 元素是不可见的。

CSS 定位(Positioning)

CSS 定位(Positioning)是我们在布局中经常会使用到的一个属性!

我们主要使用的定位属性有以下这几种:

absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative 生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 inherit 规定应该从父元素继承 position 属性的值。

而只有使用了定位属性,那么以下这些值才管用!

Bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
Right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
Top 定义了一个定位元素的上外边距边界与其包含块上边界之间的 偏移。
z-index 设置元素的堆叠顺序 。

Overflow 溢出隐藏

设置当元素的内容溢出其区域时发生的事情。
我们一般设置的值为hidden

CSS 伪类(Pseudo-classes)

CSS 伪类(Pseudo-classes) 用于向某些选择器添加特殊的效果。
伪类的语法:

   selector:xxx-class {property: value} 
   a:link {color: #FF0000} 
   a:visited {color: #00FF00} 
   a:hover {color: #FF00FF} 
   a:active {color: #0000FF}

注意:在 CSS 定义中,a:hover 必须被置于a:link 和 a:visited之后,才是有效的。
a:active 必须被置于a:hover之后,才是有效的。

CSS 伪元素(Pseudo-elements)

CSS 伪元素用于将特殊的效果添加到某些选择器。

伪元素的语法:选择器 : 伪元素 { 属性: 值 }
伪元素有很多

例如:

:first-letter  将特殊的样式添加到文本的首字母
:first-line    将特殊的样式添加到文本的首行

更多伪元素大家可以去查看w3c文档!

CSS 盒子模型 (Box Model)

盒子模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式, 这也是CSS技术的核心之一!

元素框的最内部分是实际的内容,直接包围内容的是内边距。
内边距呈现了元素的背景, 内边距的边缘是边框。
边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

为了方便理解请看以下图

如图

在这里插入图片描述

基本的CSS常用属性也就这些了,先把这些搞明白了之后,就可以尝试去做一些很简单的静态页面了,通过实际的练习加深代码记忆!

"👍点赞" "✍️评论" "收藏❤️"

大家的支持就是我坚持下去的动力!

如果以上内容有任何错误或者不准确的地方,🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法,
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇