CSS基础————千本樱滑落的瞬间

2024-04-15 15:32

本文主要是介绍CSS基础————千本樱滑落的瞬间,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


一、CSS简介

CSS为html添加样式,eg:字体大小,颜色,,
下面我通过几个实例来初步了解CSS的强大。

  • 列一:改变一段文字中多处文字样式,设为统一样式,
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS样式的优势</title>
<style type="text/css">
<!--span节点包的都回变-->
span{color:blue;
}
</style>
</head>
<body><p>慕课网,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识CSS样式</title>
<style type="text/css">
p{font-size:20px;/*设置文字字号*/color:red;/*设置文字颜色*/font-weight:bold;/*设置字体加粗*/
}
</style>
</head>
<body>
<p>哈哈哈</p>
</body>
</html>

二、CSS的写法有几种形式

1、语法:

这里写图片描述

选择符就是选择器

p{font-size:12px;/*这里写注释*/color:red;
}

2、写法有3种

内联式(写标签里)

<p style="color:red;font-size:12px">这里文字是红色。</p>

嵌入式(写标本文件中)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<!--嵌入式写在style标签之间-->
<style type="text/css">
span{color:blue;
}
</style>
</head>
<body><p>慕课网,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!</p>
</body>
</html>

外部式

写在单独文件中,,文件以.css为扩展名

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<!--使用link将外部css嵌入本文件“rel="stylesheet" type="text/css"”是固定写法,-->
<!--位于head之间-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body><p>慕课网,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!</p>
</body>
</html>

style.css文件

span{color:red;font-size:20px;
}

优先级:
相同权值的情况下
内联式 > 嵌入式 > 外部式,
如给一节点同时使用3种方式的的css,就近原则显示哈

嵌入式>外部式有一个前提:
:嵌入式css样式的位置一定在外部式的后面
就是说style标签要在link标签后面

三、CSS的选择器

看了上节你可能知道选择器了(注意看上节的图),
选择器指明{}中样式的作用对象,

选择器名称特点备注
ID选择器与类选择器相似,#setGeen{color : green;} setGeen是为标签设置的id名称在html文档中ID选择器只能使用一次,而类选择器可用多次
类选择器.stress{color:red;} 类前面要加入一个英文圆点见备注1
标签选择器选择器是标签字符的,eg:h1 {color : red; } 为标签h1的元素添加红色样式
子选择器.food>li{border:1px solid red;} 用于选择指定标签元素的第一代子元素,这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。子选择器仅是指它的直接后代 ,作用于子元素的第一代后代
包含(后代)选择器.first span{color:red;} 注意空格哈用于指定标签元素下所有子后代元素
通用选择器* {color:red;}匹配html中所有标签元素
伪类选择符允许给html不存在的标签(标签的某种状态)设置样式eg:a:hover{color:red;}为 a 标签鼠标滑过的状态设置字体颜色变红,:hover可放在任意标签上但他们兼容性不是很好,所以常见的就是a:hover组合
分组选择符h1,span{color:red;}h1、span标签同时设置字体颜色为红色,多个标签元素设置同一个样式同等于h1{color:red;} span{color:red;}

备注1:
可以使用类选择器词列表方法为一个元素同时设置多个样式。ID选择器不可以

.stress{color:red;
}
.bigsize{font-size:25px;
}
<p>到了<span class="stress bigsize">我叫</span>大锅饭</p>

类选择器使用步骤:

  • 1、使用合适的标签把要修饰的内容标记起来
<span>我是大锅饭</span>
  • 2、未标签设置类名
<span class="stress">我是大锅饭</span>
  • 3、设置类选择器样式
.stress{color:red;}/*类前面要加入一个英文圆点*/

四、CSS特性

  • 继承性

允许样式不仅应用于某个特定html标签元素,而且应用于其后代
如下此设置应用于P标签包含的所有,即不仅应用于p标签,还应用于子元素span标签

p{color:red;}<p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

有些样式不具有继承性:

border:1px solid red;
边框不给子元素设置了哈。你懂的
  • 特殊性

同一元素设置不同css样式代码,元素根据权值来决定用哪个CSS样式。

p{color:red;}
.first{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

如上p和.first 都匹配到了P这个标签上显示绿色

权值规则

标签的权值为1,
类选择符的权值为10,
ID选择符的权值最高为100

如:

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意:还有一个权值比较特殊–继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

  • 层叠

在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。

p{color:red;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。所以前面的css样式优先级就不难理解了:内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

  • 重要性

为某些样式设置最高权值,用!important(写在分号前面)

p{color:red!important;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

p段落的文本会显示红色,
这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。

五、盒子模型

这里写图片描述

在css中html标签分为,
这里写图片描述

  • 块状元素A,
  • 内联元素(行内元素B),
  • 内联块状元素C
<img><input>

1、块状元素

块状元素可通过代码div{display:inline}将元素设置为内联元素
如:

<div><p><h1>...<h6><ol><ul><dl><table><address><blockquote><form>

特点:

  • 独占一行
  • 可设置高宽行高,顶和底边距
  • 宽度默认,充满父容器

2、内联元素

可变为块状元素方法:a{display:block;}

<a><span><br><i><em><strong><label><q><var><cite><code>

特点

  • 和其他元素都在同一行
  • 元素的高度、宽度及顶部和底部边距不可设置
  • 元素的宽度就是它包含的文字或图片的宽度,不可改变。

3、内联块状元素

display:inline-block就是将元素设置为内联块状元素

特点

  • 和其他元素都在一行上
  • 元素的高度、宽度、行高以及顶和底边距都可设置

六、盒子模型的宽度和高度

比如

//css代码:
div{width:200px;padding:20px;border:1px solid red;margin:10px;    
}//html代码:
<body><div>文本内容</div>
</body>

七、常用属性

1、设置字体

不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)
现在一般网页喜欢设置“微软雅黑”,

字体样式代码(只是列子而已)备注
宋体body{font-family:"宋体";}
微软雅黑(兼容性不好)body{font-family:"Microsoft Yahei";}
微软雅黑(兼容性好)body{font-family:"微软雅黑";}用户本地一般都是默认安装的
粗体p span{font-weight:bold;}
斜体p a{font-style:italic;}
下划线p a{text-decoration:underline;}
删除线.oldPrice{text-decoration:line-through;}
缩进p{text-indent:2em;} 2em的意思就是文字的2倍大小。
行间距(行高)p{line-height:1.5em;}行间距为1.5倍
中文字间距、字母间距h1 {letter-spacing:50px;}这个样式使用在英文单词时,是设置字母与字母之间的间距。
英文单词之间间距h1 { word-spacing:50px;}
对齐h1{text-align:center;} 居中left左,right右

2、字号、颜色

字号、颜色代码(只是列子而已)备注
字号body{font-size:12px;color:#666}
灰色#666

3、边框属性色

给一个块级元素加个边框可这样

p{border:2px dotted #ccc;}

给P标签加一个宽2px点虚线,颜色为灰色 的边框
注意:

div{border-bottom:1px solid red;}

就是只设置下边框。

属性样式代码(只是列子而已)备注
边框div{border:2px solid red;} ,注意:dashed(虚线),dotted(点线),solid(实线)备注1
边框颜色border-color),可设置十六进制,border-color:#888;//前面的井号不要忘掉。
边框宽度border-width ,width可替换为:thin , medium , thick(但不是很常用),最常还是用象素(px)

备注1
他是缩写形式,展开为(表示设置边框粗细为2px,样式为实心的颜色为红色的边框)

div{border-width:2px;border-style:solid;border-color:red;
}

4、填充padding

元素内容和边框之间可设置距离的,称为填充可分为上下左右(顺时针)

div{padding:20px 10px 15px 30px;}
//分开写:
div{padding-top:20px;padding-right:10px;padding-bottom:15px;padding-left:30px;
}
//每个方向相同可这样:
div{padding:10px;}
//如果上下填充一样为10px,左右一样为20px,可以这么写:
div{padding:10px 20px;}
样式代码(只是列子而已)备注

5、边界margin

这里写图片描述

用法参见padding

八、布局模型

布局模型分类:

  • 流动模型(Flow)
  • 浮动模型(Float)
  • 层模型(Layer)

流动模型(Flow)

特点

  • 是默认的网页布局模式
  • 块状 元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为默认块状元素的宽度都为100%,实际上,块状元素都会以行的形式占据位置,
  • 在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

浮动模型(Float)

块状元素默认独占一行,设置元素浮动可让两个块状元素并排显示。

列子

div{width:200px;height:200px;border:2px red solid;float:left;//两个div一行显示并左对齐//right;--->两个div一行显示并右对齐
}
<div id="div1"></div>
<div id="div2"></div>//////////////////////////////////////////
div{width:200px;height:200px;border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
.......
//div1左,div2右对齐

层模型(Layer)

如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(positioning)属性来支持层布局模型。

定位形式

  • 1、绝对定位(position: absolute)
  • 2、相对定位(position: relative)
  • 3、固定定位(position: fixed)
绝对定位(position: absolute)

使元素相对最近父元素定位,没有父元素就是body(浏览器窗口)

div{width:200px;height:200px;border:2px red solid;position:absolute;left:100px;top:50px;
}
<div id="div1"></div>
//实现div元素相对于浏览器窗口向右移动100px,向下移动50px。
相对定位(position: relative)
#div1{width:200px;height:200px;border:2px red solid;position:relative;left:100px;top:50px;//通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置}<div id="div1"></div>
//实现相对于以前位置向下移动50px,向右移动100px;

这里写图片描述

固定定位(position: fixed)

但它的相对移动的坐标是视图(屏幕内的网页窗口)本身

//实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。
#div1{width:200px;height:200px;border:2px red solid;position:fixed;left:100px;top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....
Relative与Absolute组合使用

现在我们要实现
这里写图片描述

参考代码:

#box3{width:200px;height:200px;position:relative;           
}
#box4{width:99%;position:absolute;    bottom:0;left:0; /*这条css样式可以省略*/        
}

也就是说现在我们要相对于另外一个元素来布局,而不是相对于窗口

组合规则
  • 1、参照定位的元素必须是相对定位元素的前辈元素:
<div id="box1"><!--参照定位的元素--><div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
//从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。
  • 2、参照定位的元素必须加入position:relative;
#box1{width:200px;height:200px;position:relative;        
}
  • 3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。
#box2{position:absolute;top:20px;left:30px;         
}

这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。

这篇关于CSS基础————千本樱滑落的瞬间的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/906203

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具,采用无代理架构(agentless),基于 SSH 连接进行管理,具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用,旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念

AI基础 L9 Local Search II 局部搜索

Local Beam search 对于当前的所有k个状态,生成它们的所有可能后继状态。 检查生成的后继状态中是否有任何状态是解决方案。 如果所有后继状态都不是解决方案,则从所有后继状态中选择k个最佳状态。 当达到预设的迭代次数或满足某个终止条件时,算法停止。 — Choose k successors randomly, biased towards good ones — Close

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo