CSS基本简介及书写规范

最新推荐文章于 2022-07-13 08:43:06 发布

奶盖不加糖

最新推荐文章于 2022-07-13 08:43:06 发布

阅读量238

点赞数 1

文章标签： html css css3

本文链接：https://blog.csdn.net/qq_44156869/article/details/108549142

版权

CSS 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

文章目录

HTML的局限性

HTML非常单纯，只关注内容的语义。比如<h1>表明是一个大标题，<p>表明这是一个段落，<img>表明这有个图片，<a>表示此处有来链接。
很早的时候，世界的网站虽然有很多，但是他们有一个共同特点：丑。
虽然HTML可以做简单的样式，但是带来的是无尽的臃肿和繁琐。

CSS简介

CSS的主要使用场景就是美化网页，布局页面的。

CSS是层叠样式表 (Cascading Style Sheets) 的简称。有时我们称之为 CSS样式表或级联样式表。

CSS是一种标记语言。

CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS让我们的网页更加丰富多彩，布局更加灵活自如。

简单理解：CSS可以美化 HTML，让HTML更加漂亮，让页面布局更加简单。

总结：

1.HTML主要做结构，显示元素内容。
2.CSS美化HTML，布局网页。
3.CSS最大价值：由HTML专注做结构呈现，样式交给CSS即，结构和样式（CSS）相分离。

CSS的语法规范

使用HTML时，需要从一定的规范，CSS也是如此，要想熟练的应用CSS对网页进行修饰，首先需要了解CSS样式规则。

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

在这里插入图片描述

选择器是用于指定CSS样式的 HTML 标签，花括号内是对该对象设置的具体样式。
属性和属性值以 “键值对” 的形式出现。
属性是对指定对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性之间用英文 " : " 分开。
多个 “键值对” 之间用英文 " ； " 进行区分。

所有样式，都包括在<style>标签内，表示是样式表。<style>一般写到 </head>上方。

<head>
    <style>
        h4 {
            color: blue;/*字体颜色为蓝色11*/
            font-size: 100px;/*字体为100像素*/
        }
    </style>
</head>

<body>
    <h4>不想秃头</h4>
</body>

CSS代码风格

以下代码书写风格不是强制规范，而是符合实际开发书写方式。

样式格式书写

紧凑格式

h3 { color: deeppink;font-size: 20px;}

展开格式

 h3 {
            color: deeppink;
            /*字体深粉色*/
            font-size: 20px;
            /*字体大小为20像素*/
        }

推荐第二种格式，因为更加直观

样式大小写

小写

h3 {
           color: pink;
        }

大写

  H3 {
           COLOR:PINK;
        }

推荐样式选择器，属性名，属性值关键字全部用小写字母，特殊情况除外。

空格规范

h3 {
           color: pink;
        }

1.属性值面前，冒号后面，保留一个空格。
2.选择器（标签）和大括号中间保留空格。

奶盖不加糖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS基本简介及书写规范

文章目录HTML的局限性CSS简介总结：CSS的语法规范CSS代码风格样式格式书写紧凑格式展开格式样式大小写空格规范HTML的局限性HTML非常单纯，只关注内容的语义。比如<h1>表明是一个大标题，<p>表明这是一个段落，<img>表明这有个图片，<a>表示此处有来链接。很早的时候，世界的网站虽然有很多，但是他们有一个共同特点：丑。虽然HTML可以做简单的样式，但是带来的是无尽的臃肿和繁琐。CSS简介CSS的主要使用场景就是美化网页，布局页面的。
复制链接

扫一扫

专栏目录