css层次选择器
1.后代选择器 父类标记 子类标记{ } 子类标记会变
2.子选择器 父类标记>子类标记 { } 父类标记里的第一代子类标记会变
3.群组选择器 标记,标记{ } 两者一起变
style type="text/css">
/* 层次选择器
后代选择器 父类标记 子类标记{} 子类标记会变 */
div p{
color: red;
}
/* 子选择器 父类标记>子类标记 {} 父类标记里的第一代子类标记会变 */
div>p{
color: blue;
}
/* 群组选择器 标记,标记{} 两者一起变 */
b,i{
color: aquamarine;
}
</style>
</head>
<body>
<p>我是body的子标记</p>
<div>
<p>我是div的子标记</p>
</div>
<div>
<p>第一代子标记</p>
<ul>
<li>
<p>第三代子标记</p>
</li>
</ul>
</div>
<b>iiii</b>
<i>uuuuu</i>
</body>
css伪类选择器
first-of-type 会选择父类标记里第一个子类标记
last-of-type 会选择父类标记里最后一个子类标记
nth-of-type () 会选择父类标记里某一个子类标记 小括号里的数字代表选择第几个子类型的标记
<style type="text/css">
/* 伪类选择器
first-of-type 会选择父类标记里第一个子类标记 aa*/
div p:first-of-type{
color: blue;
}
/* last-of-type 会选择父类标记里最后一个子类标记 yyy*/
div p:last-of-type{
font-size: 50px;
}
/* nth-of-type 会选择父类标记里某一个子类标记 小括号里的数字代表选择第几个子类型的标记 ooo*/
div p:nth-of-type(2){
color: red;
}
</style>
</head>
<body>
<div>
<p>aa</p>
<p>ooo</p>
<p>hhhh</p>
<p>yyy</p>
</div>
</body>
css优先级
行内样式>内嵌样式>外部样式
id选择器>类选择器>标签选择器
css常用字体样式
font-family 字体
font-size 字体大小
font-style 字体样式
font-weight 字体粗细
<style type="text/css">
p{
/* 字体 */
font-family: "仿宋"
/* 字体大小 */
font-size: 40px;
/* 字体风格 */
font-style: italic;
/* 字体粗细 */
font-weight: bold;
}
</style>
</head>
<body>
<p>段落第</p>
</body>css常用文本样式
text-align 文本位置 水平对齐方式 只能在独占一行的标记上
text-decoration 文本装饰
text-indent 文本缩进
line-height 文本行高 设置行高后文本内容会在这一行的垂直方向正中间
vertical-align 文本位置 垂直对齐方式 只能在可以和别人共处一行的标记上
<style type="text/css">
.p1{
/* 文本颜色 */
color: #a69ec1;
/* 文本位置 水平对齐方式 只能在独占一行的标记上*/
text-align: left;
/* 文本装饰 */
text-decoration: line-through;
/* 文本缩进 */
text-indent: 40px;
}
.p2{
color: #ffc97d;
text-align: left;
/* 文本行高 设置行高后文本内容会在这一行的垂直方向正中间*/
line-height: 100px;
}
img{
/* 文本位置 垂直对齐方式 只能在可以和别人共处一行的标记上*/
vertical-align: middle;
}
</style>
</head>
<body>
<p class="p1">第一段<br>第二行<br>第三行</p>
<p class="p2">第二段</p>
前面文字<img src="bg.jpeg" >后面文字
</body>
css常用尺寸样式
width 宽度 height 高度 宽和高只能设置在文本单独占一行显示的标记里
css列表样式
list-style 去掉列表中的序号符号
<style type="text/css">
ul{
/* 去掉列表中的序号符号 */
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
css背景样式
background-color 背景颜色
background-image 背景图片
background-repeat背景重复 repeat-x在x轴方向重复 repeat-y在y轴方向重复
background-size 背景尺寸
background-size: cover; 平铺
<head>
.d2{
width: 500px;
height: 500px;
/* 背景图片 */
background-image:url(bg.jpeg) ;
/* 背景重复 repeat-x在x轴方向重复 repeat-y在y轴方向重复*/
/* background-repeat: repeat-x; */
/* 背景尺寸 拉抻 纵向 横向比例100%*/
background-size: 100% 100%;
}
</head>css鼠标样式
例如:cursor:default;
css伪类样式 超链接相关
a:link 没被点击过的链接的样式
a:visited 被访问过的链接的样式
a:hover 鼠标在链接上悬停的样式 可以用在其他标签上
a:active 点击链接且没松开鼠标时的样式
<style type="text/css">
a{
text-decoration: none;
}
/* 没点击过链接的样式 */
a:link{
color: red;
}
/* 访问过链接的样式 */
a:visited{
color: orange;
}
/* 鼠标在链接上悬停的样式 可以用在其他标签上 */
a:hover{
color: yellow;
}
/* 点击且没松开1时的样式 */
a:active{
color: green;
}
div:hover{
font-size: 50px;
color: #ADD8E6;
}
</style>css透明度样式
opacity 透明度 数值范围在0-1 数值越小透明程度越高
3494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
