CSS概述及书写位置

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

程序媛Render

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

阅读量583

点赞数 3

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

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

版权

这篇博客介绍了CSS的四种规则：内联式、内嵌式、外联式和导入式，强调了它们的书写位置和优缺点。CSS作为表现HTML样式的语言，通过层叠性和继承性实现样式控制。大型项目通常使用外联式以实现样式和结构的完全分离，而小型案例可能更适合内嵌式。

摘要由CSDN通过智能技术生成

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=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* css规则 选择器 属性*/
        p,div{

最低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元素，例.
复制链接

扫一扫

专栏目录