CSS介绍

最新推荐文章于 2025-03-02 18:55:30 发布

回头科科

最新推荐文章于 2025-03-02 18:55:30 发布

阅读量2.7k

点赞数 3

分类专栏： CSS 文章标签： python 开发语言 html 前端

本文链接：https://blog.youkuaiyun.com/jcf52/article/details/123652757

版权

CSS 专栏收录该内容

7 篇文章

订阅专栏

3.2.1背景色 background-color

3.2.2背景图片 background-image

3.2.3 设置背景图片的平铺方式 background-repeat

3.2.4设置背景图片的位置 background-position

四.边框样式

五.文本样式

六.段落样式

一.css 介绍

层叠样式表，是一种样式表语言，用来描述HTML和XML文档的呈现。
随着HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML越来越杂乱
HTML 页面也越来越臃肿，CSS便随之诞生
CSS 用于简化HTML标签，把关于样式部分的内容提取出来，进行单独的控制，使结构与样式分离开发。

CSS 是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，和HTML 类似
CSS也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

重点：

CSS也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言
CSS2.0的诞生才真正地把结构与样式进行分离，从而得到快速的发展

二.CSS基本语法

2.1css 引入方式

给HTML标签添加CSS样式总共有三种样式：行间样式、 内部样式和外部样式三种方式

2.1.1行间样式引入

在HTML标签中添加style属性来设置CSS。语法如下：

style="属性1:值1;属性2:值2;属性3:值3;"

CSS样式由属性和值两部分组成，通过冒号的方式进行连接。多组样式之间使用分号（;）进行分
割。一般规范会在分号后面加一个空格，这样更加方便阅读代码。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 50px;height: 50px;background-color: red"></div>
   
</body>
</html>

结果：

在这里就有了<div>的样式更改：：：：：：：记住

注意：

像素单位
像素单位用px表示，全称 “pixel”。px就是一张图片中最小的点，或者是计算机屏幕最小的点。
百分比单位
百分比单位是一个相对单位，经常在嵌套标签中使用。假如给子标签（也叫内层标签）设置百分比单位，那么这个单位就是相对于父标签（也叫外层标签）的尺寸大小。

例子：百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 50px;height: 50px;background-color: red">
    <div style="width:50%; height:50%; background-color: black"></div>
        </div>
</body>
</html>

结果：

2.1.2内部引入方式

内部引入方式是通过<style>标签添加css样式，它与行间样式的区别是内部引入方式是通过
<style>标签而不是style属性。<style>标签一般情况下都会添加到<head>标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #s1{
            background-color: yellow;
            width: 52px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div style="width: 50px;height: 50px;background-color: red">
    <div style="width:50%; height:50%; background-color: black"></div>
    </div>
    <div id="s1"🆔>rgsdgfswfsf</div>
</body>
</html>

内部引入CSS样式，也遵循一定的CSS样式规范，语法格式如下：

选择器 {属性1：值1; 属性2：值2; }