css特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css简介</title>
<style>
*{
color: black;
font-size: 20px;
}
div{
color: red !important;
text-align: center;
font-size: 32px;
font-weight: 800;
line-height: 30px;
height: 30px ;
}
p{
color: blue;
}
.aa{
font-weight: 700;
}
li{
color: bisque;
}
.li{
color: blue;
}
div ul{
border: 1px #ff0000 solid;
}
div,p{
background: #00ff00;
}
span.cd{
color: antiquewhite;
}
li:first-child{
color: yellowgreen;
}
li:last-child{
color: crimson;
}
li:nth-child(n+4){
background: #1235af;
}
</style>
</head>
<body>
css就是层叠样式表
三大特性：
1继承性
只能继承：
color,text-开头的,font-开头的，line-开头的，
宽度会继承，高度不会继承
<div style="height: 500px;">
<div>
我要学习
</div>
<a href="">我是二号</a>
<span >我是一号</span>
</div>
2叠加性
<p class="aa">我是三号</p>
3层叠性
<ul>
<li class="li">1648923</li>
<li>1648923</li>
</ul>
css语法：
选择器{属性：属性值;}
<div style="background:rgb(255,255,255);">
ssss
</div>
四大基础选择器:
标签选择器：
<header>
我是标题
</header>
id选择器：
<footer id="sss">
我是结尾
</footer>
class选择器：
<nav>
我是导航
</nav>
通用选择器：
*
高级选择器：
后代选择器：
<div>
<ul>
<li>我是孙子</li>
<li>我是孙子</li>
<li>我是孙子</li>
</ul>
</div>
并集选择器：
<div>我是一号</div>
<p>我是二号</p>
交集选择器：
<span class="cd">我今天没吃饭</span>
序列选择器：
第一子选择器
first-child
最后子选择器
first-child
<ul>
<li>今天是1</li>
<li>今天是2</li>
<li>今天是3</li>
<li>今天是4</li>
<li>今天是5</li>
</ul>
nth-
<ul>
<li>www1</li>
<li>www2</li>
<li>www3</li>
<li>www4</li>
<li>www5</li>
<li>www6</li>
<li>www7</li>
<li>www8</li>
<li>www9</li>
<li>www10</li>
<li>www11</li>
<li>www12</li>
</ul>
</body>
</html>
权重/权重值
由弱到强选择器的优先级
0 1 10 100 1000 99999
继承性-浏览器自带的样式-通用选择器-标签选择器/-class选择器-id选择器-行内样式-！import.
选择器越精确，优先级越高
同一级别选择器，越在后面优先级越高
选择器
h3:first-child{
color: red;
}
p::first-letter{
color: blue;
}
div::first-line{
color: aqua;
}
div:last-child{
color: blueviolet;
}
p:nth-child(-3+n){
background: #adc549;
}
伪选择器
first-letter:给第一个文字加样式
/* div::first-letter{
color: red;
} */
.sss::first-line{
color: blue;
}
/* div::before{
content: "www.baidu.com";
display: block;
font-size: 12px;
} */
div::after{
content: '111';
display: block;
/* border-bottom: 1px #cccccc solid; */
}
div::before{
content: '111';
display: block;
}
动态伪类：hover状态与active状态
a:hover{
color: #000000;
font-size: 18px;
text-decoration: none;
}
a:active{
color: green;
}
input:focus{
color: green;
}
lnik状态与visiter状态
a:link{
color: green;
}
a:visited{
color: black;
}
>:第一子元素
+：向下找相邻子元素
~：向下找相邻兄弟元素
span[class='test'] =>匹配所有带有class类名test的span标签
span[class *='test'] =>匹配所有包含了test字符串的class类名的span标签
span[class] =>匹配所有带有class属性的span标签
[class='all'] =>匹配页面上所有带有class='all'的标签
[class *='as'] =>匹配页面上所有class类且类名带有as字符串的类的标签
设置字体
字号
em:以自身的文字大小做参考
rem:以跟标签html字体大小做参考
%百分比：以父级元素的百分比作为参考
<div>冰墩墩</div>
<div style="font-size: 20px;">冰墩墩1</div>
<div style="font-size: 1em;">冰墩墩2</div>
<div style="font-size: 1.5rem;">冰墩墩3</div>
<div style="font-size: 200%">冰墩墩4</div>
使用
<!-- 多个字体样式用逗号隔开，解析时会从前往后识别字体样式，没有的会是浏览器自带字体样式 -->
<!-- 如果中间有空格或者是中文字体需要用引号包裹 -->
<div style="font-family: '宋体', '楷体';">胖墩墩1</div>
<div style="font-family: '楷体';">胖墩墩2</div>
<div style="font-family: '微软雅黑';">胖墩墩3</div>
<!-- 浏览器默认字体粗细是500 只对500-900有效果-->
<div>冰墩墩</div>
<div style="font-weight: 100;">冰墩墩</div>
<div style="font-weight: 400;">冰墩墩</div>
<div style="font-weight: bold;">冰墩墩11</div>
<div style="font-weight: bolder;">冰墩墩22</div>
<div style="font-weight: normal;">冰墩墩</div>
字体风格使用
@font-face {
重新命名字体名
font-family: "myfont";
src: url("../../../fonts/徐静蕾字体.ttf")
format("truetype"),
url("../../../fonts/徐静蕾字体.wotf")
format("woff");
font-weight: normal;
font-style: normal;
}
使用字体风格
*{
font-family: "myfont";
}
字体的引用技术：
为了保证网站字体的特殊显示，我们需要使用css把自己的字体引用到浏览器中
格式（ttf,wotf,otf)
字体图标引用
<link rel="stylesheet" href="../../../font-awesome/css/font-awesome.css">
<i class="fa fa-camera-retro"></i>
<i class="fa fa-vimeo-square"></i>
<p align=left></p>
文本样式
h1{
text-align: left;
text-align: center;
text-align: right;
}
div{
font-size: 30px;
text-decoration: underline;
text-decoration: overline;
text-decoration: none;
/* text-decoration: line-through; */
}
p{
text-indent: 32px;
text-indent:2em;
text-indent: 20%;
}
header{
letter-spacing: -4px;
letter-spacing: 20px;
}
a{
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
}
.a{
vertical-align: sub;
vertical-align: super;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* vertical-align: baseline; */
}
.sss{
text-shadow: 1px 1px 1px #f11b1b;
background:transparent;
}
.word{
word-spacing: 10px;
}
p{
/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止 */
white-space: nowrap;
/* 保留空白符序列，但是正常地进行换行 */
white-space: pre-wrap;
/* 合并空白符序列，但是保留换行符 */
white-space: pre-line;
}
/* text-overflow: clip修剪文本|ellipsis显示省略符号来代表被修剪的文本|string; */
.pp{
text-overflow: ellipsis;
width: 80px;
white-space:nowrap;
}
背景
background:#ccc url("b.appsimg.com/upload/momi…") repeat 0/200px 100px scroll;
背景颜色 地址 背景平铺（repeat-x/repeat-y/repeat/no-repeat）定位(x y)/尺寸（x y） 背景固定（scroll/fixed）
标签上能直接写
