网站公告:网站资料更新中...
新闻动态 >> 返回 您当前所在位置:首页 > 新闻资讯 > 新闻动态 > 正文

前端开发之CSS

更新时间:2017-08-31 09:51:05点击次数:343次字号:T|T
什么是选择器?就是规定以及匹配了哪些元素能够使用 { } 内的样式



小金在教大家使用CSS做圆锥效果后,看大家对css很感兴趣,接下来小金准备分享一篇CSS中 最最最重要 的部分-选择器!


什么是选择器?


就是规定以及匹配了哪些元素能够使用 { } 内的样式




通配选择器*

匹配页面中所有的标签元素;语法规定是:*{属性:值};常用于定义全局样式,如字体大小颜色等



元素/标签选择器 p、div、span等

就是匹配某一类标签;语法规范:p{属性:值}



类选择器 —“.className”

就是匹配某一个或一组class名的标签“语法规范:.className{属性:值}



分类选择器  —“p.name”

就是匹配某一标签中,指定类名的目标标签,语法规范:p.name{属性:值} 就是匹配p标签中类名为name的p标签



id选择器—“#idName”

就是匹配某一个id值的标签,语法规范:#idName{属性:值},注意这个匹配绝对是只有一个目标,因为id是不允许重复的,唯一的,因为id对应的目标元素也是唯一的,这个方式定位到目标元素是最准确的。




群组选择器

这个选择器,不是特别的选择器,是指多个元素在有相同样式的情况下,可以通过在选择器之间加","隔开,这样能使多个元素运用{}后的样式,语法规范:p,div{属性:值},意思即p div有相同的样式,这个方式使得CSS代码能加简洁


后代选择器

这个方式就通过元素的位置来匹配,后代选择器是指某一个元素即<标签>内所有的元素,通过选择器1 选择器2的方式定位到某一元素的后代元素;如

我的div的后代1

我的div的后代2

语法规范:div p{属性:值} 这样就能选择匹配到div后代所有的p了,不管是第一层还是第n层的p




子代选择器

这个方式也是通过元素的位置来匹配,和后代选择器不同的时,子代选择器匹配到的是某一个标签的第一层后代,仅仅是父子关系,方式也和后代选择器不同,方式是通过“>”;语法规范:div>p{属性:值}



伪类选择器

这个选择器通过匹配识别元素的某一个状态;

伪类选择器分类:


a)链接伪类:适用于未访问的链接a即a:link,适用于访问过后的链接a即a:visited。


b) 动态伪类:适用于鼠标悬停时即:hover,适用于元素被激活时即:active,适用于元素获取焦点时(一般是指表单)即:focus.


c) 目标伪类。


d) 元素状态伪类。


e)结构伪类。


f)否定伪类。



css一些常用属性



>>>>

颜色单位

颜色的表达方式有3种,数值、英文字母、英文单词;数值表示方式语法规范:rgb(xxx,xxx,xxx)其中,rgb对应的颜色分别:红色、绿色、蓝色;XXX数值的范围是0-250-255,常见红色为(255,0,0),绿色为(0,255,0),蓝色(0.0,255)。英文字母方式语法规范:color:#xxxxxx其中xx取值范围0-9a-fA-F,比如白色即color:#ffffff,如果2个1、2或3、4或者5、6的值是一样的,那么可以缩写为1个字母,如#fff。英文单词就比较简单了,如black、red等,这个方式比较单一,颜色比较简单


>>>>

尺寸

常用于设置宽度和高度;width、height;只有块级元素才能设置宽度和高度、行内元素不能设置宽度和高度

如果设置的width或者height过大,超出它父级的范围那么就涉及到溢出问题了。当内容溢出时可以处理方式有:溢出可见(visible)、隐藏(hidden)、设置滚动条(scroll)、自动(auto)、横向溢出(overflow-x)、纵向溢出(overflow-y)


>>>>

边框

border 语法规范:border:边框的宽度 边框的样式(虚线还是实线) 边框的颜色====border:1px solid red


>>>>

边框倒角

即边框4个脚的圆弧设置,语法规范:border-readius:xx xx xx xx,如果有4个值那么就是表示从左上角、右上角、右下角、左下角的边框倒角;如果只有1个值,那么表示这个4个边框倒角为统一值。




(编辑:admin)
Tel:400-888-9789
QQ:400-888-9789