学习慕课网笔记，课程：http://www.imooc.com/code/2024 1.css选择器 子选择器：parent>child 子选择器是指选择parent的范围内的第一个子元素。...2.元素分类 在css中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素（又叫行内元素）和内联块状元素。...2.3内联块状元素 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素（css2.1）img,input...inline-block元素特点： 和其他元素都在一行上； 元素的高度、宽度、行高以及顶和底边距都可以设置； 3.盒子模型 3.1什么是盒子模型 css中，盒子模型是关于元素的宽高的。如下图： ?...4.布局 css包含
CSS学习 CSS样式 内联式CSS样式：直接写在现有的HTML标签中 嵌入式CSS样式： 写在当前的文件中（把css样式代码写在标签之间...） 外部式CSS样式：写在单独的一个文件中 使用标签将CSS样式文件链接到HTML文件内， 如 优先级 在内联式、嵌入式、外部式样式表中CSS是在相同权值的情况下，一般来说离被设置元素越近优先级级别越高。...但有一些css样式是不具有继承性的，如边框 特殊性 有时候我们为同一个元素设置了不同的css样式代码，那么元素会启用哪一个css样式？浏览器根据权值来判断使用哪种css样式，使用权值高的css样式。...层叠 层叠胡原始股在HTML文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用（离元素最近优先级越高）。
size="7">今天天气好晴朗 今天天气好晴朗 书写规范 放置规范 在style中写入css...样式的代码，标签放置在标签之中 格式： 选择器名称{ 属性名：属性值； 属性名：属性值；·······} 选择器就是css样式指定的作用在那些标签上；如果一个属性名有多个值，多个值之间使用 空格...隔开 css注释 /*注释内容*/ css选择器 选择器严格区分大小写，属性和属性值不区分大小写； 属性和属性之间使用分号隔开，最后一个可以省略。...元素选择器 span{ /*css..." href="demo.css"/> demo.css a{ font-size: 100px; color: blue; } 不同文件之间的样式复用
CSS学习笔记 一、CSS基础 1、CSS简介 层叠：一层一层的； 样式表：很多的属性和样式 CSS语法： 选择器...{ 属性名:属性值; 属性名:属性值; …… } 2、CSS和HTML的结合方式 在HTML标签中的style属性里添加CSS代码； 在头标签中添加标签；...在style标签中使用@import导入外部CSS文件： @import url("css/test.css"); 在头标签中使用标签导入外部CSS文件...： 3、CSS选择器 使用标签名作为选择器； 使用HTML标签中的class属性作为选择器： <!...二、CSS常用属性 1、文字修饰 color颜色 font-family字体 font-size字体大小 font-weight粗细 letter-spacing字间距 text-indent 文字缩进
── src │ ├── animation.css │ ├── colors.css │ ├── index.js │ └── style.css └── webpack.config.js...CSS Modules 用法 webpack 首先配置 webpack 环境(本文使用webpack2)，给 css-loader 增加一个 modules 查询参数，表示打开 CSS Modules...通过 JS 去管理 CSS 之间的依赖，在引入组件的时候，可以只引入次组件需要的 CSS，组件更加独立。 CSS 变量 可以在 CSS 和 JS 中共享，对于复杂组件的使用会有奇效。...另一类是依旧使用 CSS，但使用 JS 来管理样式依赖，代表是 CSS Modules。CSS Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力，API 简洁到几乎零学习成本。...引自 CSS Modules 详解及 React 中实践 参考资料 CSS Modules 详解及 React 中实践 css-modules CSS Modules 用法教程
background-attachent 可以声明图像相对于可视区是固定的,不会受滚动条的影响
Google: 关键词 MDN CSS Tricks Google: 阮一峰 css 张鑫旭的 240 多篇 CSS 博客 Codrops 炫酷 CSS 效果 CSS揭秘 CSS 2.1 中文 spec...Magic of CSS 免费在线书 我的建议是：中文学习资源只看大 V 的（毕竟他们要维护形象不能瞎写），英文资源看 CSS Tricks、MDN 和 Codrops。...如果你想一鸣惊人，就仔细看 CSS 规范文档。
很多人想让我给他们推荐有关CSS部分的教程，或者问我如何学习CSS。 我也看到很多人对CSS的部分内容感到困惑，一部分原因是由于对语言的过时认识。...鉴于CSS在过去几年中发生了相当大的变化，这是一个更新知识的好时机。 即使CSS只是你所做工作的一小部分（因为你使用其他技术栈），CSS是你最终希望在屏幕上显示的结果，所以值得合理去学习。...我的目标是覆盖现代CSS的广度，同时重点关注几个关键领域，将帮助你理解CSS的其他部分。 语言基础知识 对于CSS的大部分内容，你不需要特意去学习属性和值，你可以在需要时查找它们。...好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。 布局 十五年来，我们一直使用CSS布局，但没有设计一套布局系统。...如果你想对CSS布局还不熟悉，你可以阅读 MDN 上的布局教程，或阅读我发表在Smashing杂志上的文章 《开始学习CSS布局》。 不要认为grid和flexbox等方法在某种程度上是竞争的。
一、CSS的三类选择器 1、标记选择器 标记 { 属性:属性值; ...………… } 2、类别选择器 .class { ...属性:属性值; ………… } 在HTML中的引用方式：标记内容 3、ID选择器 ... ………… } 四、常用CSS属性及含义 属性 含义 属性值 font-family...2、盒子模型 3、CSS排版观念 ID选择器：#container（width：100%）；#banner；#content；#links；#footer 设置各个板块的位置
bug多(建议酌情使用) 2 padding 会影响盒子大小如果设置padding相应的宽度要进行减小（比较麻烦） 3 width 没有问题使用较多在进行布局一般会使用宽度或者高度剩余法去做布局 css3...box-sizing:border-box 在设置width时包含padding和border css 的定位机制有三种：普通流，定位，浮动。
一 CSS CSS是Cascading Style Sheets的缩写，层叠样式表，用来控制网页数据的显示，可以使网页的显示与数据内容分离。...二 引入方式 （1）行内式：在标记的style属性中设置CSS样式，不推荐使用。 hello world 标签中导入*.css文件。...type="text/css"> @import "myCss.css"; hello world</div
CSS3 中新增了一个属性 box-sizing，可以用来指定使用的盒模型计算方式。...下面是 CSS3 中支持的盒模型计算方式（CSS2种只支持默认的） content-box（默认值）: width 和 height 属性只作用到 Content Area 的长宽，在 Content...内联元素 东西比较多，先附一些文章链接： CSS 中的line-height CSS 行高line-height的一些深入理解及应用 CSS line-height 中文版 视觉格式化模型中的各种框 CSS...权威指南 行内框（inline-box） http://meyerweb.com/eric/css/inline-format.html https://www.w3.org/TR/CSS21/visuren.html...compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
在今天的文章中，我们将讨论 CSS 变量。所以不要浪费时间，让我们看看它是什么？ 什么是变量？ 变量用于在其中存储数据。把它想象成你有一个盒子，你在里面放了一些书。...为此，我们在 CSS 中有 var() 函数 因此，现在让我们看一个使用 CSS 变量的完整示例。.../*blue color*/ border: 1px solid var(--primary-color); /*blue color*/ } 所以，现在如果你看到上面的代码，你就可以知道如何在 CSS...您可以使用变量来存储任何 CSS 值。甚至存储整个边界值。是不是很棒？
学习路线 块元素，行内块元素，行内元素定义 盒子模型 文本操作 文本垂直操作：vertical-align的使用图示。middle设置居中。...媒体查询特征.png 媒体类型.png 媒体运算符.png image.png BFC功能---全称：块级格式化上下文 开启BFC.png 开启BFC.png 视频：尚硅谷前端入门html+css...零基础教程，零基础前端开发html5+css3视频 【狂神说Java】CSS3最新教程快速入门通俗易懂
CSS-盒模型 1-1 盒模型-content 设置一个矩形 用到新标签—div 标签 content div 的宽度为
盒子模型：（重点） 盒子模型（CSS框模型）规定了元素框处理元素内容、内边距、边框、外边框等样式 ? 记住上面这一张图！一定要记住！一定！一定！...内边距、边框和外边距是可选参数属性，默认值：0 ；很多元素由用户代理样式表设置外边距和边框，通过将元素的 margin外边距和padding内边距设置为 0 来覆盖这些浏览器样式 在CSS中，width...padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px; } 当然，css...CSS 定位： CSS定位，属于允许对元素进行定位 定位： 定位和浮动： CSS为定位和浮动提供了一些属性，利用属性可以建立列式布局，将布局的一部分重叠。...display属性： 定位机制： CSS基本定位机制：普通流，浮动和绝对定位 除非专门单独定义，否则所有框都是默认在普通流中定位 块级框从上到下一个接一个排列，框之间的垂直距离是由框的垂直外边距计算出来的
学习条件 掌握了 CSS 的选择器、属性和值。 学习目标 了解 display 属性的可选值有哪些，分别代表什么意思。知道行内元素和块级元素的区别。...学习资源 学习 CSS 布局 Flex 布局 Flex 布局教程：语法篇 阮一峰 Flex 布局教程：实例篇 阮一峰 Flex 布局 写法示例 inline-block 应不应该使用inline-block...代替float 如何解决inline-block元素的空白间距 inline-block 布局写法示例 十步图解CSS的position 元素的垂直居中的方法 元素的水平居中的方法 习题 1 用尽可能多的方法实现如下功能
CSS 选择器： CSS id选择器： id选择器可以为标有特定 id的HTML元素指定特定的样式 id选择器是以 “#” 来定义的 内部样式表： 在文档头部的标签中定义内部样式表 如果一个元素拥有多个CSS选择器，会按照内部 -->外部的次序进行设置渲染 - CSS 样式： 背景样式： 背景色： background-color属性： 设置背景色，接受任何颜色值 背景图像...CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 text-transform 控制元素中的字母。 unicode-bidi 设置文本方向。...（CSS2.1 已删除该属性。） font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。） font-style 设置字体风格。
CSS技术： 1.简介：他是层叠样式表。Cascading stytle sheet,他的作用是增强网页的显示效果。 目的：使用CSS让网页内容和样式分离，便于网站代码后续的维护。...书写规范： 选择器[属性1: 值1; 属性2: 值2; ] 2.CSS样式的引入方式 CSS不能单独使用，必须和html网页配合使用，引入css有四种方式：链入式、行内式、内嵌式、导入式。...=”text/css”> Css 代码 位置：一定要放置在标记里面 3.链入式 语法： 步骤： 1创建一个CSS文件 2在网页里面使用link标签来引入外部的CSS文件 4.导入式 ...@import url(外部css的url); 链接式和导入式的区别 1、属于XHTML 2、优先加载CSS文件到页面 @import 1、属于CSS2.1
下面我们用CSS制作一只漂亮的铅笔。... css...要想学习flex布局的，可以去我的历史文章里面，有更多更详细的介绍。 《CSS3中Flex弹性布局该如何灵活运用？》...各种形状绘制推荐文章：《CSS画各种图形（五角星、吃豆人、太极图等）》 ?...小结 本小结知识: 1、Flex布局 2、:befroe、:after伪类灵活运用 3、CSS绘制三角形等 4、transform 缩放元素 5、CSS border灵活运用 小伙伴们，有问题可以评论区留言哦
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
