web前端学习62-63（HTML的局限性，CSS，CSS语法规范，CSS代码风格）

香甜的甲基橙

于 2021-11-12 21:14:58 发布

阅读量608

点赞数 1

分类专栏： web前端基础学习笔记 css 文章标签：前端 html css3

本文链接：https://blog.csdn.net/weixin_51249285/article/details/121295809

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

css

22 篇文章 5 订阅

订阅专栏

本文介绍了CSS在美化网页和布局中的作用，对比了HTML的局限性，阐述了CSS作为网页的美容师如何提升网页设计。通过实例展示了CSS的基本语法，包括选择器和样式声明，并强调了遵循良好代码风格的重要性。总结了CSS的主要价值在于结构与样式的分离，使HTML专注于内容结构，而CSS负责视觉呈现。

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

文章目录

1. CSS简介

1. CSS简介

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

HTML的局限性
CSS-网页的美容师

1.1 HTML的局限性

说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如< h1>表明这是一个大标题，< p>表明这是一个段落，< img>表明这儿有一个图片，< a>表示此处有链接。
很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点:丑。

虽然HTML可以做简单的央视，但是很繁琐。

1.2 CSS-网页的美容师

CSS是层叠样式表(Cascading Style Sheets )的简称.有时我们也会称之为CSS样式表或级联样式表。
CSS是也是一种标记语言

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

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

总结：

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

1.3 CSS语法规范

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

在这里插入图片描述

选择器是用于指定CSS样式的HTML标签，花括号内式该对象设置的具体样式

eg：把段落标签p加上颜色，大小，一般写在head标签里面写，css写在style标签中；常用的网页元素写在body标签中。

    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样式} */
        p{
            color:red;
            /* 修改了文字大小为12像素 */
            font-size: 12px;
        }
    </style>

属性与属性值以”键值对“的形式出现（属性: 值;）
属性是对指定的对象设置的样式属性，例如：字体大小，文本颜色等
属性与属性值之前用英文”:“分开
多个”键值对“之间用英文”;“进行区分

font-size: 12px;

eg：

01-体验css语法规范.html

<!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>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样式} */
        p{
            color:red;
            /* 修改了文字大小为12像素 */
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>
</html>

网页显示：

在这里插入图片描述

1.4 CSS代码风格

养成良好的习惯去书写代码，优雅很重要。

样式格式书写

紧凑格式：一行（不直观，不使用）
展开格式：多行 √

样式大小写：采用小写√（特殊情况除外）
空格规范

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

香甜的甲基橙

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端学习62-63（HTML的局限性，CSS，CSS语法规范，CSS代码风格）

1. CSS简介CSS的主要使用场景就是美化网页,布局页面的.HTML的局限性CSS-网页的美容师1.1 HTML的局限性说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如< h1>表明这是一个大标题，< p>表明这是一个段落，< img>表明这儿有一个图片，< a>表示此处有链接。很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点:丑。虽然HTML可以做简单的央视，但是很繁琐。1.2 CSS-网页的美容师CSS是
复制链接

扫一扫

专栏目录