前言:类的使用
???<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:内容
???????width:内容的宽度
???????height:内容的高度
???????padding:内边距 内容到边框的距离
???????border:边框
???????margin:外边距 另一个边到另一个边的距离
??盒模型的计算：
???????总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height
???????前提是：在标准文档流
???????????padding：父子之间调整位置
???????????margin: 兄弟之间调整位置
???????例子:
???????????<head>
???????????????<meta charset="UTF-8">
???????????????<title>Document</title>
???????????????<style>
???????????????????.box{
???????????????????????width: 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{
???????????????????????????width: 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
css初识
原文地址：https://www.cnblogs.com/shanghongyun/p/9671306.html