html 只用来添加语义 不用来修饰 在企业中装扮一定要使用CSS 层叠样式表
没有设置宽高的图片 则默认图片大小 如果不想图片变形 则可以只指定宽高中的一个值另一个系统自动调整 等比拉伸
title属性 鼠标放在图片处显示的文字内容 alt属性 当需要显示的图片找不到时显示什么内容
上级查找 ../ 表示从当前位置找到上一级文件夹
注意href 的地址填写中 不能省略http 或 https 协议 可用于文字也可用于图片
target 用于控制如何跳转 _self:当前选项卡跳转 _blank:新建选项卡跳转
假链接 等项目其他页面完成时再改为真链接 格式：
# 会自动回到页面顶部
javascript: 不会回到网页顶部无序列表（用得多） ul (unordered list) 新闻列表 商品列表 导航条
ul中最好只放li标签 但li中可以继续放其他标签 当然也可以加ul标签
webstorm 中可以使用 ul>li * 3 + tab 这个快捷键直接生成多个
快速生成 ul>li * 2>h2+ul>li * 2>p>嵌套 +同级加上 *生成几个
定义列表 dl dl 和 dt / dd 是一个整体一起出现 推荐一个dt对应一个dd
dt 是definition title 即定义列表中的标题
dd 是definition description 用来定义标题对应的描述信息
表格标签<table> <tr> <td> </td> </tr> </table> 一起出现 不单独出现
th 为表格标题 tr 表示整个表格中的一行数据 td 一行当中的一个单元格 也有列的意思
th 存储列标题 自动居中 加粗h td 存储列数据
快速移动选中代码 向上移动 ctrl + shift + ↑ 向下移动 ctrl + shift + ↓
快速合并或展开标签 合并 ctrl + shift + - 展开 ctrl + shift + +
快速新建一行 即回车 shift + enter
ctrl + d 复制光标所在行 ctrl + x 删除光标所在行
action属性:通过这个属性指定要提交的服务器地址
label标签：要想输入框和文字绑定在一起 即点击文字聚焦到框
1.将文字用label包围起来 2.给输入框添加一个id属性 3.通过label中的for绑定id即可
<label for="pwd">密码：</label> <input type="password" name="password" id="pwd">
  空格 小于号 <(less than) 大于号 >(greater than) © 版权符号 ® 注册商标 ™ 商标
要想让单选框默认选择某一个 就在那个标签加上checked属性
下拉列表select 不能输入内容只能选择列表项 默认显示第一条数据
通过给option包裹一层optgroup 给下拉列表分类
<optgroup label="河源">
<option name="area1" value="yuancheng">源城区</option>
<option name="area1" value="zijin">紫金区</option>
<option name="area1" value="lianpin">连平区</option>
</optgroup>
<textarea cols="30" rows="10" name="introduce"></textarea>
通过cols和rows来指定宽度和高度 默认可以拉伸
video标签 播放视频 src:需要播放视频的地址 autoplay:自动播放 controls:是否显示控制条 poster:视频未播放前的图片 loop:用于广告视频 视频播放完毕后是否循环播放 preload:预加载视频与autoplay相斥 muted : 静音 width height 推荐只设置一个 等比拉伸
text-decoration 给文本添加装饰 默认none 最常见的用途就是用于去掉超链接的下划线如下a underline 下划线 line-through 删除线 overline 上划线 td + tab快捷键
text-indent:2em;/*设置文本缩进 2em, 其中em是单位, 一个em代表缩进一个文字的宽度。1em = 16px ti + tab 快捷键
rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色) rgb(0,0,0)
取值是0-255之前, 0代表不发光, 255代表发光, 值越大越亮 企业常用RGB值相同的灰色 rgba a代表透明度, 取值是0-1, 取值越小就越透明 如 color: rgba(255,0,0,0.2);
十六进制中是通过每两位表示一个颜色 如#FFEE00 FF表示R EE表示G 00表示B 相同可以写成#FE0
重点来了 直接一行写完font属性 缩写格式font: style weight size family;
style，weight可以省略 size,family不能省略 size一定要写在family的前面,size和family必须写在所有属性的最后 font:italic bold 20px "微软雅黑";
标签选择器 根据指定的标签名称, 在当前界面中找到所有该名称的标签 无论藏的多深 权重1
id 标签选择器 根据指定的id名称找到对应的标签, 然后设置属性,编写id选择器时一定要在id名称前面加上# 不能以数字开头在前端开发中id一般留给js使用的 权重100
类标签选择器 根据指定的类名称找到对应的标签 在同一个界面中class的名称是可以重复的 类名就是专门用来给CSS设置样式的 每个标签可以同时绑定多个类名 权重10
css3
后代选择器 先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签
后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
后代选择器必须用空格隔开并且可以通过空格已知延续下去
div p{ // 也可以是其他选择器
text-align: center;
color: darkorange;
}
子元素选择器 找到指定标签中所有特定的直接子元素
子元素选择器只会查找儿子, 不会查找其他被嵌套的标签 ，需要用>符号连接, 并且不能有空格
#findson>ul>li>p{
color: pink;
}
如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器
后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
css4
了解即可：
交集选择器 给所有选择器选中的标签中, 相交的那部分标签设置属性
选择器和选择器之间没有任何的连接符号
并集选择器 给所有选择器选中的标签设置属性
并集选择器必须使用,来连接
css5
相邻兄弟选择器 CSS2 给指定标签后面紧跟的那个标签设置属性
相邻兄弟选择器必须通过+连接 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
通用兄弟选择器 CSS3 给指定选择器后面的所有选择器选中的所有标签设置属性
通用兄弟选择器必须用~连接 选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
h1+p{ /*相邻兄弟*/
color: #00B7FF;
}
h2~p{ /*通用兄弟*/
color: darkorange;
}
css6
序选择器是CSS3中新增的选择器最具代表性的就是序选择器 选中指定的任意标签然后设置属性
:first-child 选中同级别中的第一个标签 :nth-child(n) 选中同级别中的第n个标签 注意点: 不区分类型 last-of-type 选中同级别中同类型的最后一个标签 nth-of-type(n) 选中同级别中同类型的第n个标签
:only-child 选中父元素中唯一的标签 :only-of-type 选中父元素中唯一类型的某个标签
p:first-child{
color: red;
}
p:last-of-type{
color: blue;
}
p:nth-child(3){
color: darkorange;
}
p:nth-of-type(2){
color: #00B7FF;
}
h2:only-child{
color: #6f2280;
}
h3:only-of-type{
color: pink;
}
css7
序选择器的其他用法 区分同级别 还是 同类型
:nth-child(odd) 选中同级别中的所有奇数 :nth-child(even) 选中同级别中的所有偶数
:nth-of-type(odd) 选中同级别中同类型的所有奇数
:nth-of-type(even) 选中同级别中同类型的所有偶数
css8
属性选择器:根据指定的属性名称找到对应的标签, 然后设置属性 最常用于区分input属性
属性的取值是以什么开头的 [attribute^=value]
属性的取值是以什么结尾的 [attribute$=value]
属性的取值是否包含某个特定的值的 [attribute=value]
在企业开发中一般不会使用通配符选择器{属性:值; }
css10
CSS三大特性之继承性 给父元素设置一些属性, 子元素也可以使用
以color/font-/text-/line-开头的属性才可以继承
a标签的文字颜色和下划线是不能继承的 h标签的文字大小是不能继承的
页面统一设计 body{}
css11
CSS三大特性之层叠性
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性。
CSS三大特性之优先级 当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时,优先级判断的三种方式: 如下三种
1.间接选中就是指继承 那么就是谁离目标标签比较近就听谁的
2.如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
3.不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认
css12
!important 用于提升某个直接选中标签的选择器中的某个属性的优先级的
!important必须写在属性值得分号前面 ,将优先级提升为最高
p{
color: green !important;
}
css14
块级元素会独占一行 行内元素不会独占一行
块级元素如果没有设置宽度, 那么默认和父元素一样宽 行内元素不可以设置宽度和高度的 默认和内容一样宽
为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
display: inline-block; /*行内块级元素 既不独占一行 又能设置宽高*/
css15
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式
background-color:属性设置标签的背景颜色 快捷键 bc
background-image: url();设置背景图片地址
background-repeat属性控制背景图片的平铺方式 repeat-x
背景颜色和背景图片可以共存, 图片会覆盖颜色 快捷键bgr
background-attachment的属性进行修改关联方式
scroll 默认值， 会随着滚动条的滚动而滚动 fixed 不会随着滚动条的滚动而滚动
background-position:属性, 就是专门用于控制背景图片的位置 left center right
div.box1 + tab 生成div和class
css17
border: 边框的宽度 边框的样式 边框的颜色; 快捷键 bd+
连写格式中颜色属性可以省略, 省略之后默认就是黑色
连写格式中样式不能省略, 省略之后就看不到边框了
连写格式中宽度可以省略, 省略之后还是可以看到边框
可单独设置border-top: 按照顺时针来赋值 上 右 下 左
solid实线 dashed虚线 dotted小圆点 double双线
同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的
不想要哪一条边框就设为none
css18
padding: 上 右 下 左 margin: 上 右 下 左;
span.box{生成内容}
css20,21
CSS盒模型指那些可以设置 宽度高度/内边距/边框/外边距 的标签
增加了padding/border之后元素的宽高也会发生变化，若想保持不变，那么就必须减去内容的宽高
box-sizing属性可以保证我们给盒子新增padding和border之后,盒子元素的宽度和高度不变,系统会自动减去一部分内容的宽度和高度
box-sizing : border-box;
嵌套关系(大小盒子)盒子之间的距离, 应该首先考虑padding.
其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)
text-align: center; 是设置盒子中存储的文字/图片水平居中
margin:0 auto; 是让小盒子在大盒子里自己水平居中
此处有重点
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin:0; padding: 0;} /企业开发中 标准清空默认边距的方法/
要想'一行文字'在盒子中是垂直居中的 企业开发中经常采用盒子的高度和行高设置为一样解决
css22
两种排版方式:
标准流(文档流/普通流)排版方式
垂直排版, 如果元素是块级元素, 那么就会垂直排版
水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版
浮动流排版方式 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐, 没有居中对齐,在浮动流中是不可以使用 margin: 0 auto;
在浮动流中是不区分块级元素/行内元素/行内块级元素的
css23
如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素
css24
先浮动的元素会显示在前面, 后浮动的元素会显示在后面
相反方向排序 左浮动会找左浮动, 右浮动会找右浮动
浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
css25
浮动元素贴靠现象
1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元素开始往前贴靠
3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
补充:浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象
css26
1.在标准流中内容的高度可以撑起父元素的高度
2.在浮动流中浮动的元素是不可以撑起父元素的高度的
做网页的基本步骤：1.清空所有的边距 2.从外向内，从上到下的编写网页 3.在一一找到对应标签设置属性
垂直方向使用标准流, 水平方向使用浮动流
从上至下布局 从外向内布局 水平方向可以先划分为一左一右再对左边或者右边进行进一步布局
伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
标签名称::before{
属性名称:值;
}
给指定标签的内容前面添加一个子元素
标签名称::after{
属性名称:值;
}
给指定标签的内容后面添加一个子元素
绝对定位就是相对于body来定位 position: absolute;
相对定位就是相对于自己以前在标准流中的位置来移动 position: relative;
相对定位弊端:
相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
绝对定位弊端:
默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化
子绝父相 子元素用绝对定位, 父元素用相对定位
在企业开发中 如果看到有图片叠起来的 首先要先想到定位流 然后想到子绝父相
让绝对定位的元素水平居中
只需要设置绝对定位元素的left:50%;
然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;
left: 50%;
margin-left: -150px;
z-index属性的作用是专门用于控制定位流元素的覆盖关系的
如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面
a标签的伪类选择器是专门用来修改a标签不同状态的样式的
:link 修改从未被访问过状态下的样式
:visited 修改被访问过的状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
:active 修改鼠标长按状态下的样式
:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上
/*告诉系统哪个属性需要执行过渡效果*/
transition-property: width, background-color;
/*告诉系统过渡效果持续的时长*/
transition-duration: 5s, 5s;
2d动画效果
/*1.告诉系统需要执行哪个动画*/
animation-name: lnj;
/*3.告诉系统动画持续的时长*/
animation-duration: 3s;
}
/*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/
@keyframes lnj {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
}
连写
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
animation: move 3s linear 2s 1 normal;
3d效果
只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可
transform-style: preserve-3d;
transform: rotateY(0deg);
其他详细文件在CSS/csscode文件夹
