Css写在<head>里
标签
<style>
P{color:red;font-size:12px;;}
…
</style>
字体颜色：color:red; 字体大小font-size:12px 属性和属性值之间用 :
多个键值对之间用 ;
Css风格：展开式
h3 {
color: pink;
font-size: 20px;
}
属性值前面冒号后面，保留一个空格
选择器（标签）和大括号中间保留一个空格
1.css选择器：把不用的标签选择出来，简单来说就是选择标签用的，这就是选择器的作用
选择器分为：基础选择器和复合选择器
基础选择器又包括：标签选择器、类选择器、id选择器、通配符选择器
标签选择器：就是标签名，用html标签作为选择器，会选中所有的标签 标签名{ }
类选择器：想要差异化选择不同的标签 单独选择一个或某几个标签 .类名{ }
多类名：在标签class属性中写多个类名，多个类名用空格分开，这样实现多个选择器的功能:
.red {
Color=red;
}
.font35 {
Font-size:35px;
}
<div class=”red font35”>nihao </div>
Id选择器：html元素以id属性来设置id选择器，在css中 #id名{ } id名是惟一的
通配符选择器：使用*定义，他代表选取页面中所有元素标签 *{ }
特殊情况下才使用，
2.字体属性：
字体系列：font-family:”微软雅黑”;
文字大小：font-size:20px;
字体粗细：font-weight::normal正常 bold粗体 bolder特粗体 lighter细体 number：100-900 100最细、400等价于normal 700等价bold
字体样式：font-style：normal默认值 italic斜体 oblique倾斜体
font复合属性：font:font-style font-weight font-size font-family;
font复合属性里面的属性值不能改变，前两个可以不写，但最后两个必须写
font:12px/24px ‘黑体’’ 24px是行高
font：12px/1.5 ‘黑体 1.5是当前文字大小font-size的1.5倍
3文本属性：文本的外观如文本颜色、对齐文本、文本缩进、行间距
文字颜色：color:red;
对齐文本：text-align：只能设置水平对齐方式 text-align:center left right;
装饰文本：添加下划线、删除线、上划线 text-decoration:none默认（没有文字修饰） underline下划线 overline上划线 line-through删除线
文本缩进：指定文本的第一行缩进，通常指段落的首行缩进text-indent::2em
em是一个相对单位，就是当前元素font-size 1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小
行间距：设置文字行与行之间的距离里 line-height:
4.css引入方式：
1行内样式表：在元素标签内部的style属性里面设定css样式，适合修改简单样式
2内部样式表：放在<style>…</style>里面，一般<style>放在<head>标签里面
3外部样式表：样式单独写到css文件中,css文件里面只有样式没有标签，之后把css文件引入到html中，使用<link rel=”stylesheet” href=”css文件路径”>
rel定义当前文档与被连接文档之间的关系，在这里需要指定为stylesheet，表示被连接的文档是一个样式表文件，使用外部样式表设定开发方式，这种方式是开发中最常用的方式
4.
Chorme调试工具：
打开Chrome浏览器，按下F12键或者点击页面空白处—>检查
Ctrl+鼠标滚轴调节压面大小
Ctrl+0复原窗体
点一下代码左上小箭头，然后去点击css样式没有出来的地方，然后查看右方style里面的属性
如果点击元素，发现右侧没有样式的引入，极有可能是类名或者样式引入错误
如果有样式，但样式前面有黄色叹号提示，代码被划掉了，则是样式属性书写错误
5.
Emmet语法:
Emmet语法的前身是Zen codng，它使用缩写，来提高html/css的编写速度，Vscode已经继承该语法
1快速快速生成html结构语法
生成标签，直接输入标签名按tab键即可，比如 div 然后tab键 就可以生成<div></div>
如果想要生成多个相同标签 加上*就可以了，比如div*3 既可以快速生成3个div
如果有父子级别关系的标签，可以用> 比如：ul>li 就可以了
如果有兄弟关系（并行关系）的标签，用+就可以了比如div+p
如果生成带有类名或者id名字的，直接写 .demo 或者 #two 按tab键就可以了, .demo 或者 #two默认生成的是<div class=”deom”>…</div> <div id=”two”>..</div>
如果想要其他标签则需要加上标签名字 如：p.one 生成<p class=”one”></p>
如果生成的div类名是有顺序的，可以用自增符号$ 写.demo$*5 按tab键
<div class=”deom1”></div>
<div class=”deom2”></div>
<div class=”deom3”></div>
<div class=”deom4”></div>
<div class=”deom5”></div>
如果生成的标签内部写内容可以一用{}表示 如：div{你好}*5 按tab键
<div>你好</div>
<div>你好</div>
<div>你好</div>
<div>你好</div>
<div>你好</div>
按 div{$}*5
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
2.快速生成css样式语法：
text-align:center; 写tac按tab键
text-indent:2em; 写 ti2em 按tab键
width:100px; 写w100 按tab键
height:100px; 写h100 按tab键
line-height:26px; 写lh26px 按tab键
text-deroction:none; 写tdn 按tab键
3.格式化代码：(对齐代码)
Shift+alt+f
5.
复合选择器：
复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
复合选择器可以更准确，更高效的选择目标元素
复合选择器是有两个或者多个基础选择器，通过不同的方式组合而成的
常用的复合选择器：后代选择器、子选择器、并集选择器、为类选择器
后代选择器：（重要）
后代选择器又称包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代
先写元素1 元素2{ } 元素1 元素2用空格隔开，元素1是父级，元素2是子级，最终选择的是元素2，元素2是元素1的后代， 元素1和元素2可以是任意的基础选择器
语法：ol li{
color:pink;
}
子元素选择器：
只能作为某元素的最近一级子元素，简单理解就是选亲儿子元素，只能选择父类中的第一级元素标签
语法
元素1> 元素2 { }
并集选择器：
可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明 并集选择器是通过各选择器通过英文逗号 ， 连接而成，任何形式的选择器都可以作为并集选择器的一部分
语法：
元素1，元素2{样式声明}
div，p，.pig li{
color：red；
}
伪类选择器：
用于向某些选择器添加特殊效果，比如给连接添加特殊效果
最大特点用：表示 比如：：hover ：first-child
伪类选择器很多，比如有链接伪类、结构伪类等
链接伪类选择器:
a:link 选择所有未被选择的连接（没有点击过的连接）
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接（鼠标经过的连接）
a:active 选择活动连接（鼠标按下未弹起的连接）
注意：1为了确保生效，请按照L V H A的顺序声明
通常这样写：
平时
a {
color:black;
text-decroration:none;//没有下划线
}
鼠标经过
a:hover {
color:orange;
text-derocation:underline;//下划线
}
focus伪类选择器：
用于获得焦点的表单元素，焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说
input:focus {
background-color:yellow;//设置背景颜色
}
6.
Css的元素显示模式：
元素显示模式就是元素（标签）以什么方式进行显示，比如：div自己独占一行，一行可以放多个span
Html元素一般分为块元素和行内元素两种类型：
块元素：<h1>-<h6>、<div>、<ul>、<ol>、<li>、p、blockquote 、hr、pre、等，其中div标签是典型的的块元素
特点：
自己独占一行
高度，宽度，外边距，内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器级盒子，里面可以放行内元素或者块内元素
注意文字类元素不能使用块级元素 例如：<p>标签主要用于存放文字，因此里面不能放div
<h1>-<h6>等都是文字块级标签，类里面也不能放其他块级元素
行内元素：
常见行内元素：<a>、<strong>、<b>加粗、<em>、<i>倾斜、<del>、<s>删除线、<ins>、<u>下划线、<span>等，其中span是典型的行内元素
特点：
相邻的行内元素在一行上可以显示多个
高宽设置无效的，默认宽度就是它本身内容默认的宽度
行内元素只能容纳文本或其他行内元素
注意：
连接里面不允许再放其他链接
特殊情况下<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
行内块元素：
在行内元素中有几个特殊标签<img>、<input>、<td>,他们同时具有块元素和行内元素的特点，有些资料称为行内块元素
特点：
一行可以有多个元素（行内元素特点）
默认宽度就是本身内容的宽度（行内元素特点）
高度、行高、外边距、内边距都可以控制（块级元素特点）
7.元素显示模式的转换：
转换块级元素：display:block; 例如：将a标签转换为块元素 设置 a{ display:block; }
转换为行内元素：display:inline; 例如：将div转换为行内元素 设置 div{ display:inline; }
转换为行内块元素：display:inline-block;
Snipaste截图小工具使用：
1. F1可以截图同时测量大小，设置箭头、书写文字等
2. F3在桌面置顶显示
3. 点击图片，alt可以取色（按下shift可以切换取色模式）
按下F3功能键，就会显示颜色的RGB数值
4. 按下esc取消图片显示
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
