首页 > 其他分享 >CSS概念及入门

CSS概念及入门

时间:2024-03-14 11:59:42浏览次数:27  
标签:优先级 入门 样式 概念 html 文档 css CSS

CSS概念及入门

简介

CSS 的全称为:层叠样式表 ( Cascading Style Sheets ) 。
CSS 也是一种标记语言,用于给 HTML 结构设置样式,例如:文字大小、颜色、元素宽高等等。

主流的布局方式:div+css。

组成

选择器

用于选择页面中的元素,进行样式的控制。

属性

用于设置样式,布局控制。

区别

css和html属性控制样式的区别:

  1. css控制样式更加的专业,可以实现html属性实现不了的效果。
  2. 可以实现标签和样式的分离,提高样式的重用性,提高开发效率。

CSS引入方式

行内样式

语法

写在HTML标签的style属性里的,规范是“名:值”,语法如下:

image-20240201102415427

特点

  • 简单,耦合性强,但是不利于代码和样式的分离,没有复用性。
  • 样式可以写在标签内部,但不推荐,因为优先级太高。

内部样式

写在html里面的任意位置,一般写在<head>里面。

语法

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>CSS初体验</title>
		<style>
			h1 {
				/* 样式可以直接写在html中,这样可以控制整个页面的样式 */
				/* 设置宽度 */
				width: 50px;
				/* 设置高度 */
				height: 50px;
				/* 文字对齐 */
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1 style="color: #ffffff">Hello World</h1>
	</body>
</html>

特点

  • 实现了html代码和样式的分离,只能在当前页面进行复用。
  • 这种写法代码结构清晰,样式可以为多个标签复用,但是并没有实现样式与结构完全分离

外部样式

写在**.css**文件里的样式,然后在HTML文件里引用,语法如下:

  • 在该文件目录创建一个**.css**后缀的文件

  • 在html文件进行引用

    • href文档路径:引入的文档来自哪里
    • rel关系:引入文档和当前文档的关系

    image-20240201103614031

特点

在实际开发中,我们用得最多的就是这种书写位置,引入外部样式,可以更好地将结构与样式分离

三种引入优先级

优先级规则:行内样式 > 内部样式 = 外部样式

内部样式和外部样式优先级一样,如果同时使用,后面的会覆盖前面的(简记:“后来者居上”)。

标签:优先级,入门,样式,概念,html,文档,css,CSS
From: https://blog.csdn.net/dongxiaod1/article/details/136706295

相关文章

  • 三种方式使用纯 CSS 实现星级评分
    本文介绍三种使用纯CSS实现星级评分的方式。每种都值得细品一番~五角星取自ElementPlus的svg资源<svgxmlns="http://www.w3.org/2000/svg"viewBox="0010241024"style=""><pathfill="currentColor"d="M283.84867.8......
  • CSS实际案例,布局结构
    目前自己的问题:1所有东西都想用div,比如头部几个导航,不是用几个div而是用ui,li。搜索框不是div套两个div,而是div套input,buttom。且h,p,ul,ol等这种块级元素,都可以直接设置height,width当盒子用。全用div他的语义就不好了。【靠经验】2看见盒子老想去设置宽高,很多时候子盒子都不用设......
  • 最详Hive入门指南
    本质就是一个hadoop的客户端,将HIveSQL转化成MapReduce程序一、Hive介绍&配置1、hive本质基于Hadoop的⼀个数据仓库⼯具,可以将结构化的数据⽂件映射为⼀张表,并提供类SQL查询功能。本质就是一个hadoop的客户端,将HIveSQL转化成MapReduce程序2、架构原理主要分为三......
  • Git详细入门笔记
    主要分为两个一个是可视化软件,一个就是鼠标右键选择GitBash一、可视化软件1、文件操作点击file选项,可以选择添加clone,也可以add或者newnew完文件之后,可以点击图形界面中的showinexplorer,直接进入文件夹在文件夹中操作,然后回到图形界面2、分支操作分支操作就......
  • 有趣的css - 暗黑模式切换开关
    大家好,我是Just,这里是「设计师工作日常」,今天分享的是用css打造一个切换界面暗黑模式的按钮开关,通过点击来切换太阳和月亮的图标。《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。目录整体效果核心代码html代码css部分代码完整代码如下html页面c......
  • [数字华容道] Html+css+js 实现小游戏
    [数字华容道]Html+css+js实现小游戏效果图代码预览在线预览地址代码示例<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>数字华容道</title> <style> h1{ text-align:center; } .box{ border:......
  • pcm5102芯片解析之基本概念
    一前记1在音频领域深耕,那就要不断的前行。最近有几个项目需要用到pcm5102这颗料,藉此机会,针对这个料进行深入的研究一下。做一一些简要的分析。二概念音频芯片的指标,其实,很多年都没啥变化了,唯一的问题就是这个应用形态有些变化。下面是该芯片的性能指标。 ......
  • 微服务,从放弃到入门
    微服务,从放弃到入门在软件开发的世界里,微服务已经逐渐成为一个热门的话题。它代表了一种将大型、复杂的应用程序分解为一系列小型、独立的服务的方法,每个服务都运行在自己的进程中,通过轻量级通信机制进行通信。尽管微服务架构带来了许多好处,但在学习和实践的过程中,我也曾经......
  • 【Python从入门到精通】函数详解
     【上图来源于网络图片】WhydoPythonprogrammerspreferdarkmode? Becauselightattractsbugs.Python的简洁性和易读性,认为这是吸引Python程序员的原因。【Python从入门到精通】专栏课程:1、【Python从入门到精通】认识Python2、【Python从入门到精通】变量&......
  • 鸿蒙开发入门实战案例-菜谱列表(附源码)
    昨天分享了鸿蒙的一些基础组件和布局方式,今天直奔主题,做一个菜谱列表,先看效果:这是实际开发中非常常见的列表样式,对初学者来说可能看起来有一些复杂,没关系,我们先从最简单的列表开始,一步一步实现它。昨天说过List列表组件的基本使用方式:List(){ListItem(){T......