CSS概述及书写位置

最新推荐文章于 2023-10-31 08:49:42 发布

程序媛Render

最新推荐文章于 2023-10-31 08:49:42 发布

阅读量564

点赞数 3

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_46492364/article/details/114487388

版权

文章目录

CSS模块
一、css概述
二、css规则
总结

CSS模块

HTML部分就告一段落了，今天开始学习css啦，加油，相信努力不会被辜负。

一、css概述

发展过程：
在这里插入图片描述
css全称cascading style sheets，层叠样式表是一种表现HTML样式的计算机语言。静态的修饰网页，可配合各种脚本语言动态的对网页各种元素进行格式化。实现了网页的结构和样式分离，拯救了混乱的HTML。
层叠式：层叠性、继承性
样式：定义如何显示HTML元素，例如文本文字、背景、盒模型等

二、css规则

规则：选择器，一条或多条的声明
在这里插入图片描述
书写位置不同：内联式、内嵌式、外链式、导入式。

1.内联式

也叫作行内式，在HTML之上的style属性中书写css样式。所有的css样式属性总体组成标签的style属性的属性值。

代码如下（示例）：

<p style="font-size: 30px;">这是一段文字内容</p>

内联式的缺点：
（1）内联式必须写在HTML标签上，没有完全脱离HTML。
（2）css样式代码比较繁重，对结构解读存在麻烦。
（3）一个内联式的css代码只能给一个标签使用，如果多个标签有相同的样式，同样的css代码需要书写多次，增加代码量。
代码如下（示例）：

<p style="font-size: 30px;">这是一段文字内容</p>
<div style="font-size: 30px;">有一段文字</div>
<p style="font-size: 30px;">另一段文字</p>

2.内嵌式

书写位置：head标签内部有个style标签，style标签书写在title标签后面，所有的css标签写在style标签内部。
style标签属性type，属性值是text/css。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=de

最低0.47元/天解锁文章

程序媛Render

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS概述及书写位置

文章目录CSS模块一、css概述二、css规则1.内联式2.内嵌式3.外联式4.导入式5.代码的书写风格总结CSS模块HTML部分就告一段落了，今天开始学习css啦，加油，相信努力不会被辜负。一、css概述发展过程：css全称cascading style sheets，层叠样式表是一种表现HTML样式的计算机语言。静态的修饰网页，可配合各种脚本语言动态的对网页各种元素进行格式化。实现了网页的结构和样式分离，拯救了混乱的HTML。层叠式：层叠性、继承性样式：定义如何显示HTML元素，例.
复制链接

扫一扫