CSS篇一——（1）

lewis 1年前 (2024-04-17) 阅读数 8 #技术

一、CSS简介

CSS是层叠样式表（Cascading Style Sheets）的简称，有时也称之为CSS样式表或级联样式表。

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

CSS可以美化HTML，使其更加漂亮，布局也更加简单。

总结：

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

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

基本语法规范：CSS样式通过<style></style>标签在<head></head>中描述样式；

<style>
        /* 选择器 {样式} */
        /* 给谁改样式 {改什么样式} */
        /* 举例 */
        p {
            color: red;    
        }
    </style>

注意：

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

2.属性和属性值以"键值对"的形式出现；

3.属性时对指定对象设置的样式属性，例如字体大小、文本颜色等；

4.属性和属性值之间用英文":"分开；

5.多个"键值对"之间用英文";"进行区分。

代码示例：

<!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>CSS语法规范</title>
    <style>
        /* 选择器 {样式} */
        /* 给谁改样式 {改什么样式} */
        p {  /* 举例 */
            color: red;
            /* 修改了文字大小为30像素，数值后面一定要"px",表示像素 */
            font-size: 30px; 
        }
    </style>
</head>
<body>
    <p>CSS语法规范学习</p>
</body>
</html>

2. CSS 代码风格2.1 样式格式书写

1.紧凑格式如：

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

2.展开格式（推荐）如：

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

2.2 样式大小写

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

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

2.3 空格规范

1.属性值前面，冒号后面，保留一个空格

2.选择器（标签）和大括号中间保留空格

二、CSS基础选择器1. CSS选择器的作用

选择器（选择符）就是根据不同的需求把不同的标签选出来这就是选择器的作用。简单说，就是选择标签用的。

2. 选择器的分类

选择器分为基础选择器和复合选择器两个大类

1.基础选择器是由单个选择器组成的

2.基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器

3. 标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

语法格式：

标签名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
  ···
}

作用：标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签；

优点：能快速的为页面中的同类型标签统一设置样式；

缺点：不能设计差异化样式，只能选择全部的当前标签。代码示例：

<!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>基础选择器之标签选择器</title>
    <style>
        p {
            color: green;
        }
        div {
            color: pink;
        }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>   
</body>
</html>

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：Sora模型怎么处理语言间的差异下一篇：在CentOS7中，可以使用以下方法来修改文件名

CSS篇一——（1）

版权声明

作者文章