前言:类的使用
<head>
<meta charset="UTF-8">
<title>ssss</title>
<style>
.a{
color: tomato;
}
.b{
font-size:40px;
}
.c{
}
</style>
</head>
<body>
<div class="a b">话多多1</div>
<div class="a c">话多多2</div>
<div class="c b">话多多3</div>
</body>
一.高级选择器
1.后代选择器 语法:用空格连接类名,逐层精准
<head>
<meta charset="UTF-8">
<title>ssss</title>
<style>
div div p span{
color: darkred;
}
</style>
</head>
<body>
<div class="a b">
话多多1
<div>
<p>
<span>拼多多</span>
</p>
</div>
</div>
<div class="a c">话多多2</div>
<div class="c b">话多多3</div>
</body>
2.子代选择器 语法:父类元素名>子类元素名>孙类元素名...
<head>
<meta charset="UTF-8">
<title>aaa</title>
<style>
div>div>p>span{
color: #1cb7fd;
}
</style>
</head>
<body>
<div >
<div >
<p >
aaa
<span>
bbb
</span>
ccc
</p>
</div>
</div>
</body>
3.组合选择器(多个选择器放到一起共同设置样式) 语法:选择器,选择器,选择器...
<head>
<meta charset="UTF-8">
<title>aaa</title>
<style>
div>p,p,a{
color: #33bb66;
}
</style>
</head>
<body>
<div >
aaa
<div >
aaa
<span>
bbb
</span>
ccc
</div>
<p>
hhh
</p>
</div>
<p>
很关键国际化
</p>
<a href="http://www.baidu.com">百度一下</a>
</body>
4.交集选择器 语法:元素.类名
<head>
<meta charset="UTF-8">
<title>qqq</title>
<style>
div{
color: #888888;
}
div.aaa{
color: #33bb66;
}
p.ccc{
color: tomato;
}
</style>
</head>
<body>
<div class="aaa">aaa</div>
<div class="bbb">
bbb
<span>ddd</span>
</div>
<p class="ccc">ccc</p>
</body>
5.属性选择器 语法:元素[属性=属性值]
<head>
<meta charset="UTF-8">
<title>jjj</title>
<style>
a[href="http://www.baidu.com"]{
font-size:30px;
}
a[href="http://www.luffycity.com"],a[href="http://www.192.168.13.12.com"]{
color: #dedede;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.luffycity.com">百度一下</a>
<a href="http://www.192.168.13.12.com">百度一下</a>
</body>
6.伪类选择器 (主要针对a标签) 语法:元素名:LoVe HAte
爱恨准则:LoVe HAte
<head>
<meta charset="UTF-8">
<title>weilei</title>
<style>
#没有被访问的a标签的颜色
a:link{
color: #333333;
}
#访问过后的a标签的颜色
a:visited{
color: crimson;
}
#鼠标悬停是时a标签的颜色
a:hover{
color: tomato;
}
#点击时a标签的颜色
a:active{
color: maroon;
}
</style>
</head>
<body>
<a href="#">点我吧</a>
点击父类,让子类做某些事情 语法: .father:hover .son
<head>
<meta charset="UTF-8">
<title>weilei</title>
<style>
.son{
display: none;
}
.father:hover .son{
display:block;
}
</style>
</head>
<body>
<div class="father">
点我
<div class="son">
<ol>
<li>购物</li>
<li>注册</li>
<li>登录</li>
</ol>
</div>
</div>
</body>
7.伪元素选择器
<head>
<meta charset="UTF-8">
<title>weiyuansu</title>
<style>
div p:before{
content: 'h#d#f';
}
p:after{
content: '%%%';
}
p:first-letter{
color: red;
font-size: 26px;
}
</style>
</head>
<body>
<div>
<p>alex</p>
</div>
伪元素在布局中的应用
<head>
<meta charset="UTF-8">
<title>weiyuansu</title>
<style>
.box{
/*display: none;*/隐藏元素,不占位置
效果是把span变成了块级标签,并且不在页面中占位置
/*display: block;*/
/*visibility: hidden;*/隐藏元素,占位置
/*height: 0;*/
}
div,p{
color: tomato;
}
</style>
</head>
<body>
<p>alex</p>
<span class="box">alex</span>
<div>alex</div>
</body>
二.css的继承性和层叠性
继承:color、text-xxx、font-xxx、line-xxx的属性是可以继承下来。盒模型的属性是不可以继承下来的
a标签有特殊情况，设置a标签的字体颜色 一定要选中a，不要使用继承性
<head>
<meta charset="UTF-8">
<title>jicehng</title>
<style>
.box{
color: tomato;
}
.box a{
color: #33bb66;
}
.box p{
color: green;
font-size: 30px;
line-height: 30px;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
qwe
<a href="#">点击</a>
<p>
asd
<span>zxc</span>
</p>
</div>
</body>
层叠性:覆盖,谁的权重大,就显示谁的样式
<head>
<meta charset="UTF-8">
<title>cengdie</title>
<style>
/*0 0 1*/
div{
color: #33bb66;
}
/*0 1 0*/
.box{
color: tomato;
}
/*1 0 0*/
#aaa{
color: #1cb7fd;
}
/*css的层叠性:谁的权重大,就会显示谁的样式*/
/*权重:数选择器 id>class>标签*/
</style>
</head>
<body>
<div class="box" id="aaa">你猜我是什么颜色</div>
</body>
例子1:
<head>
<meta charset="UTF-8">
<title>shenru</title>
<style>
/*2 2 0*/
#father1 .box2 #father3 .box4{
color: tomato;
}
/*1 2 1*/
#father1 .box2 .box3 p{
color: #1cb7fd;
}
</style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="child">猜猜我的颜色</p>
</li>
</ul>
</div>
</body>
例子2:
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
/*继承来的属性 它的权重为0，跟选中的标签没有可比性*/
#father1 #father2 #father3{
color: red;
}
#father1 .box2 .box3 p{
color: green;
}
</style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="child">猜猜我的颜色</p>
</li>
</ul>
</div>
</body>
例子3:
<head>
<meta charset="UTF-8">
<title>zaici</title>
<style>
/*如果都是继承来的,权重都是0,那就近原则,谁更深入显示谁的属性*/
#father1{
color: #1cb7fd;
}
.box1 #father2{
color: tomato;
}
</style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="child">猜猜我的颜色</p>
</li>
</ul>
</div>
</body>
例子4:
<head>
<meta charset="UTF-8">
<title>zaici</title>
<style>
/*都是继承来的,都是一样深,再次比较权重*/
/*1 1 0 */
#father1 #father2{
color: #1cb7fd;
}
/*1 1 0*/
.box1 #father2{
color: tomato;
}
</style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="child">猜猜我的颜色</p>
</li>
</ul>
</div>
</body>
三.盒模型
属性：
content:内容
内容的宽度
height:内容的高度
padding:内边距 内容到边框的距离
border:边框
margin:外边距 另一个边到另一个边的距离
盒模型的计算：
总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height
前提是：在标准文档流
padding：父子之间调整位置
margin: 兄弟之间调整位置
例子:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
200px;
height: 200px;
background-color: red;
padding: 50px;
border: 10px solid green;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
调整盒子内的具体位置:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
180px;
height: 180px;
padding-left: 20px;
padding-top: 20px;
border: 1px solid red;
}
span{
background-color: green;
}
.ttt{
margin-left: 30px;
}
</style>
</head>
<body>
<!-- 202*202 -->
<div class="box">
<span>alex</span>
<span class="ttt">alex</span>
</div>
<div class="box">
<span>alex</span>
</div>
</body>
四.布局方式 浮动
浮动能实现元素并排
盒子浮动就会脱离标准文档流,不占位置了,用float属性浮动,属性值可以有left,right