合肥网站建设步骤,WordPress文章收录代码,简单设置网站首页,如何防止网站被注册系列文章目录
前端系列文章——传送门 CSS系列文章——传送门 文章目录系列文章目录什么是 CSS3渐进增强和优雅降级CSS3 中的选择器CSS3 中的背景CSS3 中的边框CSS3 中的文本效果CSS3 中的字体 font-face什么是 CSS3 CSS3是CSS#xff08;层叠样式表#xff09;技术的升级版…系列文章目录
前端系列文章——传送门 CSS系列文章——传送门 文章目录系列文章目录什么是 CSS3渐进增强和优雅降级CSS3 中的选择器CSS3 中的背景CSS3 中的边框CSS3 中的文本效果CSS3 中的字体 font-face什么是 CSS3 CSS3是CSS层叠样式表技术的升级版本 于1999年开始制订2001年5月23日W3C完成了CSS3的工作草案 主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块 浏览器厂商按CSS节奏快速创新因此通过采用模块方法 CSS3规范里的元素能以不同速度向前发展因为不同的浏览器厂商只支持给定特性 但不同浏览器在不同时间支持不同特性这也让跨浏览器开发变得复杂
渐进增强和优雅降级 渐进增强Progressive Enhancement 一开始就针对低版本浏览器进行构建页面完成基本的功能 然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验 渐进增强相当于向上兼容 优雅降级Graceful Degradation 一开始就构建站点的完整功能然后针对浏览器测试和修复 比如一开始使用 CSS3 的特性构建了一个应用 然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览 优雅降级相当于向下兼容 区别 优雅降级是从复杂的现状开始并试图减少用户体验的供给 而渐进增强则是从一个非常基础的能够起作用的版本开始并不断扩充以适应未来环境的需要 降级功能衰减意味着往回看 而渐进增强则意味着朝前看同时保证其根基处于安全地带
CSS3 中的选择器 层级选择器 使用大于号表示 E ~ F 子选择器 选择匹配的F元素且匹配的F元素所匹配的E元素的子元素 使用波浪线表示 E F 相邻兄弟选择器 选择匹配的F元素且匹配的F元素紧位于匹配的E元素的后面 使用波浪线~表示 E ~ F 相邻选择器类似选择匹配的F元素且位于匹配的E元素后的所有匹配的F元素 属性选择器 E[attr]只使用属性名但没有确定任何属性值 E[attrvalue]指定属性名和属性值(值完整) E[attr~value]指定属性名并且具有属性值 此属性值是一个词列表并且以空格隔开其中词列表中包含了一个value词 E[attr^value]属性值是以value开头的(一部分也可以) E[attr$value]属性值是以value结束的(一部分也可以) E[attr*value]属性值中包含了value(一部分也可以) E[attr|value]属性值是value或者以“value-”开头的值 结构伪类选择器 (el):first-child 匹配属于任意元素的第一个子元素的 el 元素 (el):first-of-type 选择父元素中的第一个 el 元素 (el):last-child 选择所有 el 元素的最后一个子元素 (el):last-of-type 选择父元素中最后一个 el 元素 (el):empty 匹配没有子元素包括文本节点的 el 元素 (el):nth-child(n) 选择所有 el 元素的父元素的第 n 个子元素 (el):nth-of-type(n) 选择所有p元素第 n 个为 el 的子元素 (el):nth-last-child(n) 选择所有 el 元素倒数的第 n 个子元素 (el):nth-last-of-type(n) 选择所有p元素倒数的第 n 个为 el 的子元素 odd even numN (el):only-child 选择所有仅有一个子元素并且子元素是 el 元素 (el):only-of-type 选择所有仅有一个子元素中为 el 的元素 否定伪类选择器 :not(el) 选择所有 el 以外的元素 状态表单元素伪类选择器 :focus 选择元素输入后具有焦点 :enabled 匹配每个已启用的元素 :disabled 匹配每个被禁用的元素 :checked 匹配每个已被选中的 元素 :required 选择有required属性指定的元素属性 :optional 选择没有required的元素属性 :read-only 选择只读属性的元素属性 :read-write 选择没有只读属性的元素属性 :valid 选择所有有效值的属性 :invalid 在表单元素中的值是非法时设置指定样式 :in-range 用于标签的值在指定区间值时显示的样式 :out-of-range 选择指定范围以外的值的元素属性 目标伪类选择器 E:target 用来匹配文档中url中某个标志符的目标元素 url中的标志通常会包含一个#后面带有一个标志符名称
target 实现 tab 切换的案例
CSS3 中的背景 background-clip 规定背景的绘制区域 content-box padding-box border-box background-origin 规定背景图片的定位区域 content-box padding-box border-box background-size 规定背景图片的尺寸 !!! length 第一个值设置宽度第二个值设置的高度。如果只给出一个值第二个是设置为 auto(自动) percentage 第一个值设置宽度第二个值设置的高度。如果只给出一个值第二个是设置为 auto(自动) cover 完全覆盖背景定位区域的最小尺寸 contain 完全覆盖背景定位区域的最大尺寸 多背景 background:url(),url();
CSS3 中的边框 border-radius 设置 圆角边框 每个半径的四个值的顺序是左上角右上角右下角左下角。 如果省略左下角右上角是相同的 如果省略右下角左上角是相同的 如果省略右上角左上角是相同的 border-radius: 1-4 length|% / 1-4 length|%; 按顺时针的顺序斜杠/左边是四个圆角的水平半径右边是四个圆角的垂直半径 但是通常我们很少写右边的参数那就是默认右边等于左边的值 div { border-radius:10px 20px 30px 40px/40px 30px 20px 10px } 绘制网站 —— 直通车 border-image border-image-source 路径 border-image-slice 图片边框向内偏移 没有单位 一个数值 border-image-width 图像边界的宽度 border-image-repeat 平铺(repeat)铺满(round)拉伸(stretch) border-image-outset 边框图像区域超出边框的量
border-image: source slice width outset repeat|initial|inherit;box-shadow 设置一个或多个下拉阴影的框 h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影的大小 color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 inset 可选。从外层的阴影开始时改变阴影内侧阴影
box-shadow: h-shadow v-shadow blur spread color inset;多个
box-shadow: h-shadow v-shadow blur spread color inseth-shadow v-shadow blur spread color inset;/* 像素点阴影---- */ filter: drop-shadow(4px 4px 1px #ccc);CSS3 中的文本效果
text-shadow 向文本添加阴影 h-shadow 必需。水平阴影的位置。允许负值 v-shadow 必需。垂直阴影的位置。允许负值 blur 可选。模糊的距离 color 可选。阴影的颜色。参阅 CSS 颜色值
text-shadow: h-shadow v-shadow blur color;word-break 规定非中日韩文本的换行规则 normal 使用浏览器默认的换行规则 break-all 允许在单词内换行 keep-all 只能在半角空格或连字符处换行
word-break: normal|break-all|keep-all;word-wrap 允许对长的不可分割的单词进行分割并换行到下一行 normal 只在允许的断字点换行浏览器保持默认处理 break-word 在长单词或 URL 地址内部进行换行
word-wrap: normal|break-word;text-overflow 规定当文本溢出包含元素时发生的事情 clip 修剪文本 ellipsis 显示省略符号来代表被修剪的文本 string 使用给定的字符串来代表被修剪的文本
text-overflow: clip|ellipsis|string;CSS3 中的字体 font-face
使用以前 CSS 的版本网页设计师不得不使用用户计算机上已经安装的字体 使用 CSS3网页设计师可以使用他/她喜欢的任何字体 当你发现您要使用的字体文件时只需简单的将字体文件包含在网站中它会自动下载给需要的用户 Internet Explorer 8 以及更早的版本不支持新的 font-face 规则
font-family 必需规定字体的名称 src URL 必需定义字体文件的 URL font-stretch 可选定义如何拉伸字体 font-style 可选定义字体的样式 font-weight 可选定义字体的粗细。 unicode-range 可选定义字体支持的 UNICODE 字符范围
stylefont-face{font-family: myFirstFont;src: url(sansation_light.woff); /* IE9 */}div{font-family: myFirstFont;}
/style阿里巴巴矢量图标库 iconfont —— 直通车 选择class方式按说明引入字体文件
