CSS
文章平均质量分 78
Massimo_ycw
北海虽赊,扶摇可接,东隅已逝,桑榆非晚!
展开
-
CSS定位
效果:效果:相对定位:position:relative相对于原来的位置,进行指定的偏移,对于相对定位来说,他仍然在标准文档流中,原来的位置会被保留。1、top:上2、left:左3、bottom:下4、right:右案例:代码:效果:定位:1、没有父级元素定位的前提下,相对于浏览器定位2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移3、在父级元素范围内移动相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留。案例代码:原创 2022-06-05 14:22:30 · 475 阅读 · 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 · 178 阅读 · 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 · 58 阅读 · 0 评论 -
美化网页元素
一、为什么要美化网页元素有效的传递页面信息美化页面、吸引用户凸显页面的主题提高用户的体验二、span标签重点要突出的字,使用span标签套起来案例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #Massimo{原创 2022-05-25 13:40:03 · 261 阅读 · 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 · 118 阅读 · 0 评论 -
3中基本选择器
一、选择器作用:选择页面上的某一个或者某一类元素。二、基本选择器标签选择器:选择一类标签 标签{}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器,会选择到页面上所有的这个标签的元素*/ h1{原创 2022-05-24 20:17:15 · 74 阅读 · 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 · 93 阅读 · 0 评论 -
CSS介绍
一、什么是CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。二、常见应用CSS:表现(美化网页):字体、颜色、高度、宽度、背景图片、网页定位、网页浮动…三、发展史原创 2022-05-24 19:21:36 · 160 阅读 · 0 评论