CSS快速入门

属性

color:颜色

font-size:字体大小

text-decoration:文本装饰

text-indent:首行缩进

line-height:行高

text-align:文本对齐

CSS引入样式

  • 行内样式:写在标签的style属性中
  • 内嵌样式:写在style标签中(通常写在head标签中)
css 复制代码
<style>
	h1 {
		xxx :xxx
	}
</style> 
  • 外联样式:写在单独的.css文件中(需要通过link标签在网页中引入)
html 复制代码
<link rel="stylesheet" href="xxx.css">

CSS选择器

  • 元素选择器:根据标签的名称来选择,如h1
  • id选择器:为标签设置id属性,用#id设置元素样式
  • 类选择器:为标签设置class属性值,用.cls设置元素属性

优先级:ID选择器>类选择器>元素选择器

盒子模型

内容区域、内边距区域、边框区域、外边距区域

  • box-sizing:指定width,height修饰的内容liru border-box盒子的区域
  • margin:外边距(上,右, 下,左)或者(上下 左右),auto:自动计算(自动居中)
相关推荐
loey_ln1 分钟前
webpack配置和打包性能优化
前端·webpack·性能优化
建群新人小猿3 分钟前
会员等级经验问题
android·开发语言·前端·javascript·php
爱上语文4 分钟前
HTML和CSS 表单、表格练习
前端·css·html
djk888814 分钟前
Layui Table 行号
前端·javascript·layui
小肚肚肚肚肚哦1 小时前
盘点浏览器盒模型中各种 width、height 、边距和位置属性
css·html
NightCyberpunk1 小时前
HTML、CSS
前端·css·html
xcLeigh1 小时前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
zhenryx1 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
ZwaterZ1 小时前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
zhangjr05753 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts