CSS笔记1

最新推荐文章于 2024-07-21 19:13:42 发布
最新推荐文章于 2024-07-21 19:13:42 发布
阅读量138 收藏
点赞数
分类专栏： 笔记 文章标签： css css3 less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47157937/article/details/122322247
版权

文章目录

CSS简介

-语法规范
在这里插入图片描述-代码格式
在这里插入图片描述

CSS基础选择器

在这里插入图片描述

基础选择器

  1. 标签选择器在这里插入图片描述
  2. 类选择器
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  3. id选择器
    在这里插入图片描述
    在这里插入图片描述
  4. 通配符选择器
    在这里插入图片描述
    在这里插入图片描述

CSS字体属性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<style>
        p {
            font-family: 'Courier New', Courier, monospace;/* 字体样式 */
            font-weight: 100;/* 字体粗细 */
            font-style: italic;/* 字体风格-斜体 */
            font-size: 20px; /* 字体大小 */
            color: #00ff15; /* 字体颜色 */
        }
    </style>
</head>
<body>
    <p>你好</p>
</body>

CSS文本属性`

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

CSS引入方式

在这里插入图片描述
1.内部样式表（将CSS代码抽取出来放在style标签里，还是在html页面内部）在这里插入图片描述
2.行样式表
在这里插入图片描述
在这里插入图片描述
3.外部样式表
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

调试工具

在这里插入图片描述

不爱学习的nnz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css笔记1
qq_61466402的博客
03-13 7639
目录 css语法 实例 例子解释 css选择器 css使用 三种使用css的方法 外部 CSS 内部 CSS 行内 CSS 多个样式表 层叠顺序 css注释 实例 实例 实例 HTML 和 CSS 注释 css颜色 css背景色 CSS 文本颜色 CSS 边框颜色 CSS 颜色值 实例 css背景 CSS background-color css背景图像 css背景重复 css背景附着 css背景简写 css语法 CSS 规则集（rule...
CSS学习笔记
m0_58761900的博客
09-18 3047
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
css学习笔记1
qq_42236791的博客
12-12 917
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
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_58509345的博客
12-16 2479
一、基础认知 CSS：层叠样式表 CSS的作用：给页面中的HTML标签设置样式 1.1CSS语法规则 写在哪里？ CSS写在style标签中，style标签一般写在head标签里面，title标签下面 怎么写？ CSS初体验 常见属性：color（文字颜色）font-size（字体大小）background-color（背景颜色）width（宽度）height（高度） 注意点：1、CSS标点符号都是英文状态下的2、每一个样式键值对写完之后，最后需要写分号 1.2CSS引入方式 1.2.
HTML CSS整理笔记
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
css 笔记2
m0_68844946的博客
06-13 1731
这是div标签</div>复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。} </style> <div id="red">这是div标签
前端css基础学习笔记
a_big_panda的博客
01-22 913
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
CSS 学习笔记
weixin_42098295的博客
05-06 1261
定位（Positioning）：static, relative, absolute, fixed, sticky。组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。属性选择器：根据元素属性选择，如 [type="text"]。Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。伪元素选择器：如 ::before, ::after。
CSS学习笔记目录
wz_1992的博客
05-30 440
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
CSS笔记1.docx
05-07
【CSS简介】 CSS，全称为层叠样式表（Cascading Style Sheets），是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它的主要功能是分离网页的内容（HTML或其他标记语言）与表现形式，...
CSS3笔记1
08-04
【CSS3笔记1】 CSS（Cascading Style Sheets）是一种样式表语言，用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS负责网页的布局和外观，是网页设计中的关键组成部分。 ### CSS的发展历程 自...
css笔记
04-02
这本“css笔记”是对CSS技术的深入理解和实践的总结，旨在帮助开发者巩固基础知识，提升技能水平。 **基本概念** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p`）、类选择器（`.myClass`）、ID...
CSS笔记.pdf
07-14
1. **外部样式表**：通过`<link>`标签引用外部CSS文件，例如`<link rel="stylesheet" type="text/css" href="文件路径" />`，这种方式便于管理和复用样式，适用于大型项目。 2. **内部样式表**：在HTML文档的`<head>...
Web开发：四角线框效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-17 888
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 3879
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
css性能优化的方法
最新发布
jht_520的博客
07-21 66
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 751
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
pink老师css笔记
08-17
很抱歉，我无法根据提供的引用内容回答你的问题，因为引用内容并没有提到"Pink老师CSS笔记"这个话题。如果你有关于"Pink老师CSS笔记"的具体问题，我将非常乐意帮助你回答。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [CSS知识点整理（pink老师课程的学习笔记）](https://blog.csdn.net/m0_53975499/article/details/113576769)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [HTML+CSS学习笔记（pink老师前端课程笔记--补档）](https://blog.csdn.net/weixin_44524703/article/details/121071964)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值