【你也能从零基础学会网站开发】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常用属性也就这些了,先把这些搞明白了之后,就可以尝试去做一些很简单的静态页面了,通过实际的练习加深代码记忆!

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/438749.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ARM64汇编04 - 条件码

关于分支控制与条件码的作用可以去看 《CSAPP》的第 3.6 节&#xff0c;讲的非常清楚&#xff0c;建议看看&#xff0c;这里就不重复了。 我们直接使用一个例子来简单理解汇编是如何实现分支控制的&#xff1a; #include <stdio.h> #include <stdlib.h> #include…

【MATLAB第98期】基于MATLAB的MonteCarlo蒙特卡罗结合kriging克里金代理模型的全局敏感性分析模型【更新中】

【MATLAB第98期】基于MATLAB的Monte Carlo蒙特卡罗结合kriging克里金代理模型的全局敏感性分析模型【更新中】 PS:因内容涉及较多&#xff0c;所以一时半会更新不完 后期会将相关原理&#xff0c;以及多种功能详细介绍。 麻烦点赞收藏&#xff0c;及时获取更新消息。 引言 在…

Easticsearch性能优化之索引优化

Easticsearch性能优化之索引优化 一、合理的索引设计二、合理的分片和副本三、合理的索引设置 对于性能优化&#xff0c;Elasticsearch&#xff08;以下简称ES&#xff09;的索引优化是提高性能的关键因素之一。合理的设计索引&#xff0c;合理的分片和副本以及合理的缓存设置等…

VSCode报错:/bin/sh: python: command not found

背景 以前都是直接用txt写python&#xff0c;然后直接命令行运行。 这次涉及的代码较多&#xff0c;决定用编译器。 写好的一段python点击运行报错&#xff01; 问题描述 因为我本地安装的是python3&#xff0c;但是vscode用的是另一个路径的python&#xff0c;所以找不到 解…

[React 进阶系列] React Context 案例学习:使用 TS 及 HOC 封装 Context

[React 进阶系列] React Context 案例学习&#xff1a;使用 TS 及 HOC 封装 Context 具体 context 的实现在这里&#xff1a;[React 进阶系列] React Context 案例学习&#xff1a;子组件内更新父组件的状态。 根据项目经验是这样的&#xff0c;自从换了 TS 之后&#xff0c;…

光谱整形1

华为张德江&#xff1a;下一代光传送网将走向400G80波WDM系统_通信世界网 (cww.net.cn) 张德江指出&#xff0c;400G WDM系统具有三大基本特征&#xff1a;支持400G80波&#xff0c;单纤32T超大容量&#xff0c;传输距离与100G相当&#xff1b;支持32维以上的光交叉&#xff1…

微前端之使用无界创建一个微前端项目

wujie 使用手册 使用简介 主应用配置 安装 wujie依赖main.js配置 是否开启预加载 生命周期函数 – lifecycle.js配置 子应用配置 跨域设置运行模式 生命周期改造 在主应用中&#xff0c;使用wujie&#xff0c;将子应用引入到主应用中去 wujie 使用手册 wujie 是一个基于 Web…

Linux环境下使用interrupt方式操作UART

目录 概述 1 Linux环境下UART设备 2 轮询方式操作UART功能实现 2.1 打开串口函数&#xff1a;usr_serial_open 2.2 关闭串口函数&#xff1a; usr_serial_close 2.3 发送数据函数&#xff1a; usr_serial_sendbytes 2.4 接收数据函数&#xff1a; usr_serial_readinterr…

Android 性能优化--APK加固(2)加密

文章目录 字符串加密图片加密如何避免应用被重新签名分发APK 加壳的方案简析DEX加密原理及实现 本文首发地址&#xff1a;https://h89.cn/archives/212.html 最新更新地址&#xff1a;https://gitee.com/chenjim/chenjimblog 通过 前文 介绍&#xff0c;我们知晓了如何使用代码…

前端网络请求异步处理——Promise使用记录

Promise是ES6中新增的一个处理复杂异步请求的工具&#xff0c;其主要形式为&#xff1a; const baseUrl http://localhost:80 export const $request (param {}) > {console.log(请求参数, param)return new Promise((resolve, reject) > {wx.request({url: baseUrl …

SpringMVC拦截器和过滤器执行顺序及区别

拦截器&#xff08;Inteceptor&#xff09;和过滤器&#xff08;Filter&#xff09;执行顺序&#xff1f; 拦截器和过滤器区别&#xff1f; 1、拦截次数不同&#xff1a; 过滤器&#xff1a;一次请求只能被一个过滤器拦截一次&#xff0c;它们按照在web.xml中的声明顺序依次执…

Python Web开发记录 Day7:Django(Web框架) part 1

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 七、Django1、快速了解Django①概述②核心功能③…

css flex 布局换行

默认使用display: flex;是不换行的&#xff0c;只需要加上flex-wrap: wrap;就行了&#xff0c;效果图 .app-center {display: flex;flex-wrap: wrap;justify-content:flex-start; } 通过上面我们发现虽然时间换行了&#xff0c;但是每行的边距不一样 加上这个就行了&#xff…

华为配置DHCP Snooping防止DHCP Server仿冒者攻击示例

配置DHCP Snooping防止DHCP Server仿冒者攻击示例 组网图形 图1 配置DHCP Snooping防止DHCP Server仿冒者攻击组网图 DHCP Snooping简介配置注意事项组网需求配置思路操作步骤配置文件 DHCP Snooping简介 在一次DHCP客户端动态获取IP地址的过程中&#xff0c;DHCP Snoopi…

开源分子对接程序rDock使用方法(1)-Docking in 3 steps

欢迎浏览我的CSND博客&#xff01; Blockbuater_drug …点击进入 文章目录 前言一、Docking in 3 steps 标准对接rDock 的基本对接步骤及注意事项 二、 三步对接案例Step 1. 结构文件准备Step 2. 产生对接位点Step 3. 运行分子对接3.1 检查输入文件3.2 测试-只进行打分3.3 运行…

maven项目结构管理统一项目配置操作

一、maven分模块开发 Maven 分模块开发 1.先创建父工程&#xff0c;pom.xml文件中&#xff0c;打包方式为pom 2.然后里面有许多子工程 3.我要对父工程的maven对所有子工程进行操作 二、解读maven的结构 1.模块1 <groupId>org.TS</groupId><artifactId>TruthS…

利用CesiumJS开发模拟飞机飞行的应用(添加飞行轨迹)

上一节介绍了利用CesiumJS开发模拟飞机飞行的应用(一&#xff0c;基本功能)&#xff0c;本节介绍如何在上节基础上添加飞行轨迹所使用数据是从旧金山到哥本哈根的真实航班&#xff0c;并使用 FlightRadar24收集的雷达数据。 添加单个3D点对象 FlightRadar24 使用多种方法&#…

[c/c++] const

const 和 #define 的区别 ? const 和指针一块出现的时候&#xff0c;到底谁不能修改 &#xff1f; const 和 volatile 能同时修饰一个变量吗 ? const 在 c 中的作用 ? 1 const 和 #define 的区别 const 和 #define 的相同点&#xff1a; (1) 常数 const 和 #define 定…

51-27 DirveVLM:自动驾驶与大型视觉语言模型的融合

本文由清华大学和理想汽车共同发布于2024年2月25日&#xff0c;论文名称DRIVEVLM: The Convergence of Autonomous Driving and Large Vision-Language Models. DriveVLM是一种新颖的自动驾驶系统&#xff0c;旨在针对场景理解挑战&#xff0c;利用最近的视觉语言模型VLM&…

蓝桥杯——web(ECharts)

ECharts 初体验 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><script src"echarts.js">&l…