CSS学习笔记1-CSS初识

最新推荐文章于 2024-07-24 14:20:14 发布
最新推荐文章于 2024-07-24 14:20:14 发布
阅读量131 收藏
点赞数
分类专栏： # CSS 文章标签： css html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/emmm520/article/details/119722049
版权

CSS学习笔记1——CSS初识

CSS简介

CSS ：层叠样式表 (Cascading Style Sheets)

CSS用来设定html标签的样式（字体、颜色、边距、高度、宽度、背景图片、网页定位等）

如果严格划分的话，CSS也属于一门编程语言，只不过这门编程语言是用来辅助html的

CSS发展历程

  1. 1996年CSS1.0发布
  2. 1998年CSS2.0发布
  3. 2004年CSS2.1发布
  4. 2010年CSS3.0发布

CSS的三种书写方式

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：

内联样式(行内样式)

使用样式（style）属性。每个标签都有一个style属性，可以在style属性中书写css样式。

此种样式不建议使用。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 < style> 标签在文档头部定义内部样式表。

外部样式表

当需要书写大量的CSS样式时，为了防止html文件的臃肿，可以将css样式单独放到一个文件中去。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

案例演示

内联样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css内联样式</title>
</head>
<body>
	<center>
	<!-- 
		font-size设置字体大小
		color设置颜色
		font-weight设置字体粗细，100~900,也可以是normal，bold，bolder，lighter等属性
	-->
	<p style="font-size: 24px;color: black;font-weight: bolder">静夜思</p>
	<p>唐&nbsp;李白</p>
	<!-- 
		font-style设置字体，italic代表斜体 
	-->
	<p style="font-size: 16px;color: green;font-style: italic">床前明月光，疑是地上霜。</p>
	<p style="font-size: 16px;color: green;font-style: italic">举头望明月，低头思故乡。</p>
	<!-- hr 水平分割线 -->
	<hr>
	</center>
</body>
</html>

显示效果为：

内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css行内样式表</title>
	<style type="text/css">

		/*这是css的注释写法，和html不一样*/
			/*在html文件中，id的属性值必须唯一，id值不能够重复*/
			/*在html文件中，class属性值可以重复*/

		#title{
			font-size: 24px;
			color: black;
			font-weight: bolder;/*加粗*/
		}
		/*如果是title，则是#，如果是class则是.*/
		.c1{
			font-size: 16px;
			color: green;
			font-style: bolder;
		}

	</style>
</head>
<body>
	<center>
	<!-- 
		font-size设置字体大小
		color设置颜色
		font-weight设置字体粗细，100~900,也可以是normal，bold，bolder，lighter等属性
		font-style设置字体，italic代表斜体
	-->
	<p id="title">静夜思</p>
	<p>唐&nbsp;李白</p>
	<p class="c1">床前明月光，疑是地上霜。</p>
	<p class="c1">举头望明月，低头思故乡。</p>
	<!-- hr 水平分割线 -->
	<hr>
	</center>
</body>
</html>

显示效果为：
在这里插入图片描述

外部样式表

如图：在css目录下创建1.css文件
在这里插入图片描述

放入如下代码：

#title{
			font-size: 24px;
			color: black;
			font-weight: bolder;/*加粗*/
		}
		
		/*如果是title，则是#，如果是class则是.*/
.c1{
		font-size: 16px;
		color: green;
		font-style: bolder;
	}

创建css-demo03.html文件，文件中的内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css外部样式表</title>
	<!-- 
		使用link标签，href属性引入.css文件
	 -->
	 <link rel="stylesheet" type="text/css" href="./css/1.css">
</head>
<body>
	<center>
		<p id="title">静夜思</p>
		<p>唐&nbsp;李白</p>
		<p class="c1">床前明月光，疑是地上霜。</p>
		<p class="c1">举头望明月，低头思故乡。</p>
	</center>
</body>
</html>

显示效果为：
在这里插入图片描述

可以看到，三种书写方式，效果都是一样的。

糯米味儿的粽子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS学习笔记1——导入、选择器、CSS优先级
jgjfror的博客
03-07 210
语法讲解 CSS的三种导入方式 行内导入 <h1 style="color: red">实验文字</h1> 内部导入 <head> <style> h1{ color: yellow; } </style> </head> <body> <h1>实验文字</h1> </body> 外部导入 css文件 h1{
CSS基础学习笔记
VivianHope的专栏
05-22 778
1.CSS样式优先级    元素上的样式> style中嵌入的样式>外部样式文件，其实不太准确，应当是当嵌入式出现在外部样式的后面时，按照style出现的顺序来渲染的，后面出现的会覆盖前面的。    同一个样式文件中，元素选择器越精确优先级越高，id选择器(100)>类选择器(10)>元素选择器(1)，根据权值(累计值)来确定使用哪种样式（继承的权值最低）；权值相同，出现越靠后的优先级越高；
css3+js 粽情端午
yang_tang的博客
05-28 1192
根据慕课网上的案例写了粽情端午，对css3动画掌握了更深，也对js加一步学习了，以我目前的水平可能做不了什么好的，但是写完这个之后，一直在尝试着写另一个css3的案例，就是不知道能不能写完了。发现的问题还是js掌握的不好，在学习css3的同时，也要加一步对js进行复习。以下是我模仿的粽情端午的案例代码： 粽情端午 @-webkit-keyframes rock{
CSS学习笔记（初识）
2401_84434442的博客
06-16 807
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》rgin内盒尺寸计算（元素实际大小）Element Height = content height + padding + border （Height为内容高度）
bootstrap学习笔记之初识bootstrap
01-19
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集，我们可以用bootstrap搭建出简洁，清新的网站或软件界面，有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了。...
Extjs学习笔记之一 初识Extjs之MessageBox
12-09
在初识ExtJS时，创建一个新的目录`my`用于存放所有样例文件是很好的习惯，这有助于保持项目组织有序。在`Hello World`示例中，我们看到HTML文档包含了几个重要的引用，包括ExtJS的基础样式表`ext-all.css`和...
重新整理了一遍,花了小半月终于将基础Html+css系统的学完，期间的学习笔记+中文手册都在这，分享..
01-08
三.CSS初识 四.基础选择器 五.后代选择器 六.display转换模式 七.CSS 背景(background) 八.选择器优先级 九.盒子边框（border） 十. 内边距（padding） 十一.外边距(margin) 十二.浮动(float) 十三定位(position) 十...
韩顺平 轻松搞定网页设计 CSS部分笔记
07-03
1. 初识 CSS - 介绍：CSS是一种样式表语言，用于描述HTML或XML（包括SVG、XHTML等）文档的呈现。它的主要任务是分离内容和表现，使得网页更具可维护性和可扩展性。 - 原理图：CSS通过将样式规则与HTML元素关联，...
css气泡背景特效
u011626414的专栏
07-23 403
动画是可选的，并且它实际上并不创建额外的气泡效果，而只是让整个背景有微妙的移动。如果你想要更多的气泡，并且希望它们随机出现和消失，你可能需要使用JavaScript或更复杂的CSS动画来生成它们。此外，你可以通过添加更多的伪元素、改变它们的尺寸、颜色、动画延迟和持续时间等来创建更复杂和多样化的气泡效果。要创建一个CSS气泡背景特效，你可以使用CSS的伪元素（属性来创建圆形或椭圆形的“气泡”，以及。属性来设置背景和动画效果。请注意，上述示例中的。
【前端学习笔记】CSS基础一
qq_46056318的博客
07-24 843
一、什么是CSS 1.CSS 介绍 CSS（Cascading Style Sheets，层叠样式表）是一种用来控制网页布局和设计外观的样式语言。它使得开发者可以分离网页的内容（HTML）和表现形式（样式），提高了内容的可访问性，提供了更强的灵活性和控制性，也使得网页的维护和修改变得更加容易。 CSS 如何与 HTML 一起工作： 结构与样式分离： HTML 用于构建网页的结构，定义网页的内容，如文本、图片、链接等。 CSS 用于定义这些结构的表现形式，比如布局、颜色、字体大小和样式等。 引入方
【css】实现扫光特效
weixin_57208584的博客
07-23 347
对于要重点突出的元素，我们经常可以看到它上面打了一个从左到右的斜向扫光，显得元素亮闪闪的！类似于下图的亮光动效。
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 1687
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
[css3] 如何设置边框颜色渐变
qq_14993591的博客
07-22 778
【代码】[css3] 如何设置边框颜色渐变。
【SCI顶级】金豺算法GJO-CNN-LSTM-Multihead-Attention温度预测【含源码 5741期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
2023睿抗机器人开发者大赛.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
【JCR一区级】飞蛾扑火算法MFO-CNN-LSTM-Attention故障诊断分类预测【含源码 5668期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
SCI一区】蚁狮算法ALO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5651.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
C++头文件1.0（标准化头文件，入门者必背）
最新发布
07-30
C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）C++头文件1.0（标准化头文件，入门者必背）
CSS学习笔记：WEB开发中的样式精华
"很好的css学习笔记，pdf格式（64页），包含了CSS+DIV的学习内容，适合初学者逐步了解和掌握CSS技术。" 这篇CSS学习笔记详细介绍了CSS的基础知识，包括其起源、作用以及如何改善HTML页面的设计。CSS，即层叠样式表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值