CSS的基本用法

最新推荐文章于 2024-05-21 18:29:50 发布

浅浅心事有谁知i

最新推荐文章于 2024-05-21 18:29:50 发布

阅读量2.2k

点赞数 7

文章标签： css html

本文链接：https://blog.csdn.net/wzfi20042002/article/details/113069155

版权

**CSS的基本用法

css样式

样式是css最小单元语法，每个样式包括两部分内容：选择器和声明。
css样式基本结构

选择器（Selector）：选择器告诉浏览器该样式将作用于页面中的哪些对象，这些对象可以是某个标签、所有网页对象、指定class或ID值等。浏览器在解析这个样式时，根据选择器来渲染对象显示效果。
声明（Declaration）：声明可以有一个或无数个，这些声明命令浏览器如何去渲染选择器指定的对象。声明必须包括两个部分：属性和属性值，并用分号来标识一个声明的结束，在一个样式中最后一个声明可以省略分号。所有声明放在一对大括号里面。
属性（Property）：属性是css提供的设置好的样式选项。属性名是一个单词或多个单词组成，单词之间通过连字符相连。
属性值（Value）：属性值是用来显示属性效果的参数。她包括数值和单位，或者关键字。

任何语言都需要注释，HTML使用“ ”,而css使用“/注释语句/”。

body{/*页面基本属性*/
     font-size:12px;
     color:#CCCCCC;
}
/*段落基本属性*/
p{background-color:#FF00FF;}

css的应用

css样式代码必须保存在.css类型的文本文件中，或者放在网页内

行内样式
行内样式就是把css样式直接放在代码的行内标签中，一般放在标签的style属性中，由于行内样式直接插入标签中，是最直接的方式，但是修改不易。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="background-color: rgb(37, 206, 228);">行内元素，控制段落1</p>
    <h2 style="background-color: pink;">行内元素，h2标题</h2>
    <p2 style="background-color:rgb(37, 206, 228);">行内元素，控制段落2</p2>
</body>
</html>

效果示意图
2个p标签虽然内容不同，但是使用一样的背景色，但添加2次行内属性设置背景色，若后期修改是，需打开页面一个个修改，而且添加这么多行内样式，页面面积大，还会浪费服务器宽带和流量。

内嵌式
内嵌式通过将css写在网页源文件的头部，在和之间，该样式只能在此页使用，解决行内式多次书写的弊端。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    p{
        text-align: left;
        font-size: 16px;
        margin: auto;
        margin-bottom: 20px;
        text-indent: 2em;
    }
    </style>
</head>
<body>
    <p>《唐人街探案3》是由万达影视传媒有限公司、北京壹同传奇影视文化有限公司出品，陈思诚执导，王宝强、刘昊然领衔主演的悬疑推理喜剧片。</p>
    <P>该片讲述了“曼谷夺金杀人案”“纽约五行连环杀人案”后，“唐人街神探组合”唐仁，秦风被野田昊请到东京，调查一桩离奇的谋杀案的故事 。</p>
    <p>该片将于2021年2月12日在中国大陆上映 。</p>
</body>
</html>

显示效果
在这个例子中统一设置了p标签的属性，节约空间，减少代码量，也方便了修改。

链接式
链接式通过html的标签，将外部的样式文件链接到HTML的文档中，这是网络上网站最常用的方式，也最实用。这个方法将HTML和css完全分离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p>《唐人街探案3》是由万达影视传媒有限公司、北京壹同传奇影视文化有限公司出品，陈思诚执导，王宝强、刘昊然领衔主演的悬疑推理喜剧片。</p>
    <P>该片讲述了“曼谷夺金杀人案”“纽约五行连环杀人案”后，“唐人街神探组合”唐仁，秦风被野田昊请到东京，调查一桩离奇的谋杀案的故事 。</p>
    <p>该片将于2021年2月12日在中国大陆上映 。</p>
</body>
</html>

p{
    background: aliceblue;
    font-size: 18px;
    border-bottom: 3px dashed #18ebe0;
}

效果显示
链接式样式使css代码和HTML代码完全分离，实现结构和样式的分开，使HTML代码专门构建页面结构，而css负责美化工作。

css文件可以放在不同的html文件中，使网站所有页面样式统一，同时便于管理和修改，减少代码及维护时间。

初学过程中，我经常将行内样式和内嵌式混合使用，不美观也不简洁，需要多操作，养成书写代码的好习惯。
总结：行内样式最直接，但是代码多，浪费服务器；
内嵌式解决多次书写，但是只能在当前页面使用；
链接式使用最广泛，可以统一修改属性值，可在多个页面中使用。

浅浅心事有谁知i

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
5
评论
CSS的基本用法

**CSS的基本用法css样式样式是css最小单元语法，每个样式包括两部分内容：选择器和声明。选择器（Selector）：选择器告诉浏览器该样式将作用于页面中的哪些对象，这些对象可以是某个标签、所有网页对象、指定class或ID值等。浏览器在解析这个样式时，根据选择器来渲染对象显示效果。声明（Declaration）：声明可以有一个或无数个，这些声明命令浏览器如何去渲染选择器指定的对象。声明必须包括两个部分：属性和属性值，并用分号来标识一个声明的结束，在一个样式中最后一个声明可以省略分号。所有声
复制链接

扫一扫