CSS篇一——（1）

最新推荐文章于 2022-12-15 17:39:11 发布

Regina_Cai

最新推荐文章于 2022-12-15 17:39:11 发布

阅读量656

点赞数

分类专栏： HTML&CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/Regina_Cai/article/details/127051174

版权

HTML&CSS 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

一、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>