CSS详细介绍

最新推荐文章于 2024-10-01 23:54:35 发布

云&雨

最新推荐文章于 2024-10-01 23:54:35 发布

阅读量1.9k

点赞数 2

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_67238428/article/details/124854668

版权

本文详细介绍了CSS的基础知识，包括语法规范、代码风格和选择器的分类，如标签选择器、类选择器和多类名。接着，文章探讨了CSS字体属性，如`font-weight`、`color`和`text-align`，并讲解了背景图片、元素显示模式和定位。此外，还提到了Emmet语法在HTML结构生成中的作用，以及CSS的三大特性：层叠性、继承性和优先级。最后，文章讨论了盒子模型，包括边框、内边距、外边距和浮动定位等概念。

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

CSS简介

一、CSS的语法规范

使用HTML时，要遵从一定的语法规范，CSS也是一样。

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

<!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: blue;
            /* 修改字体大小为15px */
            font-size: 15px;
        }
    </style>
</head>
<body>
    <p>我要修改p标签里文字的颜色为蓝色</p>
</body>
</html>

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

② 属性与属性值是以键值对的形式出现

③ 属性是对指定的对象设置的样式属性，例如：字体大小，文本颜色等

④ 属性与属性值之间用英文":"隔开

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

二、CSS代码风格

符合实际开发时的书写规范

1、样式格式书写

① 紧凑格式

<h1> {color: red; font-size: 15px;}

② 展开格式（推荐使用）

<h1> {
	color: red; 
	font-size: 15px;
	}

2、样式大小写：推荐选择器、属性名、属性值关键字全部使用小写进行编写，特殊情况除外。

3、空格规范

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

② 选择器和大括号中间保留空格

三、选择器的作用

选择器就是根据不同的需求把不同的标签选出来。简单来说，就是选择标签来使用的。

1、选择器的分类

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

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

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

1> 标签选择器

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

① 作用

标签选择器可以把某一类的标签全部选择出来

② 优点

能够快速为页面中同类型的标签统一设置样式

③ 缺点

不能设计差异化样式，只能选择全部的当前标签

<head>
<style>
        /* 选择器 {样式} */
        /* 也可以理解成：给谁修改样式 { 修改什么样式} */
        p {
     
            /* 修改颜色为蓝色 */
            color: blue;
            /* 修改字体大小为15px */
            font-size: 15px;
        }
</style>
</head>
<body>
    <p>我要修改p标签里文字的颜色为蓝色</p>
    <p>我要修改p标签里文字的颜色为蓝色</p>
</body>

2> 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

语法

<head>
<style>
	.green {
     
            color: aqua;
        	font-size: 15px;
        }

    .se {
     
        color: blue;
        font-size: 15px;
      }
</style>
</head>
<body>
	<ol>