Css简介

目录

Css简介

[CSS 导入 HTML有三种方式](#CSS 导入 HTML有三种方式)

内联样式

内部样式

外部样式

[CSS 选择器](#CSS 选择器)

元素选择器

id选择器

类选择器


Css简介

CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述HTML或XML等文档在屏幕、纸张、音频、或其他媒体上的显示样式的语言。通过使用CSS,可以将文档的结构与样式分离,从而提高文档的可读性、灵活性和可维护性。

CSS主要用于控制文档的布局和样式,如字体、颜色、间距、背景、边框等。它通过选择器(Selector)来选择要应用样式的元素,并通过声明块(Declaration Block)来设置样式属性的值。

CSS具有层叠性,即当多个样式规则作用于同一个元素时,会根据优先级和特定的规则来决定最终的样式。CSS还支持继承性,即某些样式规则可以继承到子元素上,从而实现样式的复用和简化。

CSS可以通过内联样式、内部样式表和外部样式表的方式来定义和引用样式。内联样式直接写在HTML元素的style属性中,适用于个别元素的样式设置;内部样式表写在HTML文档的<head>标签内,适用于整个文档的样式设置;外部样式表以.css文件形式存在,可以通过<link>标签引用到HTML文档中,适用于多个文档的样式设置。

CSS的语法简洁而灵活,可以通过选择器的嵌套、组合和伪类等特性来选择和操作元素。它的功能强大,可以实现复杂的布局和交互效果。同时,CSS还可以与JavaScript等脚本语言结合使用,实现更丰富的页面效果和动态交互。

CSS 导入 HTML有三种方式

1、内联样式:在标签内部使用style属性,属性值是css属性键值对

2、内部样式:定义<style>标签,在标签内部定义css样式

3、外部样式:定义link标签,引入外部的css文件

内联样式

<div style="color: red">Hello CSS!</div>

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div style="color: red">HelloCss!</div>
</body>
</html>

可以看到在浏览器中显示的是这样的

内部样式

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
    <span>hello css</span>
</body>
</html>

浏览器中显示如下

外部样式

没写Css代码时,他是没有任何样式的,下面我们在外部写一个Css文件

再在html中用link标签引入外部样式

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>
    <link rel="stylesheet" href="../Css/demo.css">
</head>
<body>
    <span>hello css</span>

    <p>hello css</p>
</body>
</html>

CSS 选择器

概念:选择器是选取需设置样式的元素(标签)

分类:

  1. 元素选择器
  2. id选择器
  3. 类选择器

元素选择器

div{color: red;}

id选择器

#name{color: red;}

<div id="name">hello css</div>

id选择器的id唯一

两个同名就会报错

类选择器

.cls{color: red;}

<div class="cls">hello css</div>

类选择器就不会发生两个同名报错

推荐大家去一个网站可以学习

CSS 教程 (w3school.com.cn)

这一期就到这里啦,继续努力哦!!!

相关推荐
qq_3643717238 分钟前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森2 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
y先森7 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy7 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189117 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿8 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡9 小时前
commitlint校验git提交信息
前端
虾球xz9 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇9 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒9 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript