常见的css选择器
/*<!-- 组合选择器-->*/
h1,h2,h3
{
color:cyan;
}
/*id选择器*/
#one {
color: antiquewhite;
}
/*类选择器*/
.cc{
color: palevioletred!important;
}
/* 后代选择器*/
ul li {
color: palevioletred;
}
/* 属性选择器*/
input[name=user]
{
background: cadetblue;
}
/* 伪类选择器 hover 鼠标悬停的时候触发*/
a:hover{
color: red;
}
/*列表中的某一个元素*/
ul li:nth-child(3){
color: red;
}
/*表单里的奇数 偶数为2n*/
ul li:nth-child(2n-1){
color: red;
}
table tr:nth-child(3n){
color: yellow;
}
table tr:nth-child(2n){
background: palevioletred;
}
td:hover{
background: red;
}
</style>
</head>
<body>
<!--设置为重要 !important优先级最高-->
<h1>1111111</h1>
<h2>2222222</h2>
<h2 id="one" class="cc">2222222</h2>
<!--行内选择器-->
<h2 style="color: red">3333333</h2>
<!--
标签选择器:指定是哪一些标签
类选择器:指定的是哪一类标签
id选择器:指定是哪一个标签
优先级:越具体指定,优先级就越高
-->盒子模型
<style>
#a{
/*上top 右right 下bottom 左 left */
border: solid 2px palevioletred;
width: 200px;
height: 200px;
}
#a1{
width: 200px;
height: 200px;
border: solid 5px red;
/*圆形 要是正方形 圆形的长度是他们的一般*/
border-radius: 100px;
/*圆角*/
/* border-bottom-left-radius: 20px; */
}
/* 上 右 下 左 内边距*/
#a2{
width: 200px;
height: 200px;
border: solid 5px red;
/*他会把盒子面积增大*/
/* padding: 30px; */
/*上 右 下 左*/
padding: 10px 20px 25px 12px;
}
/* 上 右 下 左 盒子与盒子之间的间距 外边距 margin */
#a3{
margin: 20px 0px 50px 50px;
border: solid 3px;
}
#a4{
width: 200px;
height: 200px;
border: solid 5px red;
margin: auto;
}
/*阴影*/
#a5{
width: 200px;
height: 200px;
border: solid 5px red;
/*向右 向下 模糊 扩大面积*/
box-shadow: 5px 5px 5px 5px palevioletred;
}
</style>
</head>
<body>
<div id ="a"></div>
<div id ="a1"></div>
<div id ="a2">jsdaofjasodf</div>
<div id ="a3">我擦勒</div>
<div id ="a4">我擦勒</div>
<div id ="a5">我擦勒</div>文本属性
<meta charset="UTF-8">
<title>伪对象</title>
<style>
.name::before{
content: "你问";
color: aquamarine;
}
.name::after{
content: "肯定帅啊!";
color: red;
}
.name::selection{
background: antiquewhite;
color: red;
}
.a1{
font-style: italic;/*斜体*/
font-weight: bold;/*加粗*/
font-size: 50px;/*字体大小*/
font-family: "华文宋体";/*设置字体*/
}
.a2{
font:italic bold 50px "华文宋体";
}
.a3{
border: palevioletred;
font:20px/3 "宋体"; /*字体大小/行高 "字体种类" 上下行距*/
background: beige;
}
/* @ 指定规则,来设置引入的自定义字体 */
@font-face
{
font-family:"靓仔";
src: url("华文宋体");
}
/*自定义字典*/
.c4 {
font:66px/2 "靓仔";
}
/*去掉点*/
ul
{
list-style: none;
/*改变鼠标的形态*/
cursor: wait;
}
</style>
</head>
<body>
<h2 class="name" style="color: royalblue">我帅不帅</h2>
<ul>
<li class="a1">设置字体相关属性11111</li>
<li class="a2">设置字体相关属性22222</li>
<li class="a3">设置字体相关属性3333</li>
<li class="c4">设置字体相关属性3333</li>
</ul>相对、绝对、固定路径
<style>
/* 公共属性 */
.gg{
width: 100px;
height: 120px;
border: solid 1px blue;
}
.a1{
background-color: antiquewhite;
}
.a2{
background-color: red;
/* 相对定位 根据父类定位 */
position: relative;
left: 50px;
top: 20px;
z-index: -11px;
/* 绝对定位 默认定位body
效果：脱离文档流，后面的额内容自动补齐
使用：绝对定位会参照父极的相对定位进行移动，如果父级中没有relative，相对如body进行定位
（1）把想要的父级元素变成relative
（2）把定位的元素变成absolute
*/
/* position: absolute; */
/* 此时会在网页的右上角 */
/* top: 0px; */
/* right: 0px; */
/* 值越大 就越上层 */
/* z-index: -1px; */
}
*{
margin: 0px;
padding: 0px;
}
.a3{
background-color: rgb(255, 0, 0);
/* 固定定位 */
/* *代表通配选择符，代表所有的标签，
默认标签中含有默认的间距，要在一开始的时候全部去掉 */
position: fixed;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -60px;
}
.a4{
background-color: greenyellow;
z-index: 20px;
}
img{
position: fixed;
bottom: 20px;
left: -80px;
/* 延迟动画效果 */
transition: all 1s ease 0.2s;
}
img:hover{
left: 5px;
}
</style>
</head>
<body>
<!-- 相对定位：参考得按是他自己本身，相对原始位置进行定位；
如果添加了定位：无论是添加（相对 绝对 固定）属性，后会增加额外的其他属性
left top right z-index 控制叠关系，值越小就越下层
-->
<div class="a1 gg"></div>
<div class="a2 gg"></div>
<div class="a3 gg"></div>
<div class="a4 gg"></div>
<img src="prod1.gif">
</div>浮动
<style>
div {
/* 转换为行内元素 */
/* display: inline; */
/* 转换为块状元素 */
/* display: block; */
/* 隐藏元素 */
/* display: none; */
/* 转成行内块状元素 */
/* display: inline-block; */
border: solid 1px red;
}
.con{
width: 100px;
height: 100px;
}
.a1{
background-color: aqua;float: left;
}
.a2{
background-color: blue;float: left;
}
.a3{
background-color: red;float: left;
}
.a4{
background-color: wheat;clear: both;
}
</style>
</head>
<body>
<!-- 元素的分类
块状元素： block
行内元素： inline
行内块状元素：inline-block
-->
<!-- <div>1111</div> -->
<!-- <div>2222</div> -->
<!-- 浮动
float:left 向左浮动，元素素脱离原始文档，后面的内容自动补齐
float:right ,元素脱离原始文档，后面的自动补齐
目的：让块状元素在一排显示
clear：both 清楚两变得浮动
浮动：
如果对行内元素进行浮动：
默认会把行内元素升级成行内块状元素，可以设置宽和高
浮动产生内容塌陷问题
-->
<div class="a1 con">11111111111</div>
<div class="a2 con"></div>
<div class="a3 con"></div>
<div class="a4 con"></div>