CSS入门（全）

最新推荐文章于 2024-05-24 01:00:03 发布
最新推荐文章于 2024-05-24 01:00:03 发布
阅读量235 收藏 1
点赞数 4
分类专栏： 笔记 文章标签： css css3 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45450889/article/details/106085917
版权

CSS入门

  • 声明
  • CSS样式
  • 样式使用的优先级
  • CSS选择器
  • 后代选择器
  • 子元素选择器
  • 相邻兄弟选择器
  • 伪类
  • 伪元素
  • CSS样式选择器的优先级别
  • CSS设置背景样式
  • CSS设置文本样式
    后面的就懒啦，明天整理，妈妈和我说熬夜的不是好孩子，好吧，其实是我困了
  • CSS设置表格样式
  • CSS两行三列布局
  • CSS三行两列布局
  • CSS盒子模型
  • CSS设置盒子模型的边框
  • CSS设置盒子模型的边距
  • CSS设置盒子模型的外边距
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS声明</title>
    <style>
        body {
            background-color: rgb(72, 146, 115);
        }
    </style>
</head>

<body>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>如何使用CSS样式一</title>

</head>

<body>
    <!--内联样式-->
    <!--仅对这一个标签使用-->
    <p style="color: lightcoral;font-weight: bolder;">这是一个段落</p>
    <p>这是一个段落</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>如何使用CSS样式二</title>
    <style>
        p {
            color: lightcoral;
            font-weight: bolder;
        }
    </style>

</head>

<body>
    <!--外联样式-->
    <p>这是一个段落</p>
    <p>这又是一个段落</p>
</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>如何使用CSS样式三</title>
    <!--必要属性 rel href-->
    <link type="text/css" rel="stylesheet" href="04.css">

</head>

<body>
    <!--外联样式-->
    <p>这是一个段落</p>
    <p>这又是一个段落</p>
</body>

</html>





p {
    color: lightcoral;
    font-weight: bolder;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>样式使用的优先级</title>
    <!--内联样式优先级别高于外联样式-->
    <style>
        p {
            color: blue;
            font-weight: lighter;
        }
    </style>

</head>

<body>
    <!--外联样式-->
    <p style="color: lightcoral;font-weight: bolder;">这是一个段落</p>
    <p>这又是一个段落</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        #p {
            color: red;
        }

        .myclass {
            color: blue;
        }

        span {
            color: yellow;
        }

        [title] {
            color: green;
        }
    </style>
</head>

<body>
    <!--id属性的特点是唯一 不可重复的-->
    <!--id选择器 “# + id名字”使用-->
    <!--id选择器 比较少用 因为他是惟一的-->
    <p id="p">这是一个段落</p>

    <!--类class 选择器 比较常见-->
    <!--class选择器是用“.class名”使用-->
    <p class="myclass">这又是一个段落</p>

    <!--元素选择器：通过元素名称来定位页面元素  比较常见-->
    <!--直接用名称调用即可-->
    <span>这是一段文本内容</span>
    <!--属性选择器-->
    <!--使用"[名称]"-->
    <p title="this is p.">这是一个段落</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        span {
            background-color: lightblue;
        }

        div span {
            background-color: lightcoral;
        }
    </style>
</head>

<body>
    <div>
        <span>
            Span 1.
        </span>
        <span>
            Span 2.
        </span>
    </div>
    <span>Span 3.</span>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        span {
            background-color: lightblue;
        }

        div>span {
            background-color: lightcoral;
        }
    </style>
</head>

<body>
    <div>
        <span>
            Span 1.
            <span>
                Span 2.
            </span>
        </span>
    </div>
    <span>Span 3.</span>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>下一个相邻兄弟选择器</title>
    <style>
        #one+li {
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li id="one">One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        a:link {
            color: red;
        }

        a:hover {
            color: antiquewhite;
        }

        a:active {
            color: aqua;
        }

        a:visited {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <!--改变连接状态-->
    <!--active长按有效果-->
    <a href="#">樱桃小完犊子</a>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        p::before {
            content: "<<";
            color: lightgreen;
        }

        p::after {
            content: ">>";
            color: lightgreen;
        }
    </style>
</head>

<body>
    <p>樱桃小完犊子</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        p {
            color: aqua !important;
        }

        .myclss {
            color: bisque;
        }

        #zln {
            color: brown;
        }
    </style>
</head>

<body>
    <!--选择器的优先级
    1.id选择器
    2.类选择器
    3.元素选择器
    ！important会将优先级别调到最高-->
    <p id="zln" class="myclass">樱桃小完犊子</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        #p1 {
            background-color: aqua;
        }

        #p2 {
            background-image: url("111.png");
            width: 200px;
            height: 200px;
        }

        #p3 {
            background-image: url("111.png");
            width: 200px;
            height: 200px;
            background-position: -200px, -200px;
        }

        body {
            background-image: url("111.png");
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <p id="p1">第一个</p>
    <p id="p2">1</p>
    <p id="p3"></p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS设置文本样式</title>
    <style>
        #p1 {
            color: red;
        }

        #p2 {
            text-align: left;
        }

        #p3 {
            text-align: center;
        }

        #p4 {
            text-align: right;
        }

        #p5 {
            text-decoration: none;
        }

        #p6 {
            text-indent: 50px;
        }

        #p7 {
            vertical-align: text-top;
        }
    </style>
</head>

<body>
    <p id="p1">第一行</p>
    <p id="p2">第二行</p>
    <p id="p3">第三行</p>
    <p id="p4">第四行</p>
    <a id="p5" href="#">第五行</a>
    <p id="p6">第六行</p>
    <p id="pt">第七行</p>

</body>

</html>
daladalabao
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
CSS从入门到精通
cgblpx的博客
06-01 2万+
CSS技术 什么是CSS CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。 主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。 CSS的用法 需求::将单元格内文字居中显示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css的使用</title>
css入门入门入门入门
05-23
01_CSS快速入门.mp4可能涵盖了CSS的基础知识，包括选择器的使用、盒模型、浮动和定位，这些都是CSS初学者需要掌握的基础技能。盒模型定义了元素的尺寸，包括内容、内边距、边框和外边距。浮动和定位则是布局中的重要...
css_初阶
weixin_34348111的博客
04-06 87
s10.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <fields...
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 7713
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
Tailwind CSS快速入门
最新发布
知识点沉淀包括不限于前端
05-24 1557
Tailwind css 对比传统css css in js 安装流程 书写技巧 速查手册
TailWindCSS入门
cccdf_jjj的博客
06-15 6219
上一篇文章我们说过了如何搭建项目以及引入TailWindCSS，这篇文章我们说一下如何使用它，刚看到的时候我对这些缩写感觉很迷茫呀，官网我也没找到如何能知道具体对应的都是撒意思，后面找到一片天比较详细的介绍的文章，认真研究了一下，文章我会放在本文的最末尾。好啦话不多说，开始吧！1.screens(也可以自定义媒体查询屏幕的宽度) 2.颜色 一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，green： 3.纵横比--aspect 4.容器--container 6.列--co.
CSS入门
xiaoyu_alive的博客
01-29 2214
本文讲述了CSS选择器、字体样式、文本样式、边框样式、列表样式、表格样式、图片样式、背景样式、超链接样式。
css入门学习
山有木兮
06-25 4026
学过前端的人，对HTML语言一定不会感到陌生，因为它是前端设计最基本的工具。然而，随着网站越来越复杂，网站的维护变得越来越重要，对设计师的要求也越来越高。
CSS入门使用
zz14664656的博客
12-15 1049
引入CSS的三种方式其优先级：行内样式 > 内部样式 > 外部样式。
头歌-CSS入门
somewon的博客
03-06 7912
四川师范大学 CSS 头歌
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
CSS入门教程篇
10-30
### CSS入门教程篇 #### 一、CSS简介与基本语法规范 **CSS**（Cascading Style Sheets）即层叠样式表，它是一种用于增强HTML文档样式的语言，主要用于控制网页内容的外观呈现，如颜色、布局等。CSS使得内容与表现...
CSS入门源代码 CSS入门源代码
05-20
这个压缩包文件“CSS入门源代码”提供了一些关于CSS基础和进阶知识的学习资源，主要包括以下几个方面： 1. **CSS选择器**：CSS选择器是用于选取HTML或XML文档中的元素的关键工具。基本选择器包括标签选择器（如`<p>...
CSS入门PPT
01-19
CSS入门，适合初学者，基础的CSS操作 CSS(Cascading Style Sheet)级联样式单（层叠样式表） HTML5建议把页面外观交给CSS控制。 优点： 表达效果丰富 （元素样式、精确定位） 文档体积小（重复定义 提高传输速度 ...
Java编写代码“邮箱格式”等进行验证。（假设邮箱以数字或是字母开头，必须包含@字符，并以.com结尾）
qq_45450889的博客
05-11 1万+
第一种方法 我最先想到了办法，这种方法就比较简单了，话不多说看代码 if(inputname.contains("@") && inputname.endsWith(".com") && ((inputname.charAt('0')>=0&&inputname.charAt(0)<='9')|| (inputname.charAt(0)<='z'&&inputname.charAt(0)>='A')
逻辑地址和物理地址
qq_45450889的博客
06-20 8179
逻辑地址（Logical Address）和物理地址（Physical Address）是计算机内存管理中的两个重要概念。逻辑地址：是指程序在运行过程中使用的地址，也称为虚拟地址（Virtual Address）。它是由CPU生成的，用于访问内存中的数据。逻辑地址的大小和位数取决于处理器的架构和操作系统的设计，通常是一个定长的二进制数值。在执行指令时，CPU通过将逻辑地址转化为物理地址来获取数据。物理地址：是指内存中实际的地址，也称为实地址（Real Address）。
正则表达式对手机号码进行校验
qq_45450889的博客
07-14 4924
正则表达式对手机号码进行校验 代码如下 /* * 对手机号码进行校验 * * 移动号段： 134 135 136 137 138 139 147 148 150 151 152 157 158 159 172 * 178 182 183 184 187 188 198 * 联通号段： 130 131 132 145 146 155 156 166 171 175 176 * 185 186 * 电信号段： 133 149 153 173 174 177 180 181 189 199 *
用星号输出一个梯形，如下图所示：（使用嵌套for循环完成）
qq_45450889的博客
04-17 4311
for(int i = 1;i <= 5;i++) { for(int j = 1;j <= 5-i;j++) { System.out.print(" "); } for(int k = 1;k <= 2*i+1;k++) { System.out.print("*"); } System.out.println(); } ##...
CSS入门全解析：基础教程+实例讲解
本篇CSS入门基础经典教程旨在帮助初学者快速掌握基本概念和技能，让你在网页设计和前端开发的道路上顺利起步。教程内容涵盖多个核心章节，包括CSS的基础知识、语法、实用技巧以及常见属性的详细解释。 首先，第一章...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值