当前位置: 首页 > article >正文

【CSS】——基础入门常见操作

8e19eee2be5648b78d93fbff2488137b.png

阿华代码,不是逆风,就是我疯

你们的点赞收藏是我前进最大的动力!!

希望本文内容能够帮助到你!!

目录

一:CSS引入

二:CSS对元素进行美化

1:style修饰

2:选择器

(1)标签选择器

(2)类选择器

效果①

效果②

(3)ID选择器

总结

(4)复合选择器

3:font-size

4:boder、width、height

5:margin、padding内外边距


一:CSS引入

CSS(Cascading Style Sheet),层叠样式表, ⽤于控制⻚⾯的样式.

CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和

结构分离.

CSS 可以理解为"东⽅四⼤邪术" 之化妆术.

对⻚⾯的展⽰进⾏"化妆"

二:CSS对元素进行美化

1:style修饰

对所有span标签都设置为了红色,这显然是不合适的

我们对span标签进行分类

2:选择器

(1)标签选择器

解释:对<span>的标签进行修饰

效果:

(2)类选择器

在center前加“.”     

解释:选择class为center的元素

效果①

效果②

(3)ID选择器

总结

(4)复合选择器

由多个单选择器组成

ul标签:unlist无序列表

ol标签:orderlist有序列表

①场景:不修改li,给ol标签中的li加修饰  

ol li

②效果

③变式:类选择器 + 标签选择器

.order li

④就近原则

你要改成红色,但我偏要用蓝 色

按照代码从上往下的顺序,谁离得近,就是什么颜色

效果

⑤样式

通常将样式放在header里面,保证页面加载时先出样式

1>行内样式

适合新手小白

2>内部样式

 

3>外部样式

herf外部链接,用ctrl+鼠标左击点进去。特点:非常简洁,适合企业开发

3:font-size

设置字体大小(chrome浏览器默认字体大小为16像素)

效果

4:boder、width、height

边框,边界 ;px是像素(可以理解为字体大小,数字越大像素越大,字体越大)

复合样式:由多个样式组成,没有先后顺序

①效果

②width

③height

重点:width、height只对块级元素生效,对行内元素不生效——例如对div标签生效,对span标签不生效(可以理解成div是一个箱子,span是一个袋子)

块级元素:h1~6、p、div

行内元素:span、a、

5:margin、padding内外边距

重点内外都是相对的,看是相对于谁!!

 

margin

有上下左右像素单独设置,也可以什么都不加就是都设置,也可以是两个参数(第一个表示上下,第二个表示左右)——margin(0,auto)居中的意思

遵循上右下左的顺序设置为不同值(也可以记为顺时针)

也可以单独选设置

设置前

设置后

padding

效果如下


http://www.kler.cn/a/375385.html

相关文章:

  • 数字IC后端实现之Innovus Place跑完density爆涨案例分析
  • 大数据新视界 -- 大数据大厂之大数据环境下的网络安全态势感知
  • 吉林大学2023级数据结构上机实验第(1~2周)参考答案(关注我,在系统关闭后持续更新)
  • openGauss开源数据库实战十二
  • EDA --软件开发之路
  • 编程之路:蓝桥杯备赛指南
  • 如何在 Ubuntu 16.04 上使用 UFW 设置防火墙
  • VsCode显示空格
  • 移远通信推出八款天线新品,覆盖5G、4G、Wi-Fi和LoRa领域
  • const对象仅在文件内有效的问题
  • 探讨Facebook的AI研究:未来社交平台的技术前瞻
  • 机器视觉中光源镜头和相机的关系
  • Django数据模型on_delete属性值
  • 大厂面试真题-很多系统会使用netty进行长连接,连接太多会有问题吗
  • Linux中部署PostgreSQL保姆级教程
  • 实习冲刺Day10
  • 【CSS】CSS 样式重置 (normalize.css 和 reset.css) 和通用样式配置
  • 虚拟现实与增强现实:重塑娱乐和教育的边界!
  • Pytest-Bdd-Playwright 系列教程(6):在测试步骤函数中设置别名数据共享
  • 校园社团信息管理:Spring Boot技术的优势与实现
  • 提升用户体验优化全攻略
  • !!!Docker 实践与应用实例
  • vue系列==vue3新语法
  • 奥数与C++小学四年级(第十六题 魔法学院)
  • MATLAB生态环境数据处理与分析
  • 【OpenGL】知识点