cs字体样式和盒子模型学习1

CSS学习笔记3
文本样式2
1.文本颜色设置-属性：color
属性值：颜色的英文单词表示/HEX（三原色16进制）/RGBa（三原色十进制），该模式还支持对不透明度的设置a，他表示不透明度，取值区间0-1，可保留两位小数
2.文本的居中方式text-align该属性用于控制“行内块元素”或“块元素”内“行内元素”（文本元素）的居中方式的，包含三个值：left（默认）文本左对齐center文本居中对齐right文本右对齐
3. 段落首行缩进 text-indent 中文布局，使用“2em”作为首行缩进“两个字符”4. 文本装饰线 text-decoration None（默认）无装饰线Underline在文本下方显示 a超链接标签默认带有Overline 在上方显示line-through 在文本中间显示相当于删除线5. 英文字母大小写转换 text-transform None （默认）保持原来不变Capitalize 将每个单词首字母大写，不管其他字母Lowercase 将所有英文字母转为小写Uppercase 将所有英文字母转为大写6. 文本阴影 text-shadow 给文本添加阴影效果（— — — —）四个值分别代表：水平方向阴影偏移、垂直方向阴影偏移、阴影模糊距离、阴影的颜色7. 段落文本的行高 line-height该属性是用于设置“行内元素”中文本元素在一行中所占据的高度，（可实现单行文本垂直居中的效果）使用场景如：表格、导航按钮、自定义样式按钮、标题栏等。8. 单词的间距 word-spacing 设置英语单词的间距当你的文字间没有空格时，整体就会被当做一个单词。当你的每个汉字两边都有空格时，每个汉字才会被当做是一个单词。其值可以为负数，距离会减小9. 字符的间距 letter-spacing10. 该属性是用于控制字符间的间距。11. 一个字母，一个汉字，甚至一个空格都是一个字符。12. 在html中，多个空格最终会变为一个空格的。其值可以为负数，距离会减小13. 空格换行处理 white-space设置如何处理元素内的空格符和换行符14. Normal （默认）由浏览器处理空格和换行15. pre段落中所有空格符和换行符都会被保留，类似pre标签16. Nowrap 段落内的文本不会换行pre-wrap段落里所有的空格符序列和换行符序列都会被保留，这点类似于pre，但是他不会去更改浏览器的默认行为（当内容的宽度小于了窗体的宽度时会出现滚动条的行为）17. pre-line18. 保留换行符，但是多个空格还是会按照浏览器的默认行为处理（多个合并为一个）19. 20. 注意：21. 如果你当前的内容是无空格分隔的一连串的英文，那么他会被浏览器当作是一个单词，不会让他换行，只会出现水平滚动条去适应他。22. 设置文本方向 direction23. Ltr默认24. Rtl从右往左25. 设置文本溢出来时的处理 overflow26. 文本的裁切 text-overflow27. clip 裁剪文本（从属性意义不大，通过overflow：hidden可实现此效果）ellipsis显示省略符号来代表被裁剪的文本不过该属性不能单独使用，必须要配合“white-space”和“overflow”来使用，否则会达不到所期望的效果。盒子模型1.盒子的组成a. Content内容b. padding内间距c. border边框d. margin外间距 2.标准的盒子模型最终盒子的width”和“height == content3.IE浏览器盒子模型最终盒子的“width”和“height”== conent、padding和border；
4. 盒子模型的转换，CSS的样式属性“box-sizing”的值设为“border-box”–》IE盒子模型（推荐）“box-sizing”的值设为“content-box”–》W3C盒子模型4.盒子的几个属性Width盒子宽度Height盒子高度Padding内边距：盒子内容与盒子边框的距离Border盒子边框Margin：外边距：盒子边框和其他边框的距离1. Padding和margin的控制四个方向单独控制margin-left: 1rem;margin-right: 1rem;margin-top: 1rem;margin-bottom: 1rem; padding-left: 1rem;padding-right: 1rem;padding-top: 1rem;padding-bottom: 1rem;当为组合之值的含义：一个值：上下，左右三个值：上，左右，下四个值：上下左右分别设置6.Border设置边框的三大属性border-width 设定边框的宽度。border-style 设置边框的类型，主要有以下可以设定的值 None,solid（实线边框），dotted（点线边框），double（双线边框），dashed（虚线边框）等等，，，border-color 设置边框的颜色，盒子模型的转换，CSS的样式属性“box-sizing”的值设为“border-box”–》IE盒子模型（推荐）“box-sizing”的值设为“content-box”–》W3C盒子模型4.盒子的几个属性Width盒子宽度Height盒子高度Padding内边距：盒子内容与盒子边框的距离Border盒子边框Margin：外边距：盒子边框和其他边框的距离1. Padding和margin的控制四个方向单独控制margin-left: 1rem;margin-right: 1rem;margin-top: 1rem;margin-bottom: 1rem; padding-left: 1rem;padding-right: 1rem;padding-top: 1rem;padding-bottom: 1rem;当为组合之值的含义：一个值：上下，左右三个值：上，左右，下四个值：上下左右分别设置
6.Border设置边框的三大属性border-width 设定边框的宽度。border-style 设置边框的类型，主要有以下可以设定的值 None,solid（实线边框），dotted（点线边框），double（双线边框），dashed（虚线边框）等等，，，border-color 设置边框的颜色，6.Border设置边框的三大属性border-width 设定边框的宽度。border-style 设置边框的类型，主要有以下可以设定的值 None,solid（实线边框），dotted（点线边框），double（双线边框），dashed（虚线边框）等等，，，border-color 设置边框的颜色，
6. 7圆角的盒子 border-radius8.元素的轮廓 outline （不会占据页面空间）7圆角的盒子 border-radius
7. 8.元素的轮廓 outline （不会占据页面空间）8.元素的轮廓 outline （不会占据页面空间）

cs字体样式和盒子模型学习1相关推荐

文本样式设置/盒子模型学习笔记
一.记单词.复习前一天的学习内容.讲解练习作业. 二.转义字符 http://tool.oschina.net/commons?type=2 (转义字符的链接) 三.文本样式设置 1.text-ind ...
前端--CSS选择器，盒子模型学习
文章目录一.CSS 1.概述 2.入门案例二.CSS选择器 1.概述 1)标签名选择器:根据属性条件选中网页中的所有元素 2)class选择器:根据class属性的选中元素(添加class属性,通 ...
关于CSS--基础样式、盒子模型和颜色
文章目录 CSS 1. 注释 2. 样式表的引用方法 3. CSS样式属性 (1). Backgrounds(背景) (2). Text(文本) (3). Font(字体) (4). 列表 (List ...
CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
2.3、CSS样式、盒子模型
文章目录样式背景文本字体列表表格 CSS盒子模型边框普通边框 CSS3边框 CSS3圆角属性外边距和内边距样式背景属性描述 background-color 设置背景颜色 b ...
CSS盒子模型学习-02
1.文档流网页是一个多层结构,一层叠加一层:通过CSS可以分别为每一层来设置样式:作为用户来讲只能看到最顶上一层:这些层中,最底下的一层称为文档流,文档流是网页的基础. 我们所创建的元素默认都是在文 ...
【CSS】笔记3-三大样式、盒子模型、PS、圆角、阴影
目录一.三大特性 1.层叠性 2.继承性 3.优先级 4.CSS权重叠加二.盒子模型 1.盒子模型 (1)边框(border) (2)border-collapse表格细线边框 (3)边框会影响盒 ...
CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
盒子模型的初识及css标签使用
CSS盒子模型 1.常用样式 2.盒子模型 * 3.定位(绝对定位相对定位)* 4.CSS3常见效果盒子模型介绍常用样式基础样式样式名描述 text-align 设置内容位置(指定块级元素 ...

cs字体样式和盒子模型学习1

cs字体样式和盒子模型学习1相关推荐

最新文章

热门文章