属性选择器及背景
//属性选择器
属性选择器的标准语法如下:
E[attribute]
{
属性:属性值;
属性:属性值;
}
E 代表元素 attribute 代表属性
//自定义属性选择器
自定义属性:只需要在标签后加上自定义的属性,例如<div data-code></div>
中的data-code
语法如下:
<style>
[data-code]{
属性:属性值;
属性:属性值;
}
</style>
若自定义属性内有值则需要在中括号内完整的写出。
属性选择器也可以选择已有属性,可选择同一标签内多个属性。中括号内就是属性[ ]。
//通配符选择器(也叫做子字符串选择器)
*所有 ^开头 $结尾 ~包含 |默认加-
[data-code^=“kk”]{属性值开头带有kk的}
[data-code$=“kk”]{属性值结尾带有kk的}
[data-code*=“kk”]{所有属性值带有kk的}
[data-code~=“kk”]{属性值带有kk单词的,中间加空格}
[data-code|=“kk”]{属性值带有kk-的(例如data-code=“kk-a”)}
//后代选择器(又称包含选择器)
后代选择器可以选择作为某元素后代的元素。
我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外的一些结构中不起作用。规则左边的选择器一段包括两个或多个用空格分割的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合夫可以解释为“…在…找到…”“…作为…的一部分”“…作为…的后代”,但是要求必须从右到左读选择器。
后代选择器的书写方法:把外层的标记写在前面,内层的标记写在后面,之间用空格分隔,当标记发生嵌套时,内层的标记就成为外层标记的后代了。
后代选择器语法格式如下:E1 E2{属性:属性值;属性:属性值;...}
//子(元素) 选择器
子元素选择器只能选择作为某元素的子元素。子选择器使用了大于号(子结合符)。子结合符两边可以有空白符,这是可选的。
子选择器的语法格式如下:E > F{属性:属性值;属性:属性值;...}
//相邻选择器
相邻选择器可以选择紧接在另一元素后的元素,而且他们具有相同的父元素。即,E和F具有相同的父元素。且F在E后面紧紧相邻。
相邻选择器的语法格式如下:E + F{属性:属性值;属性:属性值;...}
//选择器分组
如下有两个选择器。
<style>
h1{color:gold;}
p{color:gold;}
</style>
为了同时应用这两个选择器,我们可以使用选择器分组。将两个选择器的标签用逗号隔开,这样就将两个标签应用了这一个属性。
<style>
h1,p{color:gold;}
</style>
//伪类选择器
伪类用来指定选择器某种特定状态或者条件,伪类在DOM中并不存在,但对用户是可见的。
语法如下:
选择符:伪类{属性:属性值;属性:属性值;...}
//动态伪类
1、hover 鼠标滑过
2、link 向未访问过的链接添加样式
3、visited 向访问过的链接添加样式
4、active 激活元素添加样式(例如:按下)
5、focus 向拥有输入键盘焦点的元素添加样式 solid 实线 border 边框
以下是5个例子:
<style>
a:hover{
color:red;
}
a:link{
color:green;
}
a:visited{
color:pink;
}
a:active{
color:blue;
}
input[type="text"]:focus{
border:10px soild #000000
}
</style>
//结构性伪类
1、first-child 匹配父类第一个子元素
2、last-child 匹配父类最后一个子元素
3、nth-child(n) 匹配父类元素第几个子元素 odd 2n 匹配奇数 even 2n+1偶数
下面是例子,以1为例,用法相同:
ul>li:first-child
{
color:red;
}
//语言伪类
1、:lang(值) 向带有指定lang属性元素添加样式
lang=“国际语言缩写” 代表该标签内所写语言。
用法与属性选择器相同。
//伪类元素选择器
::first-letter 第一个字
::first-line 第一行
font-size:控制文字大小
例如:
p::first-letter{
color:red;
font-size:22px;
}
p::first-line{
color:red;
font-size:22px;
}
与伪类选择器的不同点:
伪类选择器一个: 伪元素选择器两个 ::
仅限于块级元素
::before 在之前设定样式 1、需要配合content使用,content内一定要写内容,否则不显示。
::after 在之后设定样式
::selection 选中时的样式
div::before
{
width:100px;
height:100px;
background-color:red;
content:"*****"
}
div::selection
{
color:yellow;
}
//选择器优先级
!importment用法:
div
{
width:100px;
height:100px;
background-color: yellow !importment;
}
//微观权重
微观权重:
1,0,0,0,0 !importment (写在后面)
0,1,0,0,0 内联 外联
0,0,1,0,0 id选择器
0,0,0,1,0 类选择器 伪类选择器 属性选择器
0,0,0,0,1 元素伪类选择器
0,0,0,0,0 通配符选择器 后代选择器 兄弟选择器
//直观权重
直观权重:
10000 !importment (写在后面)
1000 内联 外联
100 id选择器
10 类选择器 伪类选择器 属性选择器
1 元素伪类选择器
0 通配符选择器 后代选择器 兄弟选择器
//使用原则
在一个节点上设定的样式越多,越受权重影响。
使用原则:
1、使用就近原则
2、继承样式的优先级别最低
3、!inportment的样式优先级别最高,如有冲突则重新计算。
//CSS单位
//尺寸单位
% 百分比
in(英寸) 1in=96px=2.54cm
cm(厘米)
mm(毫米)
pt point(点 点越多越清晰) 大约七十二分之一英寸
px 像素
em 浏览器默认字体大小 16px 1em=16px 2em=32px
如果当前元素设置字体大小则 em会根据当前元素进行倍数放大
如果没有在当前元素设置字体大小 则选择默认浏览器字体大小进行放大倍数
rem 根据根(html)元素字体尺寸的倍数
在html上设置字体大小,下面设置rem 会根据根元素大小进行倍数放大
//手机端布局方式
% 百分比布局 em布局 rem布局 flex(主流)布局
//视窗相对单位
vw 代表一屏的宽度
vh 代表一屏的高度
//颜色单位
1、颜色名 直接写单词,如red yellow
2、rgb rgb值 red 红色通道 green 绿色通道 blue 蓝色通道
如rgb(255,255,255) 即白色。
3、rgb rgb百分比值 如rgb(0%,100%,0%) 即绿色 理解为浓度
4、rgba red 红色通道 green 绿色通道 blue 蓝色通道 alpha透明通道(取值范围0~1)
5、16进制数 #000000 #ffffff
//背景
background-color 背景颜色
background-image 背景图片(image在使用时需要添加:url(地址) ,或者写none不显示背景图 )
background-repeat 背景图平铺
{
background-repeat:repeat 背景图平铺 (不自适应)
background-repeat:no-repeat 背景图不平铺
background-repeat:repeat-x 背景图沿X轴平铺(横向平铺)
background-repeat:repeat-y 背景图沿Y轴平铺(纵向平铺)
background-repeat:round 自动缩放,充满整个容器(自适应)
background-repeat:space
}
//背景图定位
background-position:x y (X减小,图片向右走,视线向左;Y减小,图片向上走,视线下移)
icon 图标 雪碧图/精灵图 滑动门
为什么使用雪碧图?
1、提高浏览器加载速度(暂知)
background:颜色背景 url(地址) no-repeat(是否平铺) left(图片位置,left靠左显示 top向上显示,center居中显示) (支持IE)