文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS学习笔记一

sidebar选择器时，应用在p标签上会使用第一个CSS样式 单独的选择器 id选择器即使不被用来创建 派生选择器，也可以单独使用 #sidebar { border: 1px dottde #00;...，背景也会一起滚动 文本样式： 缩进文本： text-indent属性： 实现文本缩进，属性值是px/em/负值/百分 数 水平对齐： text-align属性： 实现文本的对齐方式 left：左对齐...right：右对齐 center：居中（和标签不同，后者是对元素操作，而前者只对文本有效） justify“：两端对齐 字间隔： word-spacing属性： 可以改变字或单词之间的标准间隔...text-align 对齐元素中的文本。 text-decoration 向文本添加修饰。 text-indent 缩进元素中文本的首行。 text-shadow 设置文本阴影。...：左对齐 right：右对齐 center：居中（和标签不同，后者是对元素操作，而前者只对文本有效） justify“：两端对齐 vertical-align属性： （垂直对齐

3.3K10

CSS第一天

- CSS引入方式： 引入方式 书写位置 作用范围 使用场景 内嵌式 CSS 写在style标签中 当前页面 小案例 外联式 CSS 写在一个单独的.css文件中 多个页面 项目中 行内式 CSS 写在标签的...style属性中 当前标签 配合js使用 ---- 标签选择器： 通过标签名，找到页面中所有这类标签，设置样式 div { color: red; } 标签选择器选择的是一类标签，而不是单独某一个...在小页面中可能会用于去除标签默认的margin和padding ---- 字体和文本样式： 1️⃣字体大小：font-size（数字 + px） 谷歌浏览器默认文字大小是16px，单位需要设置，否则无效...文本缩进： 文本缩进：text-indent（1em） 推荐：1em = 当前标签的font-size的大小 文本水平对齐方式: text-align属性给文本所在标签（文本的父元素）设置 属性值 效果...left 左对齐 center 居中对齐 right 右对齐 文本修饰： 开发中会使用 text-decoration : none ; 清除a标签默认的下划线 属性值 效果 underline 下划线

80110
您找到你想要的搜索结果了吗？
是的
没有找到

CSS 基础 之 基础选择器+字体文本相关样式

标签选择器选择的是一类标签，而不是单独某一个 ； 2. 标签选择器无论嵌套关系有多深，都能找到对应的标签。 代码演示： 3.2 类选择器 结构 .类名 { css属性名：属性值； } 。...网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示 5、文本样式 文本缩进 text-indent 文本水平对齐方式 text-align 文本修饰 text-decoration...的大小） 5.2 文本水平对齐方式 属性名 text-align 取值 left ：左对齐center ： 居中对齐right：右对齐 注意点 如果需要让文本水平居中，text-align属性给文本所在标签...文本 ；2. span标签、a标签，3. input标签、img标签 left ：左对齐 center ： 居中对齐 right：右对齐 注意点 如果需要让文本水平居中，text-align属性给文本所在标签...上划线none 无装饰线 注意点 开发中会使用 text-decoration : none ; 清除a标签默认的下划线 underline 下划线 line-through 删除线 overline

2.1K10

计算机科学里最大的难题：居中显示

垂直居中 */ （不要问为什么你需要记住四个单词而不是 horizontal 和 vertical 两个单词，这已经比以前好了） 如果你愿意，你也可以使用网格： display: grid; justify-items...在这方面，Vincent De Oliveira 曾写过一篇经典的文章“深入理解 CSS：字体参数、行高和垂直对齐”。 下面是一些实际的例子。...Slack： Notion： Airbnb： YouTube： 对齐两个位于不同容器中的东西几乎是不可能的： 虽然许多人尝试过： 但没有多少人成功： CSS 可能是个障碍（不同的控件有不同的默认值，你必须在尝试对齐之前取消它们...vertical-align有 13 种取值，但没有哪一个能有效地将文本和图标对齐： text-align: middle 最接近对齐，但是按 x-height 而不是 cap-height 对齐，看起来还是不平衡...我们能做些什么：图标字体 不要再使用字体图标。 使用普通的图片格式。为了帮你做出决策，我画了下面这张图： 看看苹果公司怎么费力地将复选标记放入矩形内，以及将矩形放到文本标签旁： 然而他们还是失败了！

7910

计算机科学里最大的难题：居中显示

垂直居中 */ （不要问为什么你需要记住四个单词而不是 horizontal 和 vertical 两个单词，这已经比以前好了） 如果你愿意，你也可以使用网格： display: grid; justify-items...在这方面，Vincent De Oliveira 曾写过一篇经典的文章“深入理解 CSS：字体参数、行高和垂直对齐”。 下面是一些实际的例子。...Slack： Notion： Airbnb： YouTube： 对齐两个位于不同容器中的东西几乎是不可能的： 虽然许多人尝试过： 但没有多少人成功： CSS 可能是个障碍（不同的控件有不同的默认值，你必须在尝试对齐之前取消它们...vertical-align有 13 种取值，但没有哪一个能有效地将文本和图标对齐： text-align: middle 最接近对齐，但是按 x-height 而不是 cap-height 对齐，看起来还是不平衡...我们能做些什么：图标字体 不要再使用字体图标。 使用普通的图片格式。为了帮你做出决策，我画了下面这张图： 看看苹果公司怎么费力地将复选标记放入矩形内，以及将矩形放到文本标签旁： 然而他们还是失败了！

7010

前端成神之路-CSS文字文本样式

尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。 CSS Unicode字体 ? 为什么使用 Unicode字体 在 CSS 中设置字体名称，直接写中文是可以的。...可以使用CSS 来实现，但是CSS 是没有语义的。...#f00 代表红色 2.2 text-align:文本水平对齐方式 作用： text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性 其可用属性值如下：...属性 解释 left 左对齐（默认值） right 右对齐 center 居中对齐 注意： 是让盒子里面的内容水平居中， 而不是让盒子居中对齐 2.3 line-height:行间距 作用...定义标准的文本。 取消下划线（最常用） underline 定义文本下的一条线。下划线 也是我们链接自带的（常用） overline 定义文本上的一条线。

7.1K10

『知识巩固#1』Html、Css基础整理

Html 标签学习 排版标签 标题 h1、h2、h3、h4、h5、h6只有这六个 段落标签 p标签 段落之间有空隙换行 换行标签 br 空换行 hr 下划线换行 文本格式化标签...数字+em; 1em为当前font-size的大小 文本水平对齐 text-align 左对齐、右对齐、居中对齐 能让哪些元素水平居中 文本 span 标签 input标签、imp标签 文本修饰...取值为px 或者font-size的倍数 行高 = 上间距 + 文本高度 + 下间距 应用 单行文本垂直居中 可以设置为line-height: 文字父元素高度 注意点 如果同时设置了行高和font...important 如果不是继承，则权重最高 排错 使用谷歌F12找错误 开发者常用 常用单词拼写错误 我自己就经常犯 main函数都能搞成mian 上一行出错的代码可能会导致下一行代码失效 盒子模型...合并现象 相邻的两个盒子，margin-bottom 和 margin-top 会合并 取最大值 而不是相加 塌陷现象 发生在互相嵌套的块标签 给子元素添加margin值，会使父标签子标签都下移，

4K20

4.文本样式-CSS基础

在前端开发中，对于外观控制一般用CSS来实现的，而不是用标签来实现，这更加符合结构和样式分离的原则，提高可读性和可维护性。 一、文本样式 字体样式：注重个体，针对的是文字本身效果。...文本样式：注重整体，针对的是整个段落的排版效果。 在CSS中，使用font和text两个前缀来区分这两类样式。...三、text-align（水平对齐） 在CSS中，可以使用text-align属性来控制文本在水平方向上的对齐方式。...（默认值） center 居中对齐 right 右对齐 ① 实际开发 在实际开发中，只会用到center这一个，其它的几乎用不上。...这是因为，在前端开发中，对于外观控制一般用CSS来实现的，而不是用标签来实现，这更加符合结构和样式分离的原则，提高可读性和可维护性。

1.2K20

【JavaEE初阶】CSS

), 或者使用十六进制来表示, 每4位表示一种颜色的比例, 比如红色格式为#ff0000, 这里rgb三个分量宣都是 “叠字形式”( 两两相同), 就可以缩写成#f00,还可以使用rgba来标识颜色,...center居中对齐 text-decoration, 表示文本装饰, underline下划线, overline上划线,line-through删除线,none什么都没有(可以用于给a标签去掉下划线..., 一般是左手坐标系, 即横坐标向右生长, 纵坐标向下生长， 除了使用坐标值表示位置, 还可以使用百分比(参照父元素的尺寸设置)与常用的单词表示, 如center表示居中, left表示左对齐,...bottom表示下对齐, top表示上对齐. background-size, 表示背景图片的大小, 格式为宽度 高度, 单位为px, 还可以使用contain(尽可能的充满背景,可能会露出额外背景)...还可以让图片与文字处于元素中心位置, 图片使用background-position属性设置, 文字的话先让行高和元素高度相同完成垂直居中, 再让文字水平居中即可. 4.圆角矩形 Html元素默认都是一个个矩形

16310

文本类样式 — 背景、文本、字体

6、字体类属性的使用总结 字体类属性可以设置页面中的字体大小、粗细、风格、格式，还包括了一个文本行高的设置，具体的使用见下面代码： .box { width: 600px; height...三、文本样式——文本 文本类样式的文本类主要是为了我们在设置文章文字或段落时可以实现水平居中、下划线、首行缩进、颜色、字符间距、换行等一系列操作。...3、text-align 文本对齐方式的设置，用来实现页面文字左对齐、右对齐、居中对齐、两端对齐等效果，有left、center、right、justify等属性。...用于设置文本的颜色： color : 颜色值； 5、vertical-align 文本垂直居中对齐的设置，此属性除了table支持的比较完善其他标签支持的并不是太好，不建议使用此属性。...10、文本类属性的使用总结 实际开发中，我们对于文本属性的使用主要有对齐方式、下划线、缩进、颜色，其他属性使用到的概率比较小，但是这不是说不使用，所以大家该记忆的还是需要记忆的。

2.5K80

CSS垂直居中的七个方法

不过由此就可以抛光，为什么必须要单行的行内元素，因为如果多行，第二行与第一行的间隔会变超大，就不是我们所期望的效果了。...在此之前，先解释一下CSS里头vertical-align这个属性，这个属性虽然是垂直居中，不过却是指在元素内的所有元素垂直位置互相居中，而不相对于外框的高度垂直居中。...这时候就必须用到CSS特有的calc动态计算的能力，我们只要让要居中的div的top属性，与上方的距离是“ 50％的外框高度-50％的div高度”，就可以做到垂直居中，至于为什么不用margin-top...最主要的原因就在于table的display是table，而td的display是table-cell，所以我们除了直接使用表格之外，也可以将要垂直居中元素的父元素的display替换为table-cell...top属性，就可以做出垂直居中的效果，比较需要注意的地方是，子元素必须要加上position：relative，不然就会没有效果喔。

1.9K30

CSS外观属性

使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。...其可用属性值如下： left：左对齐（默认值） right：右对齐 center：居中对齐 text-indent:首行缩进 text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值...不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。...颜色半透明(css3) 文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：    color: rgba(r,g,b,a)  a 是alpha 透明的意思 取值范围 0~1之间    color...下划线 也是我们链接自带的 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。

1.1K20

CSS字体字段样式

尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。 CSS Unicode字体 ? 为什么使用 Unicode字体 在 CSS 中设置字体名称，直接写中文是可以的。...可以使用CSS 来实现，但是CSS 是没有语义的。...，而且我们更喜欢简写方式比如 #f00 代表红色 text-align:文本水平对齐方式 作用： text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性 其可用属性值如下...： 属性 解释 left 左对齐（默认值） right 右对齐 center 居中对齐 注意： 是让盒子里面的内容水平居中， 而不是让盒子居中对齐 line-height:行间距 作用： line-height...定义标准的文本。 取消下划线（最常用） underline 定义文本下的一条线。下划线 也是我们链接自带的（常用） overline 定义文本上的一条线。

13.6K20

前端学习(7)~css学习(一)：字体属性和文本属性

本文重要内容 CSS的单位 字体属性 文本属性 定位属性：position、float、overflow等 CSS的单位 html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样...) pc：皮卡Picas (1 皮卡 = 12 点) 相对单位 px：像素 em：印刷单位相当于12个点 %：百分比，相对周围的文字的大小 为什么说像素px是一个相对单位呢，这也很好理解。...盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。 为了严格保证字在行里面居中，我们的工程师有一个约定： 行高、字号，一般都是偶数。...这样可以保证，它们的差一定偶数，就能够被2整除。 如何让单行文本垂直居中 小技巧：如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中。这个很好理解。...上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要计算盒子的padding。

1.8K20

CSS笔记

padding：文字到边框的距离 contenr：具体内容的大小 行级元素要设置浮动才有效果 文本属性： 给标题添加阴影: text-shadow: 5px 5px 5px #FF0000; 属性适用于盒子阴影...：字的断开 line-height：行高（与height使用可以让文字垂直居中） text-align：对齐（center文字水平居中） 行级元素 letter-spacing：字符间距（空隙） text-decoration...：文本修饰（nono去除下划线、underline(加下划线)line-ovrline（上方加下划线）、line-through（中间加下划线）） 字体属性： font-weight： 粗细 bold(.../向左对齐/ background-position : right; /向右对齐/ background-position : center; /居中对齐/ 五、CSS连接属性： a /所有超链接/...a:link /超链接文字格式/ a:visited /浏览过的链接文字格式/ a:active /按下链接的格式/ a:hover /鼠标转到链接/ 鼠标光标样式： 链接手指 CURSOR: hand

73410

「学习笔记」CSS基础

注意：是让盒子里面的文本内容水平居中， 而不是让盒子居中对齐 其可用属性值如下： 属性 解释 left 左对齐（默认值） right 右对齐 center 居中对齐 「3. line-height」line-height...line-height: 24px; 行高测量 行高测量方法： 行高测量方法行高我们利用最多的一个地方是：可以让单行文本在盒子中垂直居中对齐。 文字的行高等于盒子的高度。...定义标准的文本。取消下划线（最常用） underline 定义文本下的一条线。下划线 也是我们链接自带的（常用） overline 定义文本上的一条线。...，我们会经常用 防止拖拽 主要针对文本域resize 防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none vertical-align 垂直对齐 有宽度的块级元素居中对齐，是margin...为什么需要精灵技术：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

3.2K30

CSS十问之元素居中

而今天，我们就从 「元素居中」：这个让无论是前端"萌新"还是"老油条" 抓耳挠腮的问题。不是因为它难，是因为它太杂了。...而不是把市面上针对样式居中的所有「奇技淫巧」都囊括到一起。...而「格式化宽度」的具体表现为： ❝对于「非替换」元素,当left/right或top/bottom,「对立方位」的属性值「同时存在」的时候,元素的宽度表现为「格式化宽度」,其宽度大小相对于最近的具有「定位特性...换句话说： ❝line-height就是通过「改变行距」来改变内联元素高度的 ❞ 行距 = 行高 - em-box，em-box高度正好就是1em,而em是一个相对font-size大小的「CSS单位」...进而，我们可得出另外一个结论： ❝行距 = line-height - font-size ❞ 而line-height比较重要的作用是：「让内联元素垂直居中」，而 ❝行高实现垂直居中原因在于CSS中「

1.7K10

CSS文字样式总结

字体连写是有顺序的 不能随意换位置 2....其中字号 和 字体 必须同时出现 ---- text-align:文本水平对齐方式 作用： text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性 其可用属性值如下：...属性 解释 left 左对齐（默认值） right 右对齐 center 居中对齐 注意： 是让盒子里面的内容水平居中， 而不是让盒子居中对齐 ---- text-decoration 文本的装饰...定义标准的文本。 取消下划线（最常用） underline 定义文本下的一条线。下划线 也是我们链接自带的（常用） overline 定义文本上的一条线。...水平对齐 可以设定文字水平的对齐方式 text-indent 首行缩进 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; text-decoration 文本修饰 记住 添加

1.5K40

【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)

这篇css博客是参考B站黑马程序员–pink老师做的个人笔记,供平时复习使用,现分享给大家,喜欢的话请多多点赞收藏哦~~ 文章目录 P62.css简介 P63.css的语法规范 P65.选择器总体概述...（字体，大小，对齐方式等），图片外形（宽高，边框样式，边距等）以及版面布局 P63.css的语法规范 1.语法规范 css的两部分组成：选择器以及一条或者多条声明 选择器是指定css样式的...(了解即可,不用记忆) 开发中最常用的是十六进制表示 3.对齐文本 text-align属性只能用于设置元素内文本内容的水平对齐方式 ps: 盒子里面的文字,而不是盒子本身的对齐方式...P114.垂直居中 首先css没有提供文字垂直居中的代码,我们采用让文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中....如果只给定一个参数,那么这个参数一定是x坐标,另一个是y坐标,默认居中对齐. 3.混合单位 方位名词和精确单位混合 水平20px,垂直居中,第2行效果等同于第3行: background-position

2.2K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券