常见的浏览器的前缀
1.⾕歌chrome======内核(webkit)========前缀(-webkit-)
2.苹果safari======内核(webkit)======前缀(-webkit-)
3.⽕狐firefox=====内核(gecko)=======前缀(-moz-)
4.欧朋opera=======内核(presto)======前缀(-o-)
5.IE=============内核(trident)=====前缀(-ms-)
6.edge===前缀(-webkit-)
微软win11系统上浏览器已经全面改成edge了,win11以下的系统用的还是IE(IE目前已经停产了)
一:线性渐变linear-gradient
不加浏览器前缀:方向必须要写to,写的是终点
加浏览器前缀:方向就不能写to了,写的是起点
加了不同的前缀只能在对应的浏览器上识别,比如加了ms只能在IE上识别,加了webkit就可以在谷歌、苹果、edge上识别
二:径向渐变radial-gradient()
注意:
起点可以写方位名词,也可以写具体的坐标点。
如果写了起点了,就必须加浏览器的前缀。
如果不写起点,起点默认在中心点,可以不加前缀。
渐变的形状:
默认情况:
正方形盒子默认是圆形(正方形盒子永远都只呈现圆形)
长方形盒子默认是椭圆形(长方形盒子是可以改成圆形的)
circle=====圆
ellipse====椭圆
三:重复性渐变
线性渐变和径向渐变都支持重复。
在渐变的单词之前加repeating-,该颜色分配比例。
四:精灵图
精灵图也叫做雪碧图,英文单词是sprite,这是一种图片整合技术,就是把很多张小图放到了一张大图之上。
用精灵图的好处:
1.减少对服务器的请求次数
2.提高网页的加载速度
3.减少图片的体积
使用精灵图的核心技术点:背景图的位置
五、过渡
过渡:可以实现从一个状态缓慢的变化到另外一个状态,有一个动画效果
一般过渡都需要结合鼠标滑过等一起实现
非简写:
transition-property:过渡要参与的属性
transition-duration:过渡时间
transition-delay:过渡的延迟时间
简写:transition
简写方式里面:其他值没有书写顺序,但是过渡时间必须在前,延迟时间在后,如果只写了一个时间那么必然是过渡时间
缺一个:过渡的运动曲线(明天再讲)
六:变形transform
位移translate,主要作用:调整元素的位置。
常见写法:
transform: translateX();====只会做横向移动
transform: translateY();====只会做纵向移动
transform: translateX() translateY();====横向和纵向同时移动
transform: translate(x,y);====横向和纵向同时移动
旋转: 旋转常见书写方式
赋值的时候用的单位是角度单位deg
transform: rotateX(0deg);====围绕x轴做旋转
transform: rotateY(0deg);===围绕y轴做旋转
transform: rotate(0deg);===围绕整个盒子中心点做旋转
transform-origin:可以更改变形点
缩放:可以实现元素的放大和缩小
缩放的常见写法:
赋值不带单位,值是倍数的意思
写1没有变化,如果比1大,就是放大多少倍,如果比1小,就是缩小多少倍
transform: scaleX();====沿着x轴做缩放,改变的宽度
transform: scaleY();====沿着y轴做缩放,改变的高度
transform: scaleX() scaleY();====x和y同时改变
transform: scale();
小括号里面只写一个值,就是x和y同时改变
写了2个值,第一个值是x,第二个值代表的是y
默认变形点都是在中间,可以通过transform-origin更改变形点
倾斜:skew
要记住的东西
1.浏览器的前缀
2.渐变的单词
3.精灵图的好处
4.过渡的单词
5.变形中位移、旋转和缩放的单词
作业:
1.扇子:元素不可见千万不要用display:none;
因为display:none这个属性是不参与过渡
可以使用opacity实现元素的隐藏效果
2.缩放的线条:
一开始线条不可见是让缩放值为0实现的,也不是x和y同时为0,只需要让其中一个为0
提示:创建2个盒子,一个加左右边框线,一个加上下边框线即可
3.百叶窗尽力去做(明天会讲)
1.选择器的权重值
2.浮动的作用、特点
3.文字水平居中、垂直居中
4.如何取消超链接自带的下划线
5.红绿蓝白黑的rgb和十六进制写法
一、背景
非简写方式(单一写法)
1.背景的颜色:background-color
2.背景的图片:background-image:url(图片的路径)
盒子大于图片:会发生平铺的现象
盒子等于图片:刚好显示
盒子小于图片:会把图片裁切
3.背景图片的平铺规则:background-repeat
repeat===平铺,默认值
no-repeat===不平铺
repeat-x===横向平铺
repeat-y===纵向平铺
4.背景图片的位置:background-position
写法一:写具体的坐标点
左上角是0,0
x轴:向右为正,向左为负
y轴:向下为正,向上为负
写法二:借助方位名词写(top、bottom、left、right、center)
简写方式(复合写法)
background:需要什么就写什么。没有书写顺序。
二、盒子模型
组成部分:内容 内间距 边框线 外间距
我们写的width和height指的是内容区的宽度和高度
加了内间距和边框线会导致把盒子撑大
总宽:width+左右的内间距+左右的边框线
总高:height+上下的内间距+上下的边框线
三、内间距的常见书写方式
内间距padding:内容到盒子边的距离
padding:1个值,同时给4个方向都添加
padding:2个值,上下 左右
padding:3个值,上 左右 下
padding:4个值,上 右 下 左 顺时针的顺序赋值
padding-left:左间距
padding-right
padding-top
padding-bottom
注意:内间距不支持写负数
四、外间距的常见书写方式
外间距margin:盒子与盒子的距离
书写方式和内间距是一样的
注意:外间距支持写负数
调整位置:
上下:margin-top
正数:向下走 负数:向上走
左右:margin-left
正数:向右走 负数:向左右
五、边框线的书写方式
非简写方式(单一写法):
1.border-width:边框线的粗细
2.border-style:边框线的样式
solid:实线
dashed:虚线
dotted:点线
double:双线
none:没有线
3.border-color:边框线的颜色,默认颜色是黑色
简写方式(复合写法):border:需要哪个值就写哪个,没有书写顺序。
六、利用边框线画三角形
1.宽高为0
2.给4个方向都加透明的边框线(transparent)
3.需要哪个方向就给对立面写上颜色即可。
七、元素的居中方式
文字的居中
水平居中:text-align:center
垂直居中:line-height的值height一致
图片的居中
水平居中:text-align:center;
注意:要写在图片的父元素身上。
垂直居中:下周再讲。
盒子的居中:
水平居中:margin:0 auto;
注意:一定要写在自己身上。
垂直居中:下周再讲。
八、清除标签自带的间距
*{padding:0;margin:0;}
一、元素类型
1.块元素block
特点:
1.纵向排列,可以设置宽高
2.如果不设置宽度,那么宽度默认和父亲保持一致。
3.一般在网页布局中都当作容器来使用。
常见标签:div、p、标题标签(h1,h2,h3,h4,h5,h6)、ul、ol、li、dl、dt、dd、hr、form
2.行内元素inline
特点:
1.横向排列的,不能设置宽高
2.宽度默认由内容决定
3.有时候上下的内外间距有可能加不上。
常见标签:span、a、b、strong、i、em、u、s、del、sup、sub
3.行内块元素inline-block
特点:
1.横向排列的,可以设置宽高
2.自带3-5px的间距,这个间距不是由padding、margin造成的。
常见标签:img、input
二、元素类型之间的转换
display:block;====转成块元素
display:inline;===转成行内元素
display:inline-block;====转成行内块元素
三、元素的显示和隐藏
隐藏:display: none;元素隐藏之后不占据位置。
显示:只要让display的值不为none就是显示。
block、inline、inline-block
显示一般推荐用block。
四、vertical-align可以实现的垂直居中。(了解)
但是仅限于行内块元素使用
top:顶线对齐
middle:中线对齐
baseline:基线对齐,默认值
bottom:底线对齐
行内块元素为什么自带3-5px的间距?
因为行内块元素默认是和文字的基线进行的对齐。
如何取消这个自带的间距呢?
1.让vertical-align的值只要不是baseline即可。
2.浮动:缺点:会脱离文档流,不占据位置。
3.font-size: 0;使用这种方式的前提是盒子里面没有文字才能使用,如果有文字,虽然能取消间距,但是文字就看不见了。
五、省略号的制作
1.加宽度
2.让文字不要自动换行: white-space: Nowrap;
3.让超出的部分隐藏:overflow: hidden;
4.显示省略号:text-overflow: ellipsis;
六、overflow的值
visible:超出的部分依然可见,默认值
hidden:让超出的部分隐藏====常用
auto:当内容超出之后会自动产生滚动条。(推荐auto制作滚动条)====常用
scroll:不管内容有没有超出都会产生滚动条
标签嵌套:
建议:竖着排列的可以嵌套横向排列的,但是横向排列的里面最好不好嵌套竖着排列
一、伪类选择器
伪类选择器:标志是一个冒号
:link===链接未访问(只能用在超链接)
:visited====链接已访问(只能用在超链接)
:hover===鼠标滑过、鼠标悬停(可以用在任何一个标签之上)=====常用
:active===鼠标按下(可以用在任何一个标签之上)
注意:如果这4个状态同时书写,顺序不可打乱。
二、选择器的权重
权重值越大,优先级越高。
通配符选择器:0
标签选择器:1
类选择器:10
伪类选择器:10
id选择器:100
行内样式表:1000
包含选择器(后代和子代):用到的所有的选择器权重相加之和
群组选择器:各自选择器的权重值(选择器和选择器之间毫无关系)
三、和文字相关的样式
1.文字的颜色:color
1.直接写颜色单词:red
2.rgb()===取值区间:0-255
rgb(50,200,100)
红色:rgb(255,0,0)
绿色:rgb(0,255,0)
蓝色:rgb(0,0,255)
白色:rgb(255,255,255)
黑色:rgb(0,0,0)
3.十六进制写法===取值区间:0-9a-f
#跟6位数字,2位是一组,可以分成3组,依次代表红色、绿色、蓝色的取值
红色:#ff0000====#f00
绿色:#00ff00====#0f0
蓝色:#0000ff===#00f
白色:#ffffff===#fff
黑色:#000000===#000
2.字号:font-size
谷歌浏览器默认字号为16px
谷歌最小字号是12px 其他浏览器中可能是10px
字号最好写偶数
3.字体:font-family
谷歌的默认字体是微软雅黑,其他浏览器可能是宋体。
注意:写字体的时候如果字体是汉字或者1个以上的英文单词,那么必须加引号。
字体可以写多个,中间通过逗号隔开,使用字体的时候会从左到右依次查找,如果能用就用,不能用就下一个,如果都不能使用就使用默认的。
4.加粗:font-weight
1.写单词
lighter===变细
normal===正常
bold==加粗
bolder==更粗(只是语气加重而已)
2.写数字(100-900)
100===变细
400===正常
600===变成加粗了,但是程序员更加喜欢用700
注意:千万不要带单位
5.倾斜:font-style
normal===正常
italic===倾斜
oblique===更倾斜(只是语气加重而已)
6.首行缩进text-indent
em单位是一个相对单位,相对于当前元素的文字大小而言的
假设当前文字大小是16px,那么1em=16px 2em=32px
假设当前文字大小是20px,那么1em=20px 2em=40px
7.对齐方式
水平对齐:text-align
left:左对齐
right:右对齐
center:居中对齐(常用)
justify:2端对齐
垂直对齐:line-height
当line-height与height保持一致的时候:文字垂直居中
当line-height比height小:文字垂直偏上
当line-height比height大:文字垂直偏下
注意:
如果文字是单行的,line-height可以调整文字的垂直对齐方式
如果文字是多行的,那么line-height就变成行高了(行与行的间距,上一行文字的顶端到下一行的顶端)
8.修饰线:text-decoration
underline:下划线
overline:上划线
line-through:中划线、删除线、贯穿线
none:没有线(常用)
9.了解
字间距:letter-spacing
词间距:word-spacing
大小写转换:text-transform
uppercase===转大写
lowercase==转小写
capitalize==首字母大写
四、浮动
浮动float:
主要作用:实现元素的横向排列。
浮动的书写方式:
float:left;=====让元素向左漂浮
float:right;===让元素向右漂浮
float:none;====不漂浮(写了和不写是一样)
特点:
1.元素一旦加了浮动,就会立即漂浮起来,不占据位置,后面的元素会向前补齐。
2.浮动的元素是无法覆盖文字和图片的。
3.如果给‘相邻’的多个元素都写了左浮动:那么元素会从左到右依次横向排列
如果给‘相邻’的多个元素都写了右浮动:那么元素会从右到左依次横向排列
4.如果元素过多,一行放不下,会自动换行的。
注意:换到下一行的时候如果上一行有一个元素的高度太大了,会导致卡着过不去
5.大多情况下纵向排列的标签比如div如果不设置宽度,宽度默认和父亲保持一致,但是一旦加了浮动,宽度是由内容去决定的。
6.大多情况下横向排列的标签是无法设置宽高的,但是加了浮动之后就可以设置了。
清除浮动:是清除上一个浮动的元素带来的影响,而不是取消浮动(谁受到影响就写在谁的身上)
clear:left;====清除左边浮动带来的影响
clear:right;===清除右边浮动带来的影响
clear:both;===左右2边都清除
一、网站三要素(网页的组成部分)
html====结构=================w3c
css====表现(美化网页的)=====w3c
js====行为(实现交互效果的)===ECMA
二、标签语法
html:超文本标记语言,目前使用的版本是5.0
标记:也叫做标签、元素、盒子
记住:所有的标签都是长在尖括号里面的<>
长在尖括号里的第一个单词叫做:标签的名字,后面的单词统称为属性
属性:分为属性名字和属性值,中间通过等号连接,属性值需要加引号
属性根据情况可写可不写。
分类:
单标签:<标签名字 属性名字1='属性值' 属性名字2='属性值'。。。>
双标签:<标签名字 属性名字1='属性值' 属性名字2='属性值'。。。>标签内容</标签名字>
三、标签的关系
父子关系(嵌套)
兄弟关系(并列)
四、各种标签
1.文章标题标签h1-h6
特点:双标签 文字自带加粗效果,h1字号最大,h6字号最小的,纵向排列
注意:h1标签有唯一性,一个页面只允许使用一次,h1标签一般是用来放logo图的
2. 段落标签:p
特点:双 段落与段落中间自带间距 纵向排列
3.倾斜标签:i、em
特点:双、横向排列
区别:em标签表示强调,有语气加重效果,有利于搜索引擎的搜索
4.加粗:b、strong
特点:双、横向排列
区别:strong标签表示强调,有语气加重效果,有利于搜索引擎的搜索
5.下划线:u
特点:双、横向排列
6.删除线:s、del
特点:双、横向排列
区别:del标签表示强调,有语气加重效果,有利于搜索引擎的搜索
7.上标:sup 下标:sub
特点:双、横向排列
8.修饰性标签
hr:水平线
br:强制换行
都是单标签
9.列表标签
有序列表:ol+li=====几乎不用
默认列表符号是数字
可以通过type属性更改列表符号
type="1"===按照阿拉伯数字排序
type="A"===-按照大写字母排序
type="a"====按照小写字母排列
type="I"===按照大写的罗马数字排序
type="i"====按照小写的罗马数字排序
start属性:可以更改排序的起始值。
无序列表:ul+li
默认列表符号是实心圆点
type="disc"====实心圆点
type="circle"===空心圆
type="square"===实心方块
type="none"===没有符号
使用场景:新闻条、导航条
自定义列表:dl+dt和dd
使用场景:用在图文混排的地方
dd是对dt的解释说明,所以一般会再dt中放图片,dd中文字
10.图片标签:img
单标签
src属性:写图片的路径的
上一级:../ 上2级:../../
alt属性:当图片加载不出来的时候显示的提示信息
title属性:鼠标悬停时候的提示信息
11.超链接:a
双、自带文字颜色和下划线、横向排列
href属性:写你要跳转的地址的
1.可以写真实网址
2.可以写自己创建的页面(就是自己创建的html文件)
3.可以写图片的地址
target属性:规定页面的打开方式的
_self:在当前窗口打开,默认值
_blank:在新窗口打开
12.div和span
div标签:一般是用来划分区域的(双,纵向排列)
span标签:一般是用来修饰某一小段文字的(双,横向排列)