
CSS
文章平均质量分 78
Massimo_ycw
北海虽赊,扶摇可接,东隅已逝,桑榆非晚!
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS定位
效果: 效果: 相对定位:position:relative 相对于原来的位置,进行指定的偏移,对于相对定位来说,他仍然在标准文档流中,原来的位置会被保留。 1、top:上 2、left:左 3、bottom:下 4、right:右案例: 代码: 效果: 定位: 1、没有父级元素定位的前提下,相对于浏览器定位 2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移 3、在父级元素范围内移动 相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留。案例代码:原创 2022-06-05 14:22:30 · 543 阅读 · 3 评论 -
浮动及父级边框塌陷
一、标准文档流 注意:行内元素可以被包含在块级元素中,反之,不行。 二、display 初始代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height:原创 2022-06-05 10:45:35 · 225 阅读 · 0 评论 -
CSS盒子模型
一、什么是盒子模型 margin:外边距 padding:内边距 boder:边框 二、边框 边框的粗细 边框的样式 边框的颜色 案例一:内外边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*body总有一个默认的外边距 , 我们可以手动原创 2022-05-28 20:40:22 · 119 阅读 · 0 评论 -
美化网页元素
一、为什么要美化网页元素 有效的传递页面信息 美化页面、吸引用户 凸显页面的主题 提高用户的体验 二、span标签 重点要突出的字,使用span标签套起来 案例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #Massimo{原创 2022-05-25 13:40:03 · 329 阅读 · 0 评论 -
高级选择器
一、层次选择器 案例结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <p>p1</p> <p>p2</p>原创 2022-05-24 21:43:48 · 149 阅读 · 0 评论 -
3中基本选择器
一、选择器 作用:选择页面上的某一个或者某一类元素。 二、基本选择器 标签选择器:选择一类标签 标签{} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器,会选择到页面上所有的这个标签的元素*/ h1{原创 2022-05-24 20:17:15 · 119 阅读 · 0 评论 -
CSS导入方式
一、导入方式 二、样式的优先级 通常情况下,优先级是: 行内样式 > 内部样式 > 外部样式; 在没有行内样式的情况下,遵循就近原则: 结果: 三、扩展 外部样式两种写法 链接式: <link rel="stylesheet" href="css/style.css"> 导入式: @import时CSS 2.1特有的! <head> <meta charset="UTF-8"> <title>Title</ti原创 2022-05-24 19:45:47 · 138 阅读 · 0 评论 -
CSS介绍
一、什么是CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 二、常见应用 CSS:表现(美化网页):字体、颜色、高度、宽度、背景图片、网页定位、网页浮动… 三、发展史原创 2022-05-24 19:21:36 · 227 阅读 · 0 评论