【前端学习整理】CSS（1）：什么是CSS，CSS语法和运用

最新推荐文章于 2024-07-11 17:17:41 发布

梦叙

最新推荐文章于 2024-07-11 17:17:41 发布

阅读量327

点赞数

文章标签： CSS 前端

本文链接：https://blog.csdn.net/qq_43944712/article/details/88251543

版权

CSS is what？

什么是CSS
CSS的语法
如何运用CSS

网页的结构是需要搭建的，HTML相当于给了一个基础的雏形，而真正的网页包含了许多布局排版上的功夫，以及美观上的设计。

什么是CSS

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS可以直接影响HTML元素在网页上的外观,通过选择器选中HTML元素,更改HTML元素的样式已达到目的.

CSS的语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

h1{color: blue;font-size: 12px;}

上面开头部分的h1是选择器,选择HTML文件中所有的h1元素应用大括号内的样式
括号内内容为元素的styke属性,语法为样式属性:值结尾加’;'号,然后写下一个样式属性

如何运用CSS

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title>如何应用CSS</title>
   	<!-- CSS有三种应用方式
   		1.HTML元素内部使用style属性直接应用(此种方式优先级最高,其他方式对HTML元素)
   		2.在HTML头部使用style标签给HTML元素应用样式(优先级位居第二)
   		3.在外部创建CSS文件设置HTML元素样式，而后在HTML内引用。(优先级最低) -->
   	<style>
   		p{font-size: 14px;color: red;}
   		/* 这里是第二种应用方式,在HTML头部style标签内使用选择器选中元素修改属性 */
   	</style>
   	<link rel="stylesheet" href="../CSS/1.CSS说明.css">
   	<!-- 这是第三种应用方式，使用link进行外部引用，只要选中路径无误就可以应用。 -->
   </head>
   <body>
   	<div style="width:500px;height:500px;background: aqua;">
   		<!-- 这是第一种应用方式，直接在元素内使用style元素改变div的样式 属性原理以后说-->
   	</div>
   	<p>这个样式在HTML头部引用</p>
   		<!-- 这个元素被第二种方式修改了样式 -->
   	<h1>这个元素被第三种方式修改了样式</h1>
   </body>
</html>

网页效果如图：
在这里插入图片描述

CSS有三种应用方式
1.HTML元素内部使用style属性直接应用(此种方式优先级最高,其他方式对HTML元素)
2.在HTML头部使用style标签给HTML元素应用样式(优先级位居第二)
3.在外部创建CSS文件设置HTML元素样式，而后在HTML内引用。(优先级最低)

梦叙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端学习整理】CSS（1）：什么是CSS，CSS语法和运用

CSS is what？什么是CSSCSS的语法如何运用CSS网页的结构是需要搭建的，HTML相当于给了一个基础的雏形，而真正的网页包含了许多布局排版上的功夫，以及美观上的设计。什么是CSSCSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样...
复制链接

扫一扫