1. 常用元素属性CSS 属性有很多, 可以参考文档https://www.w3school.com.cn/cssref/index.asp1. 字体属性设置字体body {font-family: 微软雅黑;font-family: Microsoft YaHei;}字体名称可以用中文, 但是不建议.多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )如果字体名有空格, 使用引号包裹.建议使用常见字体, 否则兼容性不好.div classfont-familydiv classone这是微软雅黑/divdiv classtwo这是宋体/div/divstyle.font-family .one{font-family:Microsoft YaHei;}.font-family .two{font-family: 宋体;}/style效果展示:大小p {font-size: 20px;}不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)可以给 body 标签使用 font-size要注意单位 px 不要忘记.标题标签需要单独指定大小注意:实际上它设置的是字体中字符框的高度实际的字符字形可能比这些框高或矮div classfont-sizediv classone大大大/divdiv classtwo小小小/div/divstyle.font-size .one{font-size:40px;}.font-size .two{font-size: 10px;}/style效果展示:粗细div classfont-weightdiv classone粗粗粗/divdiv classtwo细细细/div/divstyle.font-weight .on粗细e{font-weight: 900;}.font-weight .two{font-weight: 100;}/style效果展示:文字样式/* 设置倾斜 */font-style: italic;/* 取消倾斜 */font-style: normal;很少把某个文字变倾斜.但是经常要把 em / i 改成不倾斜.div classfont-styleem放假啦/emdiv classtwo听说要补课/div/divstyle.font-style em{font-style: normal;}.font-style div.two{font-style: italic;}/style效果展示:2. 文本属性文本颜色认识 RGB我们的显示器是由很多很多的 像素 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色.设置文本颜色color: red;color: #ff0000;color: rgb(255, 0, 0);鼠标悬停在 vscode 的颜色上, 会出现颜色选择器, 可以手动调整颜色.color 属性值的写法:预定义的颜色值(直接是单词)[最常用] 十六进制形式RGB 方式十六进制形式表示颜色, 如果两两相同, 就可以用一个来表示.#ff00ff #f0fdiv classcolor这是一句话/divstyle.color{color: red;/* color: rgb(255, 0, 0); *//* color: #ff0000; */}/style效果展示:文本对齐控制文字水平方向的对齐.不光能控制文本对齐, 也能控制图片等元素居中或者靠右text-align: [值];center: 居中对齐left: 左对齐right: 右对齐div classtext-aligndiv classleft左对齐/divdiv classright右对齐/divdiv classcenter居中对齐/div/divstyle.text-align .left{text-align: left;}.text-align .right{text-align: right;}.text-align .center{text-align: center;}/style效果展示:文本装饰text-decoration: [值];常用取值:underline 下划线. [常用]none 啥都没有. 可以给 a 标签去掉下划线.overline 上划线. [不常用]line-through 删除线 [不常用]div classtext-decoratediv classone什么都没有/divdiv classtwo下划线/divdiv classthree上划线/divdiv classfour删除线/div/divstyle.text-decorate .one{text-decoration: none;}.text-decorate .two{text-decoration: underline;}.text-decorate .three{text-decoration: overline;}.text-decorate .four{text-decoration: line-through;}/style效果展示:文本缩进控制段落的 首行 缩进 (其他行不影响)text-indent: [值];单位可以使用 px 或者 em.使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)div classtext-indentdiv classone正常缩进/divdiv classtwo反向缩进/div/divstyle.text-indent .one{text-indent: 2em;}.text-indent .two{text-indent: -2em;}/style效果展示:行高行高指的是上下文本行之间的基线距离.HTML 中展示文字涉及到这几个基准线:顶线中线基线 (相当于英语四线格的倒数第二条线)底线内容区底线和顶线包裹的区域即下图深灰色背景区域其实基线之间的距离 顶线间距离 底线间距离 中线间距离line-height: [值];注意1:行高 上边距 下边距 字体大小上下边距是相等的, 此处字体大小是 16px, 行高 40px, 上下边距就分别是 12pxdiv classline-heightdiv上一行/divdiv classone中间行/divdiv下一行/div/divstyle.line-height .one{line-height: 40px;font-size: 16px;}/style效果展示:注意2:行高也可以取 normal 等值.这个取决于浏览器的实现. chrome 上 normal 为 21 px注意3:行高等于元素高度, 就可以实现文字居中对齐.div classline-heightdiv classone文本垂直居中/div/divstyle.line-height .one{height: 100px;line-height: 100px;}/style效果展示:3. 背景属性背景颜色background-color: [指定颜色]默认是 transparent (透明) 的. 可以通过设置颜色的方式修改.div classbgcdiv classone红色背景/divdiv classtwo绿色背景/divdiv classthree透明背景/div/divstylebody{background-color: bisque;}.bgc .one{background-color: red;}.bgc .two{background-color: green;}.bgc .three{background-color: transparent;}/style效果展示:背景图片background-image: url(...);比 image 更方便控制位置(图片在盒子中的位置)注意:1. url 不要遗漏.2. url 可以是绝对路径, 也可以是相对路径3. url 上可以加引号, 也可以不加.div classbgidiv classone背景照片/div/divstyle.bgi .one{background-image: url(cat.JPG);height:200px;}/style效果展示:背景平铺background-repeat: [平铺方式]重要取值:repeat: 平铺no-repeat: 不平铺repeat-x: 水平平铺repeat-y: 垂直平铺默认是 repeat.背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方.div classbgrdiv classone不平铺/divdiv classtwo水平平铺/divdiv classthree垂直平铺/div/divstyle.bgr .one{background-image: url(cat.JPG);height: 200px;background-repeat: no-repeat;}.bgr .two{background-image: url(cat.JPG);height: 200px;background-repeat: repeat-x;}.bgr .three{background-image: url(cat.JPG);height: 200px;background-repeat: repeat-y;}/style效果展示:背景位置background-position: x y;修改图片的位置.参数有三种风格:1. 方位名词: (top, left, right, bottom)2. 精确单位: 坐标或者百分比(以左上角为原点)3. 混合单位: 同时包含方位名词和精确单位div classbgpdiv classone背景居中/div/divstyle.bgp .one{background-image: url(cat.JPG);height:300px;background-repeat: no-repeat;background-color: purple;background-position: center;}/style效果展示:注意如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中.)如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为200)如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100垂直居中)]关于坐标系:计算机中的平面坐标系, 一般是左手坐标系(和高中数学上常用的右手系不一样. y轴是往下指的).背景尺寸background-size: length|percentage|cover|contain;可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px也可以填百分比: 按照父元素的尺寸设置.cover: 把背景图像扩展至足够大以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。把图像图像扩展至最大尺寸以使其宽度和高度完全适应内容区域.div classbgsdiv classone背景尺寸/div/divstyle.bgs .one{width: 500px;;height: 300px;background-image: url(cat.JPG);background-repeat: no-repeat;background-position: center;background-size: contain;}/style注意体会 contain 和 cover 的区别. 当元素为矩形(不是正方形) 时, 区别是很明显的.效果展示:contain:cover:4. 圆角矩形通过 border-radius 使边框带圆角效果.基本用法border-radius: length;length 是内切圆的半径. 数值越大, 弧线越强烈div嘻嘻/divstylediv{width: 200px;height: 200px;border: 2px solid green;border-radius: 10px;}/style效果展示:生成圆形让 border-radius 的值为正方形宽度的一半即可.div嘻嘻/divstylediv{width: 200px;height: 200px;border: 2px solid green;border-radius: 100px;/* 或者用 50% 表示宽度的一半 */border-radius: 50%;}/style效果展示:生成圆角矩形让 border-radius 的值为矩形高度的一半即可div嘻嘻/divstylediv{width: 200px;height: 100px;border: 2px solid green;border-radius: 50px;}/style效果展示:展开写法border-radius 是一个复合写法. 实际上可以针对四个角分别设置.border-radius 是一个复合写法. 实际上可以针对四个角分别设置.等价于border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:2em;border-bottom-left-radius:2em;border-radius: 10px 20px 30px 40px;等价于(按照顺时针排列)border-top-left-radius:10px;border-top-right-radius:20px;border-bottom-right-radius:30px;border-bottom-left-radius:40px;
css常用功能总结(二)(常用元素属性)
1. 常用元素属性CSS 属性有很多, 可以参考文档https://www.w3school.com.cn/cssref/index.asp1. 字体属性设置字体body {font-family: 微软雅黑;font-family: Microsoft YaHei;}字体名称可以用中文, 但是不建议.多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )如果字体名有空格, 使用引号包裹.建议使用常见字体, 否则兼容性不好.div classfont-familydiv classone这是微软雅黑/divdiv classtwo这是宋体/div/divstyle.font-family .one{font-family:Microsoft YaHei;}.font-family .two{font-family: 宋体;}/style效果展示:大小p {font-size: 20px;}不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)可以给 body 标签使用 font-size要注意单位 px 不要忘记.标题标签需要单独指定大小注意:实际上它设置的是字体中字符框的高度实际的字符字形可能比这些框高或矮div classfont-sizediv classone大大大/divdiv classtwo小小小/div/divstyle.font-size .one{font-size:40px;}.font-size .two{font-size: 10px;}/style效果展示:粗细div classfont-weightdiv classone粗粗粗/divdiv classtwo细细细/div/divstyle.font-weight .on粗细e{font-weight: 900;}.font-weight .two{font-weight: 100;}/style效果展示:文字样式/* 设置倾斜 */font-style: italic;/* 取消倾斜 */font-style: normal;很少把某个文字变倾斜.但是经常要把 em / i 改成不倾斜.div classfont-styleem放假啦/emdiv classtwo听说要补课/div/divstyle.font-style em{font-style: normal;}.font-style div.two{font-style: italic;}/style效果展示:2. 文本属性文本颜色认识 RGB我们的显示器是由很多很多的 像素 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色.设置文本颜色color: red;color: #ff0000;color: rgb(255, 0, 0);鼠标悬停在 vscode 的颜色上, 会出现颜色选择器, 可以手动调整颜色.color 属性值的写法:预定义的颜色值(直接是单词)[最常用] 十六进制形式RGB 方式十六进制形式表示颜色, 如果两两相同, 就可以用一个来表示.#ff00ff #f0fdiv classcolor这是一句话/divstyle.color{color: red;/* color: rgb(255, 0, 0); *//* color: #ff0000; */}/style效果展示:文本对齐控制文字水平方向的对齐.不光能控制文本对齐, 也能控制图片等元素居中或者靠右text-align: [值];center: 居中对齐left: 左对齐right: 右对齐div classtext-aligndiv classleft左对齐/divdiv classright右对齐/divdiv classcenter居中对齐/div/divstyle.text-align .left{text-align: left;}.text-align .right{text-align: right;}.text-align .center{text-align: center;}/style效果展示:文本装饰text-decoration: [值];常用取值:underline 下划线. [常用]none 啥都没有. 可以给 a 标签去掉下划线.overline 上划线. [不常用]line-through 删除线 [不常用]div classtext-decoratediv classone什么都没有/divdiv classtwo下划线/divdiv classthree上划线/divdiv classfour删除线/div/divstyle.text-decorate .one{text-decoration: none;}.text-decorate .two{text-decoration: underline;}.text-decorate .three{text-decoration: overline;}.text-decorate .four{text-decoration: line-through;}/style效果展示:文本缩进控制段落的 首行 缩进 (其他行不影响)text-indent: [值];单位可以使用 px 或者 em.使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)div classtext-indentdiv classone正常缩进/divdiv classtwo反向缩进/div/divstyle.text-indent .one{text-indent: 2em;}.text-indent .two{text-indent: -2em;}/style效果展示:行高行高指的是上下文本行之间的基线距离.HTML 中展示文字涉及到这几个基准线:顶线中线基线 (相当于英语四线格的倒数第二条线)底线内容区底线和顶线包裹的区域即下图深灰色背景区域其实基线之间的距离 顶线间距离 底线间距离 中线间距离line-height: [值];注意1:行高 上边距 下边距 字体大小上下边距是相等的, 此处字体大小是 16px, 行高 40px, 上下边距就分别是 12pxdiv classline-heightdiv上一行/divdiv classone中间行/divdiv下一行/div/divstyle.line-height .one{line-height: 40px;font-size: 16px;}/style效果展示:注意2:行高也可以取 normal 等值.这个取决于浏览器的实现. chrome 上 normal 为 21 px注意3:行高等于元素高度, 就可以实现文字居中对齐.div classline-heightdiv classone文本垂直居中/div/divstyle.line-height .one{height: 100px;line-height: 100px;}/style效果展示:3. 背景属性背景颜色background-color: [指定颜色]默认是 transparent (透明) 的. 可以通过设置颜色的方式修改.div classbgcdiv classone红色背景/divdiv classtwo绿色背景/divdiv classthree透明背景/div/divstylebody{background-color: bisque;}.bgc .one{background-color: red;}.bgc .two{background-color: green;}.bgc .three{background-color: transparent;}/style效果展示:背景图片background-image: url(...);比 image 更方便控制位置(图片在盒子中的位置)注意:1. url 不要遗漏.2. url 可以是绝对路径, 也可以是相对路径3. url 上可以加引号, 也可以不加.div classbgidiv classone背景照片/div/divstyle.bgi .one{background-image: url(cat.JPG);height:200px;}/style效果展示:背景平铺background-repeat: [平铺方式]重要取值:repeat: 平铺no-repeat: 不平铺repeat-x: 水平平铺repeat-y: 垂直平铺默认是 repeat.背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方.div classbgrdiv classone不平铺/divdiv classtwo水平平铺/divdiv classthree垂直平铺/div/divstyle.bgr .one{background-image: url(cat.JPG);height: 200px;background-repeat: no-repeat;}.bgr .two{background-image: url(cat.JPG);height: 200px;background-repeat: repeat-x;}.bgr .three{background-image: url(cat.JPG);height: 200px;background-repeat: repeat-y;}/style效果展示:背景位置background-position: x y;修改图片的位置.参数有三种风格:1. 方位名词: (top, left, right, bottom)2. 精确单位: 坐标或者百分比(以左上角为原点)3. 混合单位: 同时包含方位名词和精确单位div classbgpdiv classone背景居中/div/divstyle.bgp .one{background-image: url(cat.JPG);height:300px;background-repeat: no-repeat;background-color: purple;background-position: center;}/style效果展示:注意如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中.)如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为200)如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100垂直居中)]关于坐标系:计算机中的平面坐标系, 一般是左手坐标系(和高中数学上常用的右手系不一样. y轴是往下指的).背景尺寸background-size: length|percentage|cover|contain;可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px也可以填百分比: 按照父元素的尺寸设置.cover: 把背景图像扩展至足够大以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。把图像图像扩展至最大尺寸以使其宽度和高度完全适应内容区域.div classbgsdiv classone背景尺寸/div/divstyle.bgs .one{width: 500px;;height: 300px;background-image: url(cat.JPG);background-repeat: no-repeat;background-position: center;background-size: contain;}/style注意体会 contain 和 cover 的区别. 当元素为矩形(不是正方形) 时, 区别是很明显的.效果展示:contain:cover:4. 圆角矩形通过 border-radius 使边框带圆角效果.基本用法border-radius: length;length 是内切圆的半径. 数值越大, 弧线越强烈div嘻嘻/divstylediv{width: 200px;height: 200px;border: 2px solid green;border-radius: 10px;}/style效果展示:生成圆形让 border-radius 的值为正方形宽度的一半即可.div嘻嘻/divstylediv{width: 200px;height: 200px;border: 2px solid green;border-radius: 100px;/* 或者用 50% 表示宽度的一半 */border-radius: 50%;}/style效果展示:生成圆角矩形让 border-radius 的值为矩形高度的一半即可div嘻嘻/divstylediv{width: 200px;height: 100px;border: 2px solid green;border-radius: 50px;}/style效果展示:展开写法border-radius 是一个复合写法. 实际上可以针对四个角分别设置.border-radius 是一个复合写法. 实际上可以针对四个角分别设置.等价于border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:2em;border-bottom-left-radius:2em;border-radius: 10px 20px 30px 40px;等价于(按照顺时针排列)border-top-left-radius:10px;border-top-right-radius:20px;border-bottom-right-radius:30px;border-bottom-left-radius:40px;
