珠峰培训css从入门到精通1
2019-03-09 本文已影响4人
似是懂
前端：对于网站来说是指网站前台部分，包括网站的结构层和表现层。
前端技术：前端设计、前端开发
前端设计：网站的视觉设计
前端开发：网站的前台代码实现(html\css\js和html5\css3)
html基本结构
HTML:超文本语言，描述网页的语言
CSS：层叠样式表。用来表现html或xml等文件样式的计算机语言。
不仅可以静态的修饰网页，话可以配合各种脚本语言动态的对网页各元素进行格式化
JS：轻量型编程语言
document是指整个文件，下面就是html
meta：移动端数据开发必须加这个
编码 utf-8
网页的关键词 SEO去搜索
视口 viewport meta：vp tab（移动端手机页面开发必须加的代码）
shortcut icon: 网页标题前面的小图标 一般一个网页的logo
href="javascript:;"把标签默认连接跳转的行为禁止掉
常用的标签元素A-Z
【A】
<!--注释--> 注释
<!doctype> 文档类型
<a> 链接跳转
<article> 文章
<aside> 页面内容之外的内容
<audio> 声音内容之外的内容 autoplay即刻播放 loop循环播放 controls控件
【B】
<body> 网页主题
<b> 加粗
<br> 换行
<button> 按钮
【C】
<canvas> 画布图形
<caption> 表格标题
<col> 表格中一个或多个列的属性值
<colgroup> 表格中供格式化的列组
【D】
<div> 划分块结构
<dl><dt><dd> 定义列表
<datalist> 下拉列表，与input配合使用
【E】
<em> 斜体
<embed> 外部交互内容或插件 <smbed src="helloworld.swf"/>
【F】
<figcaption> figure元素的标题
<figure> 媒介内容的分组，以及它们的标题
<footer> section或page的页脚
<form> 供用户输入的html表单
<frame> 框架集的窗口或框架
【H】
<h1>to<h6> html标题
<head> 关于文档的信息
<header> section或page的页眉
<hr> 水平线
<html> html文档
【I】
<i> 斜体
<img> 插入图片
<input> 表单元素
【L】
<ul><li> 无序列表，小黑点
<ol><li> 有序列表，数字
<label> input元素的标注
<link> 文档与外部资源的关系
【M】
<meta> 元信息 编码、关键词、描述
<map> 图像映射
<mark> 有记号的文本
<menu> 命令的列表或菜单
<meter> 预定义范围内的度量 进度
【N】
<nav> 导航链接、
【O】
<ol> 有序列表
<option> 下拉列表，与select配合使用
<object> 插件
【P】
<p> 文字段落
<param> 对象的参数，与object对照使用
<progress> 任何类型的任务进度
【S】
<s> 删除线
<span> 定义小块 小图标
<style> 内嵌式的标签
<strong> 加粗
<select> option下拉列表
<small> 变小
<sub>下标<sup>上标
<section> 相当于div 用来划分块
【T】
<title> 网页的标题
<table> 单元表格 tr td th thead tbody tfooter
<time> 日期/时间
<textarea> 多行文本输入控件
【U】
<ul><li> 无序列表
<u> 下划线
【V】
<video> 视频播放器
块级元素和行内元素特点
行内元素 a button big datalist em i input mark span select option s strong small sub sup textarea u
1.不独占一行
2.排列方式：从左往右
3.设置宽高不起作用 如要起作用 需要转换为块/行内块display：block/display：inline-block
4.不设置宽高是它本身内容的狂傲
5.天生自带 display：inline
6.只能容纳文本或者其他内联元素（不要在内联元素中嵌套块级元素）
块级元素 table form dl dt dd figure figcaption div h1-h6 hr ul ol li nav p
1.独占一行
2.排列方式：从上往下
3.可以设置宽高以及盒子模型的其他属性
4.不设置宽高的情况下 它的宽度是师傅元素的宽度 它的高度是本身内容的高度
5.天生自带 display：block 通常使用来进行大布局的搭建
6.行内元素里不能嵌套块级元素（特殊a）（a标签不要嵌套a标签 即使我们嵌套了 最后浏览器也会解析为并列关系而不是嵌套关系）
行内块元素 img input
元素之间互相转换
行内元素——display：inline
块级元素——display：block
行内块元素——display：inline-block
标签语义化
含义：
- 合适标签做合适的事情
- 标签语义化为浏览器和搜索引擎服务
为什么要遵循标签语义化？
1.利于seo（也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重）
2.在样式丢失的时候，还是可以比较好的呈现结构
3.更好的支持各种终端，例如无障碍阅读和有声小说等
4.利于团队开发和维护，W3C给我们定了一个标准，那么团队中都遵循这个标准，那么代码的差异就会缩小，在开发和维护的时候就可以提高效率
遵循语义化
1.尽量减少使用无意义标签，例如span和div
2.尽量不使用标签本身的css属性，例如b、font、s等标签，如果需要这些样式，那么使用css样式进行添加
3.在需要强调的部分，使用strong、em，但是样式尽量使用css样式来描述
4.表格搭建时，使用<thead>表格头部</thead> <body>表格身体</body> <tfoot>表格尾部</tfoot>
5.列表搭建时，使用<ul>无序列表</ul> <ol>有序列表</ol> <dl>定义列表</dl>
CSS基本语法
- css规则由两个主要的部分构成：选择器，以及一条或多条声明（css属性）
- 选择器通常是您需要改变样式的html元素
- 每条声明由一个属性和一个值组成
- 属性是你希望设置的样式属性。每个属性有一个值。属性和值被冒号分开
h1 {color:red;font-size:14px；}
选择器 属性 值
属性+值 ：声明
CSS引入方式—行内式
语法：直接写在开始标签里面，空格加style="声明；声明"
缺点：杂乱，无法公用
<p style=width:100px;height:100px;></p>
CSS引入方式—内嵌式（嵌入式）
含义：使用style标签将css属性名和属性值引入到html页面中，通常style标签放置在head标签中。
内嵌式可以放在head或者body里 建议放在head里面title标签下面
为什么css样式要放置在head中呢？ 因为代码从上到下执行
语法：<style type="text/css">
选择器{声明；声明；...}<style>
<head>
<style type="text/css">
p{width:100px;height:100px;}
</style>
</head>
CSS引入方式—外联式（外链式）
含义：通过link标签将独立的css文件引入到html文件中
优点：可以分屏，利于写样式
语法：link标签 href=“css样式路径名称”
可以放在head标签或者body标签里面
<link rel="stylesheet" type="text/css" href="../css/prism.js"/>
rel="stylesheet" 描述了当前页面与href所指定文档的关系。即href连接的文档是一个新式表
type="text/css" 是指定mime类型，也就是css文档
href="../css/prism.js" 规定被连接文档的位置
CSS引入方式—导入式
含义：通过@import‘url’引入一个独立的css文件
语法：依赖css样式文件，所以他要放在style或者css样式表里
@import "css样式路径"
如果style里面既有内嵌的样式又有导入的样式，导入式要放在内嵌式的上面；放在下面导入式会失效
<style type="text/css">
@import url(style.css)</style>
url(style.css) url(规定被链接文档的位置)
外链式和导入式的区别
1.link和@import虽然都是引入外部的css文件，但是他们是有天差地别的
2.link是html标签，@impor完全是css提供的方式，要写在css文件或者style标签中
3.他们加载顺序也是有区别的，当一个页面被加载的时候，link引用的css文件会被同时加载，而@import引入的css文件会等页面全部下载完后再加载
4.当使用JavaScript控制dom去改变css样式的时候，只能使用link标签，因为import是不能被dom控制的
css命名规范及项目文件目录
1.必须使用英文开头，并且开头字母一律小写
2.所有命名最好都小写
3.尽量不要用缩写英，除非可以一目了然的
4.如果遇到相差不大class或者id，主功能识别字母在前，位置识别字母在后，职位识别字母第一个可大写（如：navTop，menuLeft）
5.遵循驼峰命名法：第一个单词的首字母小写，其余每一个有意义的单词的首字母大写（如：studentInfo、getElementById）
头：header 内容：content/container
尾：footer 导航：nav
侧栏：sidebar 栏目：column
页面外围控制整体布局宽度：wrapper 左右中：left right center
登陆条：loginbar 标志：logo
广告：banner 页面主体：main
热点：hot 新闻：news
下载：download 子导航：subnav
菜单：menu 子菜单：submenu
搜索：search 友情链接：friendlink
页脚：footer 版权：copyright
投票：vote 合作伙伴：partner
滚动：scroll 内容：content
标签页：tab 文章列表：list
提示信息：msg 小技巧：tips
栏目标题：title 加入：joinus
指南：guild 服务：service
注册：regsiter 状态：status
CSS选择器-基本选择器
1.标签选择器：直接通过元素标签进行选择
<p></p> p{color:red;}
——此选择器权重为1
2.类选择器：通过元素的类名，来选择元素，一个元 素可以有多个类名，都代表这个元素
类名是元素class属性中的属性值，
<p class="sum"> .sum{}
——此选择器的权重为10
3.id选择器：通过元素的id名，来选择元素，类名是元素id属性中的属性值，
<p id="sum"></p> #sum{}
——此选择器的权重为100
4.通配符选择器：代表页面上所有的标签名，可以用来去掉浏览器默认自带的间距
*{margin：0；padding：0；}
——权重小于1，可被覆盖
口号：看到class名要想到"."看到id要想到"#"
CSS选择器-并集选择器
含义：可以对选择器进行分组，被分组的选择器就可以分享相同的声明。
用","将需要分组的选择器分开
语法：样式相同的标签可以并列在一起，节约代码量，更加简化，减少代码的多次重复使用
h1,h2,h3{color:green;}
CSS选择器-交集选择器
含义：两种属性同属一个元素的时候，我们可以使用交集选择器来进行元素的准确选择
语法：在class名或者id名前面加上标签名 缩小查找范围
注意：标签名和class/id名中没有空格隔开
<p class="name1 name2" id=“id1”></p>
p.name1{}
p#id1{}
.name1.name2{}
CSS选择器-派生（后代）选择器
含义：通过依据元素在其位置的上下文关系来定义样式，用 空格 隔开列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器
后代选择器尽量不要超过3个，没有必要把每一个层级都写出来，只需要写出关键节点即可
li strong{
font-style:italic;
font-weight:normal;
list-style:none;}去掉ul li前面默认的小黑点
<ol>
<li><strong>我是斜体字，这是因为strong元素位于li元素内</strong></li>
</ol>
CSS选择器-子代选择器
含义：与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素，符号为大括号
只作用于子元素这一代 孙子以及孙子后面的代不会受影响
h1>strong{color:red;}
<h1>this is<strong>very</strong>important.</h1>
CSS选择器-相邻兄弟选择器
含义：相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素
加号前面的选择器只是用来作为我们查找兄弟的参照标签 他不参与样式的影响
h1+p{margin-top:50px;}
+ 相邻兄弟
~ 所有兄弟
CSS选择器-属性选择器
属性：标签天生自带/我们自定义的标签属性
符号：[属性名] [属性名=“属性值”]
含义：对带有指定属性的html元素设置样式 权重为10
可以为拥有指定属性的html元素设置样式，而不仅限于class和id属性
属性选择器
下面例子为带有title属性所有元素设置样式：
[title]{color:red;}
属性和值选择器
下面例子为title=“zfpx”的所有元素设置样式：
[title=zfpx]{border：5px solid blue；}
设置表单的样式
input[type=“text”]{width:150px;display:block;}
CSS选择器-伪类选择器
a:link{color:red} 未访问的连接
a:visited{color:red} 已访问的连接
a:hover{color:red} 鼠标以动的连接上
a:active{color:red} 选定的连接（没有抬起时）
text-decoration:none/underline; 无下划线/有下划线
权重：10<权重<11
表单元素input：
input：focus 获取焦点（鼠标光标）
input：blur 失去交点（鼠标光标）
CSS3新增的伪类选择器*
css选择器有哪些？css3新增伪类有哪些？
a:link 没有访问之前的样式
a:visited 已访问的样式
a:hover 鼠标移上的样式
a:active 鼠标按下的样式
input：focus 获取光标
css3新增伪类选择器
1. ：not 排除
ul li{
list-style：none；
width：100px；
height：50px
background：red；}
ul li：not（last-child）{
border-right：10px solid #000；}
2. ：last-child
3. :nth-child(n) n=数字（具体第几个）/odd（奇数行）/even（偶数行）
4. ：only-child 唯一、仅仅只有一个的元素
5. ：nth-last-child 倒数第几个元素
6. ：first-of-type 第一个同级凶死元素
7. ：last-of-type
8. ：only-of-type 只有一个元素
9. ：nth-of-type（n）第几个同级兄弟元素
10. ：nth-last-of-type（n）
11. ：empty 空内容
12. ：check 被选中
CSS选择器-伪元素选择器
:first-line 伪元素用于向文本的首行设置特殊样式，只能用于块级元素
：first-letter 微元素用于向文本的首字母设置特殊样式
：before 在元素的内容前面插入内容
：after 在元素的后面插入内容
display：block
content:" " 这个属性不能省略 如果没有这个属性：after样式不会起作用
只要碰到before和after就要加content
只要是设置宽度不起作用 就加display：block（独占一行）/display：inline-block（不独占一行）（转换为块）
vertical-align：bottom/4px；基线对齐
CSS权重和基本规则
权重记忆口诀：从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1
！important>id>class>标签>*
规则：相同的权重：以后面出现的选择器为最后规则
不同的权重：权重值高则生效
权重相等 不遵循就近原则：！important(权重1000)
CSS中可以和不可以继承的属性
一、无继承的属性
1.display：规定元素应该生成的框的类型
2.文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
3.盒子模型的属性：width、height、margin、
margin-top、margin-right、
margin-bottom、margin-left、border、border-
style、border-top-style、
border-right-style、border-bottom-style、
border-left-style、border-
width、border-top-width、border-right-right、
border-bottom-width、
border-left-width、border-color、border-top-color、border-right-color、
border-bottom-color、border-left-color、
border-top、border-right、
border-bottom、border-left、padding、
padding-top、padding-right、
padding-bottom、padding-left
4.背景属性：background、background-color、background-image、background-
repeat、background-position、background-attachment
5.定位属性：clear、position、top、bottom、left、min-height、max-width、
max-height、overflow、clip、z-index、
6.生成内容属性：content、counter-reset、counter-increment
7.轮廓样式属性：outline-style、outline-color、outline-width、outline
8.页面样式属性：size、pause、cue-before、cue-after、cue、play-during
二、有继承性的属性
1.字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换成大写，但是所有使用大型小写字体的字母与其余文本相比，其字体尺寸更小
font-size-adjust：为某个元素规定一个aspect值，这样就可以保持首选字体的x-height
2.文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
3.元素可见性：visibility
4.表格布局属性：caption-side、border-collapse、border-spacing、table-layout
5.列表布局属性：
6.生成内容属性
7.光标属性：cersor
8.页面样式属性：page、windows
9.声音样式属性：speak
CSS盒子模型
宽度和高度的单位
1.px 像素单位 写死
2.% 百分比 动态计算的单位 （自适应 响应式）
内边距（顺时针方向）
内边距会影响盒子在浏览器中的大小
padding:10px
上、下、左、右=10px
padding：10px 20px
上、下：10px 左、右：20px
padding：10px 20px 30px
上=10px 左、右=20px 下=30px
padding：10px 20px 30px 40px
上=10px 右=20px 下=30px 左=40px
边框border
属性：宽度、类型、颜色
类型：solid 实线/dashed虚线/dotted点状线
颜色：英文名：黑色 白色
# ：#000 #fff
rgb：rgb（0，0，0） rgb（255，255，255）
如果没有指明方向的情况下 表示四个方向都有边框线 而且边框线相等
如果border属性只有边框宽度 没有边框线的类型和颜色 导致border属性失效
去掉边框线 border：0
不切图片的情况下 如何制作箭头和小三角的形状*
=>border
小箭头：
原理：正方形的的任意相邻的两条边线
然后旋转一定的角度 得到我们需要的任意方向的箭头
箭头的大小由正方形的宽高控制
箭头的粗细由border边框线的宽度去控制
deg：角度单位 rotate：旋转角度
<style type="text/css">
.arrow{
width:200px;
height:200px;
margin-top：50px
margin-left：50px
border-top:10px solid #000;
border-left:10px solid #000;
transform：rotate（deg）；
}
三角形：
原理：利用border的3个属性：border width/border style/border color实现
宽度和高度要为零 实现一个由4个小三角组成的正方形
要啥方向的三角形只需要保留这个方向的颜色色值 其余的方向颜色色值设为透明即可
三角形的大小由border-width边框线的宽度控制
三角形的颜色由border-color边框线的颜色控制
.triangle{
width:0;
height:0;
border-width:100px;
border style:solid;
border-color;red transparent（透明） transparent transparent;(上右下左)
}
正方形和三角形拼在一起
.box{
width:200px
height:200px;
background-color:red
border-radius:40px(控制四个方向的圆角)
}
margin的值和垂直外边距重叠问题
margin跟padding内边距的方位值和取值情况一样 顺时针方向
1.1个值 margin：10px 上下左右=10px
2.2个值 margin：10px 20px； 上=下=10px 左=右=20px
3.3个值 margin：10px 20px 30px；上=10px 左=右=20px 下=30px
4.4个值 margin：10px 20px 30px 40px；上=10px 右=20px 下=30px 左=40px
一个盒子右上边距 另一个有下边距 会出现margin边距的重叠问题*
并列盒子的margin重叠=>双margin的重叠
=>取大值 并不是他们相加之和 也就是谁大听谁的
margin兼容之margin-top的传递问题*
大盒子里面嵌套小盒子 给小盒子加margin-top值 不但没有实现和大盒子之间的间距反而传递到大盒子身上导致整体下移
=>解决：
1.overflow：hidden 解决margin-top的传递问题（此处并不是隐藏）
2.padding-top：1px 这种方法会影响最后实际的宽高 需要在width/height基础上减掉 才不会影响最后实际的宽高
3.border-top：1px 这种方法会影响最后实际的宽高 需要在width/height基础上减掉 才不会影响最后实际的宽高
4.给子元素的margin-top值改为给父元素加padding-top这样避免了使用margin-top值导致的传递问题（转移目标对象）
margin的负值使用技巧
margin-left：-1300px
CSS盒子模型-padding和maegin的区别
padding是内边距=>会影响我们在浏览器中看到的元素的实际大小(如果要不影响，我们需要在width、height里面减去padding对应的值)
内边距会让元素的内容增大和其他的元素没有关系
margin是外边距=>不会影响我们在浏览器中看到的元素的实际大小
外边距不会让元素的内容增大是和另一个元素的间距
盒子模型的计算公式及使用技巧
css盒子模型的计算：
元素实际宽度=宽度width+padding-lef/padding-right+border-left/border-right
元素实际高度=高度height+padding-top/padding-bottom+border-top/border-bottom
口号：元素的实际大小只会收padding和border的影响 跟margin没有关系；
如果加了padding和border的值 要在width和height的值上减去padding和border的值 否则内容会溢出
如果边框只有宽度会导致失效
.content{
width:100px;
height:250px;
border:10px solid #000;
border-left:40px; (border-left:0)
padding:10px 30px; (上=下=10 左=右=30)
margin:10px 20px 30px;}
实际宽度：100+30+30+0+10=170
实际高度：250+10+10+10+10=290
background背景
背景缩写属性可以在一个声明中设置所有的背景属性
背景图像支持引入多个图像
主要属性有：
background-color
background-image
background-repeat
background-position
background-attachment
background-size
background-origin
background-clip
background-color背景颜色
1.指定要使用的背景颜色 例如：background-color：#ffcc00；
2.可以简写为background
3.background-color 不能继承，其默认值是transparent。transparent有“透明”之意
也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见
4.transparent 指定背景颜色应该是透明的，这是默认
5.inherit 制定背景颜色，应该从父元素继承
text-align 文本的对齐方式（只能是文字）
center 居中对齐
left 居左对齐
right 居右对齐
垂直居中：高度跟行高一致
line-height：行高 用来控制行间距
块元素水平居中
margin：0 auto（上下=0 左右=auto）
background-image背景图片
1.缩写：background：url（’背景图片的路径‘）
2.none 表示背景上没有防放置任何图像，这是默认值
3.inherit指定背景图像应该从父元素继承
4.一个元素可以引入多张背景图片，指定要使用的一个或多个背景图像，默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向
5.background-image：url（’picl.png‘）,url('pic2.png')...
6.background-image 属性不能继承
text-indent：-9999px 首段缩进
background-repeat背景重复（平铺方式）
1.指定如何重复背景图像，默认情况下，重复background-image的垂直和水平方向
2.repeat 背景图像将向垂直和水平方向重复，这是默认
3. repeat-x x轴平铺
4. repeat-y y轴平铺
5. no-repeat不平铺（重复）
6.inherit 指定background-repeat属性设置应该从父元素继承
不能缩写
情况：navbj正好是42px 所以我们不屑 background-repeat他也是只有x轴方向的平铺 因为y轴没有多的高度去平铺
但是如果height和navbj不行等的情况下 我们不屑background-repeat会出现除了x轴平铺植物i y也会看到平铺效果 所以我们最好在background的图片后面紧跟着要指明平铺的方式
background-position背景定位
1.background-position属性设置背景图像的起始位置
2.xpos ypos 第一个值是水平位置，第二个值是垂直，左上角是0.单位可以是长度值，关键字和百分数值
x轴越大 越往右 y轴越大 越往下
3.关键字成对出现left right top bottom center，如果指定一个关键字，其他值将会是”center“
4.x% y% 第一个值是水平位置，第二个值是垂直，左上角是0%0%。右下角是100%100%。如果仅指定了一个值其他值将是50%，默认值为0%0%
5.inherit 指定background position属性设置应该从父元素继承
background-attachment背景关联
设置背景图像是否固定或者随着页面的其余部分滚动
scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
inherit 指定background-attachment的设置应该从父元素继承
