建设部规范公布网站,2345浏览器网页版入口中文版,软件开发app开发,学网页设计学徒培训目录 1. 字体属性 1.1 设置字体家族 font-family 1.2 设置字体大小 font-size 1.3 设置字体粗细 font-weight 1.4 设置字体倾斜 font-style 2. 文本属性 2.1 设置文本颜色 color 2.2 文本对齐 text-align 2.3 文本装饰 text-decoration 2.4 文本缩进 text-indent 2.…目录 1. 字体属性 1.1 设置字体家族 font-family 1.2 设置字体大小 font-size 1.3 设置字体粗细 font-weight 1.4 设置字体倾斜 font-style 2. 文本属性 2.1 设置文本颜色 color 2.2 文本对齐 text-align 2.3 文本装饰 text-decoration 2.4 文本缩进 text-indent 2.5 行高 line-height 3. 背景属性 3.1 背景颜色 background-color 3.2 背景图片 background-image 3.2.1 背景图片平铺设置background-repeat 3.2.2 背景图片位置设置background-position 3.2.3 背景图片大小background-size 4. 圆角矩形 4.2 生成圆角矩形 4.3 生成圆形 5. 元素的显示模式 5.1 块级元素 display:block 5.2 行内元素 display:inline 5.3 块级元素和行内元素的区别 6. CSS盒子模型 6.1 边框 6.2 内边距 6.3 外边距 7. 弹性布局 7.1 开启弹性布局 display 7.2 设置元素的水平排列方式 justify-content 7.3 设置元素的垂直排列方式 align-items 1. 字体属性 1.1 设置字体家族 font-family !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.one{font-size: 25px;font-family: 微软雅黑;}.two{font-size:25px;font-family:宋体;}.three{font-size: 25px;font-family: 黑体;}.four{font-size: 25px;font-family: 华文行楷;}/style /head bodydiv classone这是第一个div/divdiv classtwo这是第二个div/divdiv classthree这是第三个div/divdiv classfour这是第四个div/div /body /html 运行后页面如下 注1font-family属性指定的字体要求必须是系统已经安装的字体上文代码所使用的微软雅黑、宋体、黑体、华文行楷都是windows系统自带的字体故而直接指定字体是可以正确显示的。 如果需要指定一些特殊字体系统上没有则不能正确显示。 这种情况一般是需要通过浏览器请求对应的服务器获取到指定字体文件才能进行设置一般网站都使用系统自带字体 1.2 设置字体大小 font-size 示例代码同上此处不再赘述 注1浏览器中的每个文字可视为一个方框英文与拉丁文的方框可能比较窄中文的方框一般是正方形可以将设置字体大小视为设置字体方框的高 2如果需要使用截图工具如QQ截图、微信截图等进行大概手动测量注意设置浏览器缩放与显示器缩放为100%否则可能会测量与设置不符 1.3 设置字体粗细 font-weight !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.one2{font-size: 25px;font-family: 微软雅黑;}.one{font-size: 25px;font-family: 微软雅黑;font-weight: bold;}/style /head bodydiv classone2这是第一个div/divdiv classone这是第一个div/div/body /html 运行后页面如下 注1字体粗细的设置参考mdn文档有 截图链接font-weight - CSS层叠样式表 | MDN (mozilla.org) 2字体也可以通过设置字体粗细实现标题效果html很多标签都可以通过cs实现 1.4 设置字体倾斜 font-style !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.one2{font-size: 25px;font-family: 微软雅黑;}.one{font-size: 25px;font-family: 微软雅黑;font-style: italic;}/style /head bodydiv classone2这是第一个div/divdiv classone这是第一个div/div /body /html 运行后页面如图 ​ 2. 文本属性 2.1 设置文本颜色 color 计算机表示颜色方式 1RGB现实中很多颜色都是由红绿蓝三原色混合而成的而计算机也可采用RGB三色调和表示颜色计算机给RGB各分配一个字节每个字节的范围时0~25500~FF !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.one{font-size: 25px;font-family: 微软雅黑;color:rgb(255,0,0);}/style /head bodydiv classone这是一个div/div /body /html 如上文rgb(255,0,0)表示red分量设置为最大值green、blue分量均设置为0 注当三各颜色分量均设置为255最大值时将会呈现白色 当三个颜色分量均设置为0时将会呈现黑色 2在前端中每个分量都使用一个字节来表示范围0~255或0~0xff其中每两个十六进制数表示一各颜色分量如 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* .one{font-size: 25px;font-family: 微软雅黑;color:rgb(255,0,0);} */.two{font-size: 25px;font-family: 微软雅黑;color:#ff0000;}/style /head bodydiv classone这是一个div/div /body /html 表示红色分量设置为最大值蓝色和绿色分量均设置为0故而最终字体为红色 注16进制表示数字可以缩写如果每个分量的两个十六进制数字都相同就可以把6位16进制数字缩写成3位十六进制如表示纯红色既可以写为#f0000也可以写为#f00 3直接使用颜色单词表示如redbluegreen等 2.2 文本对齐 text-align text-align属性可设置为left靠左对齐center居中对齐right靠右对齐等 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.one{font-size: 25px;font-family: 微软雅黑;color:rgb(255,0,0);text-align: center;}/style /head bodydiv classone这是一个div/div /body /html 运行后页面如下 ​ 2.3 文本装饰 text-decoration 常用取值为 underline下划线 none可用于给a标签去下划线 overline上划线 line-through删除线 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylea{text-decoration: none;}/style /head bodydiva href#链接1/a/div /body /html 运行后页面如下 ​ 2.4 文本缩进 text-indent text-indent有两种取值表示方式 第一种像素表示法根据字体大小自行计算缩进值如字体大小为20px则缩进两格可以标识为text-indent:20px; 但是这种方法不仅要自行根据字体大小计算缩进尺寸并且当字体大小变化时缩进尺寸还需另行计算并随之更改表示绝对故而并不常用 第二种em表示法em是一个相对量是以文字尺寸为基础来进行设置的如果文字大小是25px则1em25px2em50px !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.one{text-indent: 2em;}/style /head bodydiv classone这是一个div/divdiv这是第二个div/div /body /html 运行后页面如图 ​ 注1文本缩进的取值可以为负数负数表示往左缩进 ​ 2.5 行高 line-height HTML中展示文字涉及到以下基准线 ​ 行高文字高度行间距 如运行以下代码 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.one{font-size: 25px;font-family: 微软雅黑;color:rgb(255,0,0);text-align: left;text-decoration: line-through;text-indent: 2em;line-height: 45px;}/style /head bodydiv classone这是一个div/divdiv classone这是第二个div/div /body /html 运行后页面如图​ 此时字体大小25px行高45px即行间距20px 3. 背景属性 3.1 背景颜色 background-color !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.one{font-size:25px;color:brown;font-family:微软雅黑;background-color:cadetblue;}/style /head bodydiv classone这是一个div/div /body /html 运行后页面如图 ​ 3.2 背景图片 background-image 通过background-image:url(图片名称)设置图片背景 3.2.1 背景图片平铺设置background-repeat 当引入背景图片后默认情况下图片是平铺的可以使用background-repeat:no-repeat来取消平铺仅为单个照片图片出现在左上角。 3.2.2 背景图片位置设置background-position 设置方法1 使用top、center、bottom等方位词设置图片位置 如background-position:center center令图片水平居中垂直居中 backgroun-position:top center令图片水平居中垂直在上 设置方法2 使用像素进行左表设置图片位置 注意计算机中的坐标系是原点在左上角y轴正方向竖直向下x轴正方向水平向右的左手坐标系 3.2.3 背景图片大小background-size 设置方法1 像素设置手动指定背景图片的长和高 设置方法2 contain令图片尽可能大地展示但图片须全图展示 cover令图片完全覆盖背景区域背景图像的某些部分可能无法展示在背景定位区域中 注在background属性的加持下任何一个元素都可以用来显示图片而且提供的功能比image标签更强大 4. 圆角矩形 HTML元素默认都是一个个矩形但有时候需要表示带有圆角的矩形 使用border-radius:进行像素设置来指定矩形角的内切圆半径值 4.2 生成圆角矩形 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.one{width: 200px;height:100px;background-color: orange;color:#fff;text-align:center;line-height:100px;border-radius: 10px;/* 表示矩形角的内切圆半径为10px */}/style /head bodydiv classone这是一个div/div /body /html 运行后页面如下 注当设置的内切圆半径为矩形高度的一半就会有以下胶囊型形状 4.3 生成圆形 当原矩形为正方形时再将矩形角内切圆半径设置为边长的一半就可以生成圆形 style.one{width: 150px;height:150px;background-color: orange;color:#fff;text-align:center;line-height:150px;border-radius: 75px;/* 表示矩形角的内切圆半径为10px */}/style 运行后页面如下 5. 元素的显示模式 5.1 块级元素 display:block 常见的块级元素有 h1 - h6 p div ul ol li ... 5.2 行内元素 display:inline 常见的行内元素有  a strong b em i del s ins u span ... 5.3 块级元素和行内元素的区别 1块级元素独占一行行内元素不独占一行 2块级元素高度、宽度、内外边距都可以设置 行内元素的高度、宽度、行、高均无效内边距有效外边距有时有效有时无效 3块级元素默认宽度和父元素一样宽行内元素默认宽度和连内容一样宽 一般将行内元素转成块级元素 6. CSS盒子模型 任何一个HTML块级元素都是一个矩形盒子 从内到外分别为内容content、内边距padding、边框border、外边距margin 通过设置这几内边距、边框、外边距这几个属性就可以控制元素之间、元素和内容之间的相对位置了 6.1 边框 1border属性直接设置了四个方向 还可以使用border-left、border-right、border-top、border-bottom分别设置四个方向 2设置边框要设置三个方面 ①、边框的粗细 ②、边框的颜色 ③、边框的风格实线solid、虚线dashed、点线dotted... !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.one{width:200px;height:100px;background-color: orange;color:white;text-align: center;line-height: 100px;border:5px chocolate solid;}/style /head bodydiv classone这是一个div/div /body /html 运行后页面如下 注2width和height表示的是内容的尺寸加上边框后内容尺寸没有变化但边框会撑大盒子 2大多数情况下都不希望因为边框撑大盒子因为会影响该元素与其他元素的相对位置可以使用一些专用属性防止盒子被撑大 style.one{width:200px;height:100px;background-color: orange;color:white;text-align: center;line-height: 100px;border:5px chocolate solid;box-sizing: border-box;}/style 将box-sizing属性设置为border-box就可以避免边框撑大盒子即该情况下的边框是向内增加边框 6.2 内边距 内边距设置的是内容与边框之间的距离 以文字左对齐为例可以通过设置padding-left指定内容与边框的距离 style.one{width:200px;height:100px;background-color: orange;color:white;text-align: left;line-height: 100px;border:5px chocolate solid;box-sizing: border-box;padding-left: 10px;}/style 使用网页的开发者工具查看布局可以看出padding内边距被设置为10px  注1如果要设置四个方向的内边距可以使用padding:npx进行设置 2padding:10px 表示四个方向内边距均为10px padding:10px 20px 表示上下内边距是10px左右内边距是20px padding:10px 20px 30px 40px 将上右下左顺时针四个内边距依次设置为10px20px30px40px 6.3 外边距 外边距设置的是元素和元素之间的距离 试查看以下代码的运行页面 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.one{width:200px;height:100px;background-color: orange;color:white;text-align: left;line-height: 100px;border:5px chocolate solid;box-sizing: border-box;padding-left: 10px;}.two{width:200px;height:100px;background-color:grey;}/style /head bodydiv classone这是一个div/divdiv classtwo这是第二个div/div /body /html 其运行页面如下  可见当没有设置外边距margin时两个div之间没有间距此时可以使用对第一个div元素下外边距设置5像素 style.one{width:200px;height:100px;background-color: orange;color:white;text-align: left;line-height: 100px;border:5px chocolate solid;box-sizing: border-box;padding-left: 10px;margin-bottom: 5px;}.two{width:200px;height:100px;background-color:grey;}/style 运行后页面如下 注1同理padding,margin也可以分别对上下左右进行设置 2margin-left和margin-right可以设置为auto即令浏览器自动调节此时该元素就可以在父元素内部居中放置 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.one{width:200px;height:100px;background-color: orange;color:white;text-align: left;line-height: 100px;border:5px chocolate solid;box-sizing: border-box;/* padding-left: 10px; */margin-bottom: 5px;}.three{width:50px;height: 50px;background-color: brown;margin-left: auto;margin-right:auto;}/style /head bodydiv classonediv classthree/div/div /body /html 此时就可以实现元素的居中 但是垂直方向设置为auto不能实现垂直反向的居中效果 7. 弹性布局 弹性布局是用于实现页面布局的即控制某个指定元素放到某个指定位置 试运行以下代码 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width:100%;height:150px;background-color:darksalmon;}divspan{background-color:lightslategrey;width: 100px; /* 行内元素宽度设置无效 */}/style /head bodydivspan1/spanspan2/spanspan3/span/div /body /html 运行后页面如下 行内元素虽然是在水平上排列的但由于其尺寸、边距等均不太可控并不适合进行水平布局 行内块元素和行内元素一样会把源码中的换行当做一个空格也会对页面元素布局产生不必要的影响使用弹性布局是更合适的 7.1 开启弹性布局 display 开启弹性布局display:flex; 给要水平排列的元素的父元素设置flex stylediv{width:100%;height:150px;background-color:darksalmon;display: flex;}divspan{background-color:lightslategrey;width: 100px; /* 行内元素宽度设置无效 */}/style 运行后页面如下 此时弹性容器内的元素不再是“块级”“行内”元素而成为弹性元素遵守弹性布局可以设置尺寸和边距了 7.2 设置元素的水平排列方式 justify-content justify-content:flex-start  表示靠左排列 justify-content:flex-end;   表示靠右排列 justify-content:flex-center;    表示居中排列 除此之外还有可将justify-content设置为space-between即每个元素左右两侧都有等间距空白实线元素在水平方向的等间距排列 7.3 设置元素的垂直排列方式 align-items align-items:flex-start;   表示靠顶排列 align-items:flex-end;   表示靠底排列 align-items:center;  表示居中排列 试运行以下代码   !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width:100%;height:150px;background-color:darksalmon;display: flex;justify-content: flex-start;align-items: center;}divspan{background-color:lightslategrey;width: 100px;height:100px;}/style /head bodydivspan1/spanspan2/spanspan3/span/div /body /html 运行后页面如图 可见span1、2、3在水平方向实现了靠左排列在垂直方向实现了居中排列