广州省建设厅官方网站,网站seo如何做好优化,交易所网站建设,中国进口贸易网官网CSS选择器-CSS3属性
持续更新…
1、CSS3的概念和优势
css3概念:是css的升级版本,新增加了一些模块
css3优点:完全向后兼容,可使用新的选择器和属性,能实现新的设计效果CSS3是CSS技术的升级版本#xff0c;CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞…CSS选择器-CSS3属性
持续更新…
1、CSS3的概念和优势
css3概念:是css的升级版本,新增加了一些模块
css3优点:完全向后兼容,可使用新的选择器和属性,能实现新的设计效果
CSS3是CSS技术的升级版本CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂所以把它分解为一些小的模块更多新的模块也被加入进来。这些模块包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。
CSS3的优点CSS3将完全向后兼容所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说CSS3主要的影响是将可以使用新的可用的选择器和属性这些会允许实现新的设计效果譬如动态和渐变而且可以很简单的设计出现在的设计效果比如说使用分栏
2、新进增强和优雅降级
渐进增强优先构建低版本浏览器页面再针对高版本浏览器页面进行设计
优雅降级优先构建高版本浏览器页面再针对低版本浏览器页面进行兼容3、CSS3选择器
3.1层级选择器:
EF子选择器选择匹配的F元素且匹配的F元素所匹配的元素的子元素 EF相邻兄弟选择器选择匹配的F元素且匹配的F元素紧位于匹配的元素的后面 E~F通用选择器选择匹配的F元素且位于匹配的元素后的所有匹配的F元素
divspan{}子元素选择器,选择div中的子元素spandivspan{} 相邻兄弟选择器,选中div后紧挨着这一个的span(如果跟div还有其他的相邻兄弟选择器,比如p,则这时候span和p都不会被选到)div ~ span {} 通用兄弟选择器,选中div后的所有span3.2属性选择器 div[class]{}选中div,且div有class属性
div[classvalue]{}选中div,且div有class属性,同时值为value
div[class~value]{}选中div,且div具有class属性,包含值为value
[扩展]
div[class^value]{}以value开头
div[classvalue]{}以value结尾
div[class*value]{}包含value
div[class|value]{}只有value或者以value-值开头1、E[attr]:只使用属性名但没有确定任何属性值 2、E[attr“vaue”]:指定属性名并指定了该属性的属性值 3、E[attr~“value”]:指定属性名并且具有属性值此属性值是一个词列表并且以空格隔 开其中词列表中包含了一个value词而且等号前面的∽”不能不写· 矿展知识 4、E[attr^“value”]:指定了属性名并且有属性值属性值是以value开头的 5、E[attr$value]:指定了属性名并且有属性值i 而且属性值是以value结束的 6、E[attr*“value”]:指定了属性名并且有属性值而且属值中包含了value;口 7、E[attr|“value”]:指定了属性名并且属性值是value或者以value-开头的值比如说zh-cn)
3.3结构伪类选择器
div:first-child{}选中div是第一个子元素
div:last-child{}选中div是最后的一个子元素
div:nth-child(n)选中指定位置的div
n:是从0开始的自然数
2neven 偶数序列
2n-1odd 奇数序列
div:only-child{}选中div ,且div是唯一的子元素
:root{}选中根元素(html)
div:empty{}选中div,且div为空3.4目标伪类选择器
a href关联元素的id值点击位置/a
标签 idbox classbox1关联位置/标签
.box1:target3.5UI元素状态伪类选择器
:disabled()禁用状态
:enabled{}可用状态
:checked{}选中状态
::selection{}选中文本后高亮状态3.6否定伪类选择器
.box:not(.box2){}选中box,但是排除box2这个元素 ( box2没有被选择到)
3.7动态伪类选择器 :link{}未访问状态 :visited{}访问过后的状态 :hover{}鼠标悬停时状态 :active{}鼠标按下时状态\ [注意]有顺序要求LVHA
3.8用户行为选择器
:focus{}获取光标状态
4、CSS3属性前缀
1.浏览器兼容前缀
-ms- IE
-moz- 火狐
-o- 欧朋浏览器
-webkit-webkit内核浏览器
5、文本和盒子阴影
text-shadow:水平 垂直 模糊度 文本阴影颜色 水平阴影和垂直阴影可以为负数 box-shadow:水平 垂直 模糊度 阴影大小 盒子阴影颜色 内外阴影 内部阴影 inset 外部阴影 不写 6、字体模块(矢量图使用)
下载步骤之前有
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 第一种方式:第一步 --link relstylesheet hreffont/iconfont.css!-- 第三种方式:第一步 --script srcfont/iconfont.js/scriptstyle/* 第二种方式:第一步 */font-face {font-family: iconfont;src: url(font/iconfont.woff2?t1692602955385) format(woff2),url(font/iconfont.woff?t1692602955385) format(woff),url(font/iconfont.ttf?t1692602955385) format(truetype);}/* 第二种方式:第二步 */.iconfont {font-family: iconfont !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}/* 第三种方式:第二步 */.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}/style
/headbody!-- 第一种方式:第二步 --span classiconfont icon-taobaotese ewer/span!-- 第二种方式:第三部 --span classiconfont#xe602;/span!-- 第三种方式:第三步 --svg classicon aria-hiddentrueuse xlink:href#icon-a-gouwuche-fill2x/use/svg
/body/html7、背景属性
背景大小:
background-size:背景图大小;
px %
cover等比例缩放,有可能超出元素
contain 等比例缩放,有可能元素留白
多背景设置:background:URL(),URL()8、边框属性
圆角:
border-radius:值1border-radius:水平值1 / 垂直值1
