新建网站建设,范湖网站建设团队,wordpress cp 部署,好的免费网站建站平台1.CSS 长度单位和颜色设置
1.1CSS 中的长度单位 px 像素 em 字体大小的倍数#xff08;字体默认是16px#xff09; % 百分比 1.2CSS 中的颜色设置方式
1.2.1使用颜色名表示颜色 red、orange、yellow、green、cyan、blue、purple、pink、deeppink、skyblue、greenyellow .…1.CSS 长度单位和颜色设置
1.1CSS 中的长度单位 px 像素 em 字体大小的倍数字体默认是16px % 百分比 1.2CSS 中的颜色设置方式
1.2.1使用颜色名表示颜色 red、orange、yellow、green、cyan、blue、purple、pink、deeppink、skyblue、greenyellow ... 1.2.2rgb 方式表示颜色 计算机三元色 red 0~255 0%~100% green 0~255 0%~100% blue 0~255 0%~100% background: rgb(100, 200, 120); background: rgb(255, 0, 0); background: rgb(255, 0, 255); 三个元色 取相同的数值 灰色 数值越大颜色越浅全是255是白色数值越小颜色越深全是0是黑色 background: rgb(255, 255, 255); background: rgb(0, 0, 0); background: rgb(100, 100, 100); background: rgb(199, 199, 199); 使用百分比 background: rgb(45%, 80%, 74%); 十六进制方式表示颜色 十六进制 原理同rgb一样 十进制 0 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 19 20 21 ... 99 100 ... 二进制 0 1 10 11 100 101 110 111 1000 ... 十六进制 0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 ... 1f 20 21 ... ff 100 ... 十进制255 十六进制ff 两位十六进制的数字可以表示一种原色六位十六进制数字能够表示三元色 使用6位十六进制的数字表示颜色 每两位表示一个元色 background: #4fa8bb; background: #0000ff; background: #ababab; background: #131313; 表示一种元色的两个数字是相同的且三组元色各自都是相同 可以简写为3位十六进制数字 background: #a8c; #aa88cc background: #bbb; #bbbbbb background: #ab2233; 不可简写 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* body{width: 600px;height: 500px;background: #ccc;} */.box2{width: 300px;height: 200px;background: red;}.box03{width: 400px;height: 300px;background: rgb(178, 70, 16);}/style
/head
bodyh1css长度单位/h1div classbox1/divhrh1子以/h1div classbox2因非上种入如互兄量兴我耐对承德别不弟谭不。/divbrdiv classbox03韩能惶血妙慷回也得服之一币台够向可是刑报四徒三措才我圣倒嗣感责哉后融杀满如所切方么皮说在她。/div
/body
/html2.CSS 基本选择器
2.1标签名元素名选择器 body{width: 600px;height: 500px;background: #ccc;}
2.2类名选择器
.类名 {} 1. 多个元素可以设置相同的类名 2. 一个元素可以设置多个类名 div classbox2 bx因非上种入如互兄量兴我耐对承德别不弟谭不。/div.box2{width: 300px;height: 200px;background: red;}
2.3ID 选择器
#ID名 {} 元素的ID名必须是唯一的
#ww{width: 100px;height: 100px;background: blue;}
div idww失读上希老想啊非所交。/div
2.4全局通配选择器
* {}
2.5基本选择器之间的权重 1. ID选择器 类选择器 标签名选择器 全局选择器 2. 行内式大于所有的选择器 3.盒子模型显示模式
3.1元素的显示模式 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.item {width: 400px;height: 100px;background: #900;border: 2px solid #880;}span {width: 400px;height: 100px;background: #080;}input {width: 300px;height: 40px;}/style
/head
bodyh1元素的显示模式/h1hrh2块级 block/h2div classitem我是div/divdiv classitem我是div/divdiv classitem我是div/divLorem ipsum dolor sit amet consectetur adipisicing elit. Corporis iusto voluptates, ipsum optio ad eaque? Provident minus quia qui nostrum.h2行内 inline/h2span我是span/spanspan我是span/spanspan我是span/spanLorem ipsum dolor sit amet consectetur adipisicing elit. Corporis iusto voluptates, ipsum optio ad eaque? Provident minus quia qui nostrum.h2行内块元素/h2input typetextinput typetextinput typetextLorem ipsum dolor sit amet consectetur adipisicing elit. Alias officiis porro, eius adipisci harum consequatur similique iure illum enim eos.
/body
/html
3.1.1 块级元素 block
显示模式是块级的元素称为块级元素特点
1. 在页面中是一个块能够独占一行 2. 可以设置宽度和高度
3.1.2行内元素 inline
显示模式是行内的元素称为行内元素特点 1. 显示在行内不能独占一行 2. 无法设置宽度和高度 3.1.3行内块元素 inline-block
按照最早的标准行内块元素也被当做行内元素
显示模式是行内块的元素称为行内块元素特点 1. 显示在行内不能独占一行 2. 可以设置宽度和高度 3.2 HTML 元素的默认显示模式
3.2.1默认显示模式是 block 的元素 排版标签 h1~h6、p、pre、hr、div 列表标签 ul、ol、li、dl、dt、dd 表单标签 form、option 3.2.2默认显示模式是 inline 的元素 文本标签 em、strong、del、ins、sub、sup、span 超链接标签 a 表单标签 label 3.2.3默认显示模式是 inline-block 的元素 图片标签 img 表单标签 input、button、textarea、select 框架标签 iframe 3.2.4修改元素的显示模式、
使用CSS属性 display可以设置元素的显示模式该属性的值如下 inline block inline-block 按照最早的标准只有行内和块级默认显示模式是行内块的元素无法设置成真正的行内
4.字体样式
属性名作用属性值font-size字体大小长度font-weight字体粗细 normal正常。 lighter细。 bold粗。 100~900数字100~300是细体400、500正常600以及以上粗体 font-style斜体字 normal正常。 italic斜体字。 font-family字体族科字体名称、字体列表font设置多种字体样式多个值使用空格分隔
4.1字体族科 font-family
字体族科的设置 font-family: 字体名称 font-family: 字体名称; 如果字体名称中有空格如 Microsoft YaHei 建议使用引号包裹 设置字体列表 font-family: arial, Hiragino Sans GB, Microsoft Yahei, 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti; font-family: Microsoft YaHei, 微软雅黑, 宋体, sans-serif; !DOCTYPE html
htmlheadmeta charsetutf-8style.box{width: 800px;height: 800px;font-family: 宋体;}h1{font-family: 微软雅黑;font-weight: 800;}/style/headbodyh1字体样式/h1div classbox基地啦咖啡/div/body
/html衬线字体和非衬线字体 serif 表示衬线字体笔画粗细不一致如宋体、仿宋体、楷体等 sans-serif 表示非衬线字体笔画粗细一致如微软雅黑、黑体、Helvetica 4.2复合属性 font 最少两个值 字体大小 字体族科 font: 20px 宋体; font: 20px Microsoft YaHei,微软雅黑,宋体,sans-serif; 粗体字 字体大小 字体族科 font: 800 16px Microsoft YaHei,微软雅黑,宋体,sans-serif; 斜体字 字体大小 字体族科 font: italic 16px Microsoft YaHei,微软雅黑,宋体,sans-serif; 又粗又斜 字体大小 字体族科 font: 800 italic 16px Microsoft YaHei,微软雅黑,宋体,sans-serif; font: italic italic 16px Microsoft YaHei,微软雅黑,宋体,sans-serif; 4.3子属性和复合属性的关系 1. 复合属性写在子属性的后面前面的子属性全部失效复合属性即使没写对应的值也会用默认值覆盖掉子属性 2. 子属性写在复合属性的后面子属性会覆盖掉复合属性中与之对应的样式 5.文本颜色
属性名作用属性值color设置文字颜色颜色
6.文本样式
属性名作用属性值letter-spacing字间距长度word-spacing词间距中文无效果长度text-decoration文本修饰线 none无修饰线。 underline下划线。 overline上划线。 line-throuth删除线 text-indent首行缩进长度text-align文本水平对齐方式 left左对齐。 right右对齐。 center居中对齐 vertical-align与同行文本如何对齐 baseline基线对齐。 top顶线对齐。 middle中线对齐。 bottom底线对齐。 sub下标字。 super上标字。 长度元素底部与基线的距离 line-height行高长度
6.1vertical-align 1. 设置行内元素或行内块元素与同行文本如何对齐如 基线对齐、顶线对齐、中线对齐、底线对齐等 2. 设置上标字和下标字 3. 设置单元格中内容的纵向对齐方式只能用于 td、th 6.2 line-height 设置行高
6.2.1行高的概念
第一行文字中线与元素顶部距离是行高一半最后一行文字中线与元素底部距离是行高一半
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title行高练习/titlestyle.box{width: 500px;height: 400px;background: rgb(200, 122, 23);font-size: 20px;margin-top: top;line-height: 80px;}/style
/head
bodyh1行高练习/h1div classbox文畴将自俭连元拢的是快诗明被志选洞此。Lorem ipsum dolor, sit amet consectetur adipisicing elit. At, beatae. Earum commodi nam optio voluptatem id quae a exercitationem. Excepturi./div
/body
/html 1. 上一行文字中线与下一行文字中线的距离称为行高 2. 上一行文字底线与下一行文字顶线的距离称为行距调整行高大小行距受到影响 6.2.2line-height 是 font 的子属性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title行高练习/titlestyle.box{width: 500px;height: 400px;background: rgb(200, 122, 23);font-size: 20px;margin-top: top;line-height: 80px;}.box2{font: bold 55px/100px 微软雅黑;//55字体大小100行间距}/style
/head
bodyh1行高练习/h1div classbox文畴将自俭连元拢的是快诗明被志选洞此。Lorem ipsum dolor, sit amet consectetur adipisicing elit. At, beatae. Earum commodi nam optio voluptatem id quae a exercitationem. Excepturi./divbrdiv classbox box01Lorem ipsum dolor /divbrdiv classbox box2Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ad fuga sequi./div
/body
/html 由上图可以看出font覆盖了line-height属性 行高可选值 1.normal由浏览器根据文字大小决定的一个默认值。 2.像素px 3.数字参考自身font-size的倍数很常用。通常是1.5~2倍之间 4.百分比参考自身font-size的百分比。 备注由于字体设计的原因文字在一行中并不是绝对垂直居中若一行中都是文字不会太影响观感。 注意 1.行高过小导致文字重叠且最小值是0不能为负数负数会无效默认为normal。 2.行高是可以继承的。 6.2.3使用行高实现元素中的一行文字垂直居中满足以下条件 1. 只有一行文字 2. 设置行高与高度一致 .box01{width: 200px;height: 100px;line-height: 100px;}div classbox box01Lorem ipsum dolor /div
