css选择器
一、类选择器:
1.点号开始
2.包含字母、数字、连字符、下划线
3.点后面必须是字母开始
4.区分大小写
5.一个类选择器可以应用到多个标签
二、伪类选择器:
元素名称-伪类名称:
a:link(未访问)
a:visited(已访问)
a:hover(鼠标悬停)
a:active(点击时)
三、后代选择器:(可越级)
父级元素名称+空格+子级元素名称{声明块}
四、子级选择器:(不可越级)
父级元素名称+“>”+子级元素名称{声明块}
五、属性选择器:input type=“text”
格式一:元素名称[属性名称+属性值]{声明块}
input[type=“text”]{color:red;} 【设置input属性值为text的样式】
input::-webkit-input-placeholder{color:green;}【设置placeholder提示信息的样式】
格式二:选择以属性值开始的标签
元素名称[属性名称+“^=”+属性值]{声明块}
input[name^=“si”]{color:green;}
格式三:选择以属性值结束的标签
元素名称[属性名称+“$=”+属性值]{声明块}
input[name$=“chuan”]{color:green;}
格式四:选择包含属性值的标签
元素名称[属性名称+“*=”+属性值]{声明块}
input[name*=“chuan”]{color:green;}
格式五:选择box4里类型为p的第三个p元素
. box4 p:nth-of-type(3){color:red;}
六、css两个核心概念:
1.继承:(1)是应用在某个标签/元素上的css属性传递给了内部嵌套的标签
(2)通常来说文本类的会被继承(字体、字号、颜色)
(3)chrome里面是灰色的表示没继承
2.层叠:(1)继承
(2)一个标签可能有一个或多个样式的来源,当属性发生冲突时,按照加载顺序和权重大小决定
(3)对比权重:样式不冲突:同时作用
样式冲突:对比权重①权重相同,后覆盖前
②权重不同,权重大的生效
七、
1.border:1px solid red;边框
2.font-size:20px;字体大小,字号
3.font-family:Algerian;字体类型
4.font-weight:400;加粗
5.text-align:center;水平居中
6.text-indent:2px;
7.text-decoration:none;下划线
8.line-height:20px;行高
9.vertical-align:middle;垂直居中
10.text-shadow:-11px -11px 2px red;字体阴影
11.letter-spacing:10px;字间距
12.word-spacing:10px;词间距
13.font-weight:500;字体加粗
14.font-variant 字体大小写