CSS入门

已于 2024-10-07 22:05:23 修改
阅读量610 收藏 11
点赞数 12
分类专栏： 前端 文章标签： css tensorflow 前端
于 2024-10-07 21:54:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/scj1022/article/details/142747305
版权

文章目录

CSS入门

一、CSS概述

1、概述

CSS（Cascading Style Sheet）层叠样式表，用于美化页面

  • 层叠样式：对同一个标签，添加多个不同的样式，所有样式会叠加在一起展示出效果。

2、CSS的作用

HTML 标签也有属性，为什么还要 CSS ？

  • CSS 可以给任意标签添加样式（可以实现 HTML 做不到的效果）
  • 解耦（让 HTML 专注于网页结构搭建，CSS 专注于样式效果）

CSS 实现了样式与内容的分离，提高了显示效果和样式的复用性。

3、初体验

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>CSS初体验</title>
        
        <!-- CSS样式 -->
        <style>
            /* 一号标题蓝色 */
            h1 {
                color : blue;
            }
            /* div标签内容绿色，大小40px */
            div {
                color: green;
                font-size: 40px;
            }
            /* span标签内容红色，大小30px */
            span {
                color : red;
                font-size: 30px;
            }
        </style>
    </head>
    
    <body>
        <h1>标题</h1>
        <div>div1</div>
        <div>div2</div>
        <span>span1</span>
        <span>span2</span>
    </body>
    
</html>

在这里插入图片描述

4、CSS基础语法

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>CSS基础语法</title>

        <style>
            span {
                color : red;
                border: 1px solid blue;
                font-size: 50px
            }
        </style>
    </head>

    <body>
        <span style="color: red;font-size: 50px">span</span>
        <div style="border: 10px green dashed;font-size: 50px">div</div>
    </body>
</html>

CSS 基本语法：

  • 样式名 和 样式值 之间 以 冒号 分隔。
  • 一个样式名 可以跟 多个样式值，以 空格 分隔。
  • 多个样式之间，以 分号 分割。

4、HTML引入CSS

CSS有自己单独的语法，但是必须要引入到HTML中才能使用。一般有以下三种方式：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>HTML引入CSS</title>

        <!-- 1. 内部样式：通过<style>标签指定CSS样式（只对当前HTML生效） -->
        <style>
            span {
                font-size: 40px;
            }
        </style>

        <!--
            2. 外部样式：单独的编写一个CSS文件，通过<link>标签引入到HTML中（复用性更好，其他HTML也可以引入）
				1）rel  表明引入的是一个css文件
				2）href 指定引入的css文件的位置（支持 远程路径 和 本地路径）
		-->
        <link rel="stylesheet" href="./commonCss.css">
    </head>

    <body>
        <!-- 3. 行内样式：每个标签都有style属性，可以指定CSS样式（只对当前标签生效） -->
        <span style="font-size: 30px;color: red">span1</span> <br>

        <span>span2</span> <br>
        <span>span3</span> <br>
    </body>
</html>

/* 这是上面引入的commonCss.css */
span {
    color : blue;
    font-size: 150px;
}
  • 优先级：
    • 行内 > 内部 = 外部 （优先级低的样式会被优先级高的覆盖，一样的优先级看先后）
    • 浏览器加载网页从上至下加载，属性相同会覆盖（后面的覆盖前面的），不相同会叠加。
  • 位置：
    • style标签和link标签可以放在html中任意位置，一般放head标签内。

二、选择器 ⭐️⭐️⭐️

选择器 selector：

  • 格式：选择器 {css样式}
  • 作用：通过选择器，选中指定的标签，为选中的标签添加css样式

1、基本选择器

包括 标签选择器、id选择器、class选择器

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
        <style>
            /* 1. 标签选择器：选中指定标签（格式：标签名） */
            div {
                color: red;
                font-size: 30px;
            }

            /* 2. id选择器：选中指定id的标签（格式：#id） */
            #boss{
                color: blue;
            }

            /* 3. class选择器：选中指定class的标签（格式：.class值） */
            .female{
                color: green;
            }
            .hero{
                font-size: 50px;
            }
        </style>
    </head>

    <body>
        <div>div</div>

        <!-- 每个标签都有id属性，id值在当前html中唯一 -->
        <span id="boss" class="female">灭霸</span>

        <!-- 每个标签都有class属性，class值在当前html中可以重复 -->
        <span class="female">迪丽热巴</span>
        <span class="female">古力娜扎</span>

        <!-- class属性可以设置多个值，以 空格 分隔 -->
        <span class="hero female">黑寡妇</span>
        <span class="hero male">钢铁侠</span>
        <span class="hero male">蜘蛛侠</span>
    </body>
</html>

在这里插入图片描述

2、扩展选择器

扩展选择器：基本选择器延伸出来的选择器，在某些场景下，用基本选择器太麻烦。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>扩展选择器</title>

        <style>
            /* 1. 子层选择器：选中父选择器中的所有子孙选择器（格式：父选择器 子选择器） */
            #mydiv span {
                color: red;
            }

            /* 2. 下级选择器：选中父选择器中的下一级子选择器（格式：父选择器 > 子标签） */
            #mydiv > span {
                font-size: 50px;
            }

            /* 3. 组合选择器：选中多个选择器（格式：选择器1, 选择器2...） */
            h1, h2, h3 {
                color: blue;
            }

            /* 4. 属性选择器：选中符合属性值规定的选择器（格式：选择器[属性名=属性值]） */
            input[type = 'text'] {
                background-color: pink;
            }
        </style>
    </head>

    <body>
        <div id="mydiv">
            <span>div下的span1</span>
            <div>
                <span>div下的div下的span</span>
            </div>
            <span>div下的span2</span>
        </div>

        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        
        <input type="text" placeholder="文本">
        <input type="password" placeholder="密码">
        <input type="text" placeholder="文本">
    </body>
</html>

在这里插入图片描述

3、超链接选择器

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>超链接选择器</title>
        <style>
            /* 所有未被访问的超链接 */
            a:link{
                color: green;
            }
            /* 鼠标悬停在超链接上时的状态 */
            a:hover{
                color: yellow;
            }
            /* 超链接在被点击并处于活动状态时的样式 */
            a:active{
                color: red;
            }
            /* 已被访问过的超链接 */
            a:visited{
                color: grey;
            }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">百度一下，你就完蛋</a> <br>
        <a href="http://www.baidu.com">百度一下，你就完蛋</a> <br>
        <a href="http://www.baidu.com">百度一下，你就完蛋</a> <br>
    </body>
</html>

三、样式权重问题

当多个规则适用于同一个元素时，CSS 会根据权重来确定使用哪个样式。权重较高的样式会覆盖权重较低的样式。

  • 权重由选择器的类型和数量决定。

1、权重计算规则

CSS 的权重可以分为四个部分，通常用四个数字表示（a, b, c, d）：

  1. a：行内样式的数量（例如：style="..."）。行内样式的权重最高。
  2. b：ID 选择器的数量（如 #id）。
  3. c：类选择器、伪类选择器、属性选择器的数量（如 .class、:hover、[type="text"]）。
  4. d：元素选择器、伪元素选择器的数量（如 div、p、::before）。

2、权重示例

以下是一些选择器及其对应的权重值：

style="color:blue;"	 (1, 0, 0, 0)	权重 1000
#header				 (0, 1, 0, 0)	权重 100
.menu				 (0, 1, 0, 0)	权重 100
div					 (0, 1, 0, 0)	权重 100

3、具体示例

/* 权重 100 */
#main {
    background-color: red;
}

/* 权重 10 */
.container {
    background-color: blue;
}

/* 权重 1 */
div {
    background-color: green;
}

/* 行内样式，权重 1000 */
<div id="main" style="background-color: yellow;">Hello</div>

在这个例子中，div 的背景颜色将被黄色覆盖，因为 行内样式 的权重最高。

4、 !important

使用 !important 可以强制某个规则获得更高的优先级，但应谨慎使用，因为这会影响代码的可维护性。

/* 权重 100 */
#main {
    background-color: red !important; /* 将覆盖其他所有相同元素的颜色样式 */
}

四、CSS常用样式

1、字体和文本属性

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>字体和文本属性</title>
        <style>
            div {
                /* 字体颜色 */
                color : green;
                /* 字体大小 */
                font-size: 20px;
                /* 行高 */
                line-height: 40px;
                /* 字体加粗 */
                font-weight: bold;
                /* 字体格式：楷体 */
                font-family: Kai,serif;
            }
            a {
                /* 倾斜 */
                font-style: italic;
                /* 隐藏下划线 */
                text-decoration: none;
            }
        </style>
    </head>

    <body>
        <div>
            <p>
                <a href="#"> 学习的误区：</a><br/>
                眼睛：看了一遍记住了<br/>
                耳朵：听了一遍明白了<br/>
                脑子：想了一遍搞懂了<br/>
                手：你们会个屁！^_^ <br>
            </p>
        </div>
    </body>
</html>

在这里插入图片描述

2、背景属性

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>背景属性</title>
        <style>
            body{
                background-color: pink;
                background-image: url("../img/a.jpg");
                /* 背景图片不重复显示。这意味着当页面大小大于背景图片时，背景图片只会显示一次，而不会平铺 */
                background-repeat: no-repeat;
                /* 背景图片的位置偏移，水平方向偏移 10px，垂直方向偏移 20px */
                background-position: 10px 20px;
            }
        </style>
    </head>
    <body></body>
</html>

在这里插入图片描述

3、显示属性

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>显示属性</title>

        <style>
            span{
                /* 自动换行 */
                display: block;
            }
            div{
                /* 不自动换行 */
                display: inline;
            }
            ul{
                /* 隐藏 */
                display: none;
            }
        </style>

    </head>
    <body>
        <span>换行span1</span>
        <span>换行span2</span>

        <div>不换行div1</div>
        <div>不换行div2</div>

        <ul>
            <li>美的</li>
            <li>苏宁</li>
            <li>格力</li>
        </ul>
    </body>
</html>

在这里插入图片描述

4、浮动属性

打破常规，让div也能变小（实际大小跟 宽和高）

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>浮动属性</title>
        <style>
            .box {
                width: 150px;
                height: 150px;
                border: 1px solid red;
                text-align: center;
                /* 向右浮动：元素将会脱离正常的位置，向右浮动，直到碰到父容器的边界或者其他浮动元素为止 */
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="box" id="long">左青龙</div>
        <div class="box" id="hu">右白虎</div>
        <div class="box">最后砍成米老鼠</div>
    </body>
</html>

在这里插入图片描述

五、盒子模型

在 html 中，所有的标签都可以看成一个盒子。

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style>
            div {
                /* 边框 */
                border: 1px solid green;
                /* 宽 */
                width: 400px;
                /* 高 */
                height: 200px;
                /* 内边距：边框到内容的距离 */
                padding-left: 20px;
                /* 外边距：边框到外标签的距离 */
                margin: 10px;
            }
        </style>
    </head>
    
    <body>
        <div>
            窗前明月光
        </div>
    </body>
</html>

在浏览器 F12 可以看一下

在这里插入图片描述

scj1022
关注
专栏目录
CSS入门教程
打代码是一天，不打代码也是一天
04-04 3259
CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式CSS写在一个单独的文件中，通过link标签在网页中引入 2.2.2 内部样式 CSS写在网页的head标签中，用style标签包裹 2.2.3 行内样式 CSS写在标签的style属性中 三种CSS样式引入方式的区别选择器，就是选取（查找）需要设置样式元素的方式 2.3.1 元素选择器 通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式 小结：1、无论嵌套多少层，只要元素名称相同都会被找到通过类
CSS入门源代码 CSS入门源代码
05-20
这个压缩包文件“CSS入门源代码”提供了一些关于CSS基础和进阶知识的学习资源，主要包括以下几个方面： 1. **CSS选择器**：CSS选择器是用于选取HTML或XML文档中的元素的关键工具。基本选择器包括标签选择器（如`<p>...
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS入门 超详细
weixin_55816781的博客
04-12 7802
CSS 一基础认知 1.1：css的介绍 css：层叠样式表 css作用：给页面中的HTML标签设置样式 1.2css语法规则 写在哪里 css写在style标签中，style标签一般写在head标签里面，title标签下面 样式： 选择器{ 属性名:属性值; } 1.3css初体验 常见属性： color：文字颜色 font-size:字体大小 background-color:背景颜色 width:宽度 height：高度 <!DOCTYPE html> <html lang="e
TailWindCSS入门
cccdf_jjj的博客
06-15 6270
上一篇文章我们说过了如何搭建项目以及引入TailWindCSS，这篇文章我们说一下如何使用它，刚看到的时候我对这些缩写感觉很迷茫呀，官网我也没找到如何能知道具体对应的都是撒意思，后面找到一片天比较详细的介绍的文章，认真研究了一下，文章我会放在本文的最末尾。好啦话不多说，开始吧！1.screens(也可以自定义媒体查询屏幕的宽度) 2.颜色 一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，green： 3.纵横比--aspect 4.容器--container 6.列--co.
css入门学习
山有木兮
06-25 4077
学过前端的人，对HTML语言一定不会感到陌生，因为它是前端设计最基本的工具。然而，随着网站越来越复杂，网站的维护变得越来越重要，对设计师的要求也越来越高。
头歌-CSS入门
somewon的博客
03-06 8388
四川师范大学 CSS 头歌
CSS入门使用
zz14664656的博客
12-15 1062
引入CSS的三种方式其优先级：行内样式 > 内部样式 > 外部样式。
Tailwind CSS快速入门
知识点沉淀包括不限于前端
05-24 1651
Tailwind css 对比传统css css in js 安装流程 书写技巧 速查手册
Tailwindcss 入门
weixin_45932157的博客
06-20 791
Tailwindcss 是一个功能类优先的 CSS 框架，通过 flex, pt-4, text-center 和 rotate-90 这种原子类组合快速构建网站，而不需要离开你的 HTML。它与常规的 Bootstrap、Bulma 和 Material UI 不同之处在于没有提供预设的组件，比如：按钮、菜单和面包屑等。我们这里使用的是 V3 版本的 CDN（不推荐），若想配合构建工具看看官网如何使用的。V2 的 CDN 是引入一个 CSS 文件，而 V3 引入的是一个 script。
css入门教程之学习网页布局(1)
12-11
在CSS入门教程中，学习网页布局是至关重要的一步。网页布局指的是通过CSS控制网页中各个元素的显示位置，使得整个页面结构清晰、美观且易于阅读。对于初学者来说，可能会误以为布局是创建网页的第一步，实际上，一个...
css入门入门入门入门
05-23
01_CSS快速入门.mp4可能涵盖了CSS的基础知识，包括选择器的使用、盒模型、浮动和定位，这些都是CSS初学者需要掌握的基础技能。盒模型定义了元素的尺寸，包括内容、内边距、边框和外边距。浮动和定位则是布局中的重要...
CSS-Day3
m0_74039531的博客
09-29 429
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS画出三角形的做法
mingangel的博客
10-01 478
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
【CSS】position
小秀的博客
10-02 403
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
241006-Gradio中Chatbot通过CSS自适应调整高度
最新发布
专注机器学习之路
10-06 175
【代码】241006-Gradio中Chatbot通过CSS自适应调整高度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

scj1022

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值