css更多的是一种用来修饰HTML的语言
CSS的三种引入方式
1、行内样式：一般不会这样写，如果想选择某一个，可以用之后内部样式中更加详细的选中方式
行内的优先级最高
<p style="size: 12px; color: blue">我是p标签</p>
2、内部样式：练习时使用
<style type="text/css">里面插入想要改变的内容样式</style>
<style type="text/css"> ???p{ ???????color: green; ???????font-size: 18px; ????}
</style>【解释】
这里的p标签可以替换成各种标签，之后可以体现。
3、外部样式：工程中会使用
<style>
<link rel="stylesheet" type="text/css" href="./main.css">
</style>
导入式：
<style type="text/css"> ???????@import url(‘main.css‘);</style>
基本选择器
标签选择器
<span>内容</span>
span{
???color: red;
???/*让鼠标变成小手的样式*/
???cursor: pointer;
}ID选择器
<p id="p1">一个段落</p>
/*ID选择器 一般不设置css样式，通常与js有关*/
#p1{
???color: pink;
???font-size: 20px;
}
类选择器（class选择器）
<div class="w">张三</div><div class="w">李四</div>
.w{
???width: 110px;
???font-size: 14px;
???height: 100px;
???background-color: blue;
???border: 1px solid red;
}通配符选择器
*{ ???margin: 0;}*可以把边距变成0
属性选择器
<form> ???????<label for="username">用户名</label> ???????<label for="vip">vip</label> ???????<label for="vivp">vivp</label> ???????<input type="text"> ???????<input type="password"> ???</form>
<style type="text/css">
???label[for]{
???????color: red;
???}
???input[type=‘text‘]{
???????font-size: 13px;
???????background-color: red;
???}
???label[for^=‘vi‘]{
???????color: yellow;
???}
</style>
高级选择器
<div class="father"> ???????<p>内容</p> ???????<div class="son"> ???????????<p>内容1</p> ???????????<span>内容2</span> ???????</div> ???????<h4 class="active">哈哈</h4> ???</div> ???<p>另一个内容</p>
/*后代选择器*/.father .son{ ????color: red;}/*并集选择器 重置样式 */p, span{ ??color: #666; ??font-size: 20px;}并集选择器一般在style中的前面，把系统不好看的格式换成需要的格式
/*交集选择器*/ h4.active{ ????color: #ff13db; }伪类选择器
<div class="box"> ???<ul> ???????<li class="item"> ???????????<a href="#">超链接</a> ???????</li> ???</ul> </div>
<style type="text/css"> ???????/* ???????行内标签：a span ???????1、在遗憾显示 ???????2、不能设置宽高 ???????行内块： ???????1、在一行内显示 ???????2、可以设置宽高 ???????块级标签：div p ul li ???????1、独占遗憾 ???????2、可以设置标签 ???????3、如果不设置宽高，默认body100%宽度 ???????*/ ???????.box ul li a:link{ ????????????color: red; ???????} ???????.box ul li a:visited{ ???????????color: blue; ???????} ???????.box ul li a:hover{ ???????????color: #00ff00; ???????} ???????.box ul li a:active{ ???????????color: #ff00eb; ???????} ???</style>link：是还没有点击过，显示的内容
visited：是访问过之后（第二次到第n次）要显示的内容
hover：是放在文字上显示的内容
active：是鼠标点击时会显示的内容
<ul> ???????<li>张三</li> ???????<li>李四</li> ???????<li>王五</li> ???????<li>赵六</li> ???</ul>
<style> ???????ul li:first-child{ ???????????color: red; ???????} ???????ul li:last-child{ ???????????color: green; ???????} ???</style><style> ???????ul li:nth-child(n){ ???????????color: purple; ???????}</style>这里不仅仅<li>标签可以使用，<p>标签同样可以使用
伪元素选择器
<p>内容</p><p>张三</p><p>李四</p>
<style> ???????p::first-letter{ ???????????font-size: 19px; ???????} ???????p::before{ ???????????/*before要添加content属性*/ ???????????content: ‘alex‘; ???????} ???????p::after{ ???????????/*after要添加也要加content属性*/ ???????????/*在浮动中很重要*/ ???????????content: ‘hh‘; ???????} ???</style>css的继承性和层叠性
继承性：
<div> ??<p>张三</p></div>
<style> ???????div{ ???????????color: #FF0000; ???????????background-color: green; ???????????width:300px; ???????} ???</style>
有某些属性可以继承——
?color、font-*、text-*、line-*
但某些盒子属性，定位元素无法继承
这里我们虽然定义的是div，但div的color属性会传递给<p>标签
而div的长度和版面的颜色却不能直接传递给<p>标签
层叠性
层叠性就是把权重大的会显示，而权重小的则不会显示
记事本：CSS
原文地址：https://www.cnblogs.com/abc23/p/10080813.html