css主要使用场景就是美化网页 布局页面
html 局限性 他只关注内容的语义 只写出结构 丑；
css 网页美容师;
主要设置文本内容（字体 大小 对齐方式） 图片外形（宽高 边框 边距）
以及版面的布局和外观显示样式
使得我们的结构HTML与样式css相分离
css语法规范
主要都两部分组成：选择器以及一条或者多条声明；
css做了两件事
1找到所以要选择的标签 选择器（选对人）
2设置这些标签的样式 比如颜色为红色（做对事）
- 代码风格
格式样式书写
1紧凑格式
h3 {c color: red;font-size: 12px;}
2展开格式
h3 {
color: red;
font-size: 12px;
}
样式小写
h3 {
color: red;
font-size: 12px;
}
空格规范
font-size: 12px;冒号后打一个空格；
选择器和我们大括号也要有空格；
2 css基础选择器
选择器作用就是选择我们标签的；
我是段落
ul li 我是/li /ulol
li我是/li
/ol
1想把div文字变红色
2想把第一个div的文字变红色
3 想把ul里面的li文字变红色
选择器的分类 两大类 基础选择器和复合选择器两个大类
基础选择器是由我们单个选择器组成的4
基础选择器有包括 ： 1 标签选择器 2 类选择器 3 id选择器 4 和通配符选择器；
1 标签选择器； 为我们同类型的标签统一设置样式 为所以某一类的标签；
2 类选择器： 为我们单个的标签设置样式
.类名{
属性1：属性值1；
}
类选择器多类名
我们可以给一个标签指定多个类名，从而到达更多的选择目的，这些类名都可以选出这个标签简单理解就是一个标签
多个名字；
1 如何使用我们多类名；
div class=“red font20” 亚瑟 /div
2在标签class里面写多个类名；
3多个类名之间必须有空格;
2 把一些公共样式放在一个类名里面;
id选择器
id选择器可以标有特定的id的HTML元素指定的样式
html元素以id属性来设置id选择器，css中id选择器以#来定义：
一般和我们的js搭配;
类选择器和id选择器的区别
类选择器 好比我们的名字 有一个或多个；
id选择器 独一无二的;
通配符选择器
在css中，通配符选择器是由“*”定义，他表示页面中所以元素（标签）
CSS字体属性
css fonts(字体)属性定义字体系列 大小 粗细 和文字样式（斜体啥类的）
字体系列
p{font—family："微软雅黑"; }
div {font—family：Microsoft YaHei,Arial}
各位字体之间有逗号；
主要个给我们的body标签用的
字体大小
p{
font-size: 20px;
}
font-size/line-height
字体粗细
font-weight
normal 正常 不加粗 大了一点 默认 400
bold 粗体 700
bolder 特粗
lighter 细体
number 数字
700 和400 一个粗变细,一个正常加粗
文字样式 文字风格
font-style
normal 默认值 浏览器会显示标准的字体样式 font-style：normal
italic 浏览器会显示斜体的字体样式
字体符合属性
div {
font-style: italic;
font-weight: 700;
font-family: “Microsoft yahei”;
font-size: 16px;
}
这样写太麻烦
body
{
font：font-style font-weight font-size/line-height font-family；
}
标题标签比较特殊一点 需要手动修改我们的字符大小 h1到h6
文本属性
css text文本 属性可定义的外观 ，比如文本的颜色，对齐文本，装饰文本 ，文本缩进，行间距等。
文本颜色
div{
color ：red;
}
预定义颜色值 就是red green blue 测试使用
十六进制
不需要记得 我们有吸管工具 开发使用
RGB
color: rgb(红, 绿, 蓝);255标准红
对齐文本
text-align 属性用于设置元素内文本内容的水平对齐方式
div{
text-align: center;
}
left 左对齐 right 右对齐 center 居中对齐
装饰文本
text-decoration属性规定添加到我们文本的修饰。可以给文本加下划线 删除线 上划线；
div{
text-decoration:underline;
}
none 默认 ，没有修饰线
underline 下划线，链接a自带下划线
overline 上划线 几乎不用
line-through 删除线
文本缩进
text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进
div{
让我们每个标签的首行缩进一些距离；
text-indent: 20px;
}
em是一个相对单位，就是当前元素1个文字大小来说的，
如果当前元素没有设置大小，则会按照父元素的一个文字小大
行间距
line-height 属性设置行间的距离（行高），可以控制文字与行之间的距离；
行间距包含文字本身的高度，也包括上间距和下间距;
p
{
line-height:26px;
}
css的引入方式;
按照css样式书写的位置，css样式可分为三大类；
1 行内样式表（行内式）、
是在元素标签内部的style属性中设定css样式，适合与修改简单的样式
在双引号中间，写法符合css规范
可以控制当前的标签设置样式
由于写法麻烦 不能考虑到我们结构与样式相分离 ，所以不推荐大量使用，一些简单的样式，可以考虑示使用
2 内部样式表（嵌入式）
就是把样式表写在我们HTML页面内部，是将所以css代码抽取出来，单独放到我们的style标签中
理论上可以放到我们HTML任何位置上，但是一般我们会放到我们文档的head标签中
通过此中方式 可以方便控制整个页面中的元素样式设置
3 外部样式表（链接式）
我们开发中使用都是外部样式表，适合样式比较多的情况，核心是样式单独写到css文件中，之后把css
文件引入到HTML页面中。
分两步
1 新建一后缀名为.css的样式文件，把所有css代码都放入此文件中
2 link标签去href去写路径
Chrome调试工具
1 打开我们调试工具
f12 键
ctrl 加滚轮键可以放可以放大开发者工具代码大小
左边是HTML 右边是css
右边css样式可以改动数值（左右箭头或者直接输入）和查看颜色
Ctrl+0复原浏览器大小
如果点击元素，发现右侧没有样式的引入,极有可能是类名有着样式引入错误；
如果有样式和，但是样式前面有黄色谈好提示，则是样式书写有问题；
Emmet语法
来提高HTML和css编写速度，vscode内部已经集成语法
1 快速生成我们HTML的语法结构
1 想生成标签tab键 比如div然后Tab键
2 如果要想生成多个相同的标签 就可以比如div*3 快速生成3个div 不要用空格
3如果有父子级关系的标签 就可以用 如 ul>li 就可以
4 如果有兄弟关系标签 用+就可以了 比如div+p；
5 如果生成带有类名或者id名字的 直接写.demo 或者 #two tab键就可以;
6如果生成的div类名是有顺序的，，，可以用自增符号$；
7如果想要生成的标签内部写内容可以用{}表示；
2 快速生成css样式语法
1比如w200 按tab可以 生成 width：200px;
2比如lh26按tab可以生成 line-height：26px
格式化代码
我下载插件
复合选择器
复合选择器是建立在基础选择器之上 对基本选择器进行组合形成的
复合选择器可以更准确 更高效的选择目标元素 （标签）
复合选择器是由两个或者多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括： 后代选择器，子选择器，并集选择器，伪类选择器 等
后代选择器（重要）
称为包含选择器 可以选择父元素里面的子元素，，其写法就是把外层标签写在前面 ，内层标签写在后面
中间空格分隔，当发生嵌套时，内层标签就成为外层标签的后代
语法
元素一 元素2 {样式声明}
元素1和元素2一定要用空格隔开
元素1为父级 元素2为子级，，最终选择的元素2；
元素2可以是孩子 可以是孙子等 只要元素1点后代即可
元素1和元素2可以是任意的基础选择器
子选择器
只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子；
语法：
元素1>元素2 {样式声明}
元素1和元素2中间大于号隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2是元素1的亲儿子 其孙子，重孙子都不归他管，也可以叫他亲儿子选择器；
并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式 ，通常用于集体声明
并集选择器是各选择器通过英语逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
元素1，元素2 {声明}
上述语法是元素1和元素2都改了
伪类选择器
用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
伪类选择器书写最大的特点是冒号（：）表示，比如 :hover、:first-child。
有很多 链接伪类，结构伪类等，，所以在这里给大家讲解常用的链接伪类选择器
a:link 选择所有的未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
注意点
1 为了确保生效，请按照顺序进行说明； link ：visited hover active
2 因为a链接在浏览器中具有默认样式，，所以我们实现工作中都需要给链接单独指定样式
focus伪类选择器
用于选取获得焦点的表单元素
焦点就是光标 ，一般情况类表单元素才能获取，因此这个选择器也主要针对表单元素来说的
input :focus{
background-color: yello;
}
css的元素显示模式
1 什么是显示模式
作用：网页的标签非常多 ，在不同地方会用到不同的类型标签，了解他们的特点可以更好布局我们的网页
元素显示模式是元素（标签）以什么方式显示，比如
2 元素显示模式的分类
html 元素一般分为块元素和行内元素两种类型。
块元素
h1到h6 p div ul ol li 等 其中div标签最典型的块元素
特点
1 比较霸道，自己都占一行
2 高度，宽度 外边框及内边框都可以控制
3 宽度默认是容器（父级宽度）的100% 没有指定宽度
4 是一个容器及盒子，里面可以放行内或者块级元素
注意点
文字类的元素不能使用块级元素
p标签主要用于存放文字，因此p里面不能放块级标签 ，特别是div
同理 h1到h6等都是文字类块级标签 ，里面也不能当其他块级元素。
行内元素
常见的行内元素有 a strong b em i del s ins u span ，其中span标签是最典型的行内元素 有点地方也将
行内元素称为内联元素
特点
1 相邻行内元素在一行上，一行可以显示多个
2 高，宽自直接设置啥无效的
3 默认宽度就是他本身内容的宽度
3 行内元素只能容纳文本或其他行内元素
注意
链接里面不放链接
a比较特殊 可以放块级元素
行内块元素
img input td 他们同时具有块元素和行内元素的特点 有些资料称
他们为行内快元素
特点
1 和相邻行内元素（行内块）在一行上 ，但是他们之间有空白缝隙，一行可以显示多个（行内元素的特点）
2 默认宽度就是他本身内容的宽度
3 高度 行高 外边距以及内边距都可以控制(块元素特点)
3 元素显示模式的转换
特殊情况下，我们需要元素模式的转换 简单理解一下模式的元素需要另外一种模式的特性
比如想要增加链接a的触发范围
转化我们的块级元素 display:block;
转化我们行内元素 display: inline;
转化我们的行内块 display:inline-block;
snipaste是一个简单但强大的截图工具 ，也可以让你将截图贴回屏幕上
1 f1可以截图 ，同时测量大小，设置箭头，书写文字等
2 f3在桌面顶置显示
3 alt可以去色 （按shift可以切换取色模式）
4 按esc 可以取消图片显示
一个小技巧 单行文字垂直居中的代码
css 没有提供垂直居中的代码，但是
解决方案，，让文字的行高等于盒子的高度 就可以让文字在当前盒子垂直居中
如果行高小于盒子高度偏上，，大于偏下
css的背景
通过css背景属性，可以给页面元素添加背景样式
背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等
背景颜色
backgrund-color transparent|color
transparent透明
color;指定颜色
默认为透明色
背景图片
background-image属性描述了元素的背景图像，实际开发中常见logo或者一些修饰的小图片或者是超大
背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）
background-image : none|url();
none :表示无背景图
url 使用绝对或者相对路径
背景平铺
html页面上对背景图像进行平铺,可以使用background-rapeat属性.
background-rapeat：repeat|no-rapeat|rapeat-x|rapeat-y;
默认是平铺的
页面元素可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色
背景图片的位置
background-position属性可以改变背景图片的位置。
background-position: x,y;
x坐标和y坐标，可以使用方位名词或者精确单位
length 百分数 |由浮点数和单位标识符组成的长度值
position top|center|bottom|left|center|right 方位名词
参数是方位名词
如果指定两个值是是方位名词，则两个值前后顺序无关，比如 left top或者top left效果一致
如果 我们只指定一个方位名词，另一个省略，则第二个值默认居中对齐
参数是精确单位
如果参数是精确坐标，那么第一个必定是x坐标，第二个y坐标
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中也就是我们的center
参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x，第二个值是y坐标
背景图像固定（背景附着）
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment后期可以制作视差滚动的效果
background-attachment:scroll | fixed
scroll 背景图像随着我们的内容滚动而滚动
fixed 背景图像固定
背景复合写法
为了简化背景属性的代码，我们可以讲这些属性合并简写在同一个属性background中，从而节约代码量
当使用简写属性时，没有特定的书写顺序，一般习惯顺序为；
background：背景颜色 背景图片 背景平铺 背景图像滚动 背景属性可以设置
背景颜色，背景图片，背景平铺，背景图片滚动，背景位置
背景色半透明
css3为我们提供了背景颜色半透明的效果
background:rgba(0,0,0,0.3);
最后一个参数是alpha透明度，取值范围在0-1之间。
我们习惯把0.3的0省略掉，写成.3
背景半透明是指盒子背景半透明，盒子里面的内容不受影响
css3新增属性，是ie9+版本浏览器才支持的
但是在我们实际开发中 不太关注兼容性。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
