前端学习笔记1

网页分成三个部分:
结构(HTML)
表现(CSS)
行为(JavaScript)

css简介与使用

1.内部样式

将样式编写到head中的style标签里
然后通过CSS的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式,并且修改时只需要修改一处即可全部应用

  • 内部样式表更加方便对样式进行复用
  • 缺点:
    我们的内部样式表只能对一个网页起作用,它里边的样式不能跨页面进行复用
    在这里插入图片描述
    2.外部样式表
    以将CSS样式编写到一个外部的CSS文件中,
    然后通过link标签来引入外部的CSS文件
  • 外部样式表需要通过link标签进行引入,
    意味着只要想使用这些样式的网页都可以对其进行引用
    使样式可以在不同页面之间进行复用
  • 将样式编写到外部的CSS文件中,可以使用到浏览器的缓存机制,
    从而加快网页的加载速度,提高用户的体验。
    在这里插入图片描述

css的语法

1.注释:
/**/

2.基本语法:
选择器 声明块
在这里插入图片描述

选择器,通过选择器可以选中页面中的指定元素
比如 p 的作用就是选中页面中所有的p元素

声明块,通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构
一个样式名对应一个样式值,名和值之间:以:连接 ,以;结尾

选择器

1.常用选择器

  • 元素选择器
    作用:根据标签名来选中指定的元素
    语法:标签名{}
    例子:p{} h1{} div{}

  • id选择器
    作用:给元素设定id属性,根据元素的id属性值选中一个元素
    语法:#id属性值{}
    例子:#box{} #red{}
    在这里插入图片描述
    在这里插入图片描述

  • 类选择器
    作用:给元素设定,根据元素的class属性值选中一组元素
    语法:.class属性值
    好处:既可以给单一标签设定样式,也可以给一组标签设定样式
    在这里插入图片描述
    在这里插入图片描述

  • 通配选择器
    作用:选中页面中的所有元素
    语法: *

2.复合选择器

  • 交集选择器
    作用:选中同时复合多个条件的元素
    语法:选择器1选择器2选择器3选择器n{}
    注意点:交集选择器中如果有元素选择器,必须使用元素选择器开头
    在这里插入图片描述
  • 并集选择器
    作用:同时选择多个选择器对应的元素,其中可以是交集选择器
    语法:选择器1,选择器2,选择器3,选择器n{}
    例子: #b1,.p1,h1,span,div.red{}

3.关系选择器

介绍标签关系:

父元素:直接包含子元素的元素叫做父元素
子元素:直接被父元素包含的元素是子元素
祖先元素:
1.直接或间接包含后代元素的元素叫做祖先元素
2.一个元素的父元素也是它的祖先元素
后代元素:
1.直接或间接被祖先元素包含的元素叫做后代元素
2.子元素也是后代元素
兄弟元素:拥有相同父元素的元素是兄弟元素
  • 子元素选择器
    作用:选中指定父元素的指定子元素
    语法:父元素 > 子元素
    在这里插入图片描述
  • 后代元素选择器:
    作用:选中指定元素内的指定后代元素
    语法:祖先 后代
    在这里插入图片描述
  • 兄弟选择器
    1.选择下一个兄弟
    语法:前一个 + 下一个
    在这里插入图片描述
    选择紧贴着p的span的兄弟元素

2.选择下边所有的~符号后面标签名的兄弟
语法:兄 ~ 弟
在这里插入图片描述
选择p后面的所有的span兄弟元素

4.属性选择器

语法:
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素
在这里插入图片描述

5.伪类选择器

伪类(不存在的类,特殊的类)
伪类用来描述一个元素的特殊状态
比如:第一个子元素、被点击的元素、鼠标移入的元素…
伪类一般情况下都是使用:开头

:empty 匹配冒号前面元素的类型中没有子元素的元素

:only-child 匹配他的父元素中只有唯一子元素的子元素(匹配的是冒号前的元素,也就是那个子元素)

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素

:nth-last-child(n) 指定每个冒号前元素,匹配该元素的同级兄弟元素里倒数第n个元素

特殊值:
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序

:first-of-type
:last-of-type
:nth-of-type()
:nth-last-of-child(n)
这几个伪类的功能和上述的类似,不同点是他们是在冒号前元素的父元素里面的同类型元素中进行排序
:not() 否定伪类
将符合条件的元素从选择器中去除

在这里插入图片描述

在这里插入图片描述

6.a元素的伪类

语法:
:link 用来表示没访问过的链接(正常的链接)
:visited 用来表示访问过的链接,由于隐私的原因,所以visited这个伪类只能修改链接的颜色。
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击下去的瞬间(如果鼠标一直按住不放就不是瞬间哈哈哈)

  • 直接在a元素里设置color属性,不管上面的点没点过,hover不hover都是那个颜色
    要想设置这些属性就再a:hover{colorxxx}就可以

7.伪元素选择器

伪元素,表示页面中一些特殊的并不真实的存在的元素(特殊的位置)
伪元素使用 :: 开头
语法:
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示鼠标拖动选中的内容
::before 元素的开始
::after 元素的最后
before 和 after 必须结合content属性来使用
在这里插入图片描述

8.选择器权重

样式权重
内联样式1000
id选择器0100
类和伪类选择器0010
元素选择器0001
通配选择器0000
继承没有优先级

1.比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器是单独计算的), 一般来说选择器越详细优先级越高。

2.选择器的累加不会超过其最大的数量级,类选择器在高也不会超过id选择器
如果优先级计算后相同,此时则优先使用靠下的样式

3.可以在某一个样式的后边添加 !important ,则此时该样式会获取到最高的优先级,甚至超过内联样式。
注意:在开发中这个玩意一定要慎用!

单位

长度单位

  • 像素
    屏幕(显示器)实际上是由一个一个的小点点构成的
    不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰
    所以同样的200px在不同的设备下显示效果不一样

  • 百分比
    也可以将属性值设置为相对于其父元素属性的百分比
    设置百分比可以使子元素跟随父元素的改变而改变

  • em
    em是相对于元素的字体大小来计算的
    1em = 1font-size
    系统默认的font-size是16px
    em会根据字体大小的改变而改变
    在这里插入图片描述
    当加上font-size时会根据font-size来布置
    在这里插入图片描述

  • rem
    rem是相对于根元素的字体大小来计算
    与em同理,只不过他认定的font-size是根元素html里的font-size

html{
	font-size=10px
}

颜色

颜色单位

  • 颜色名
    在CSS中可以直接使用颜色名来设置各种颜色
    比如:red、orange、yellow、blue、green … …
    但是在css中直接使用颜色名是非常的不方便
  • RGB值:
    RGB通过三种颜色的不同浓度来调配出不同的颜色
    R:red,G:green ,B:blue
    每一种颜色的范围在 0 - 255 (0% - 100%) 之间
    语法:RGB(红色,绿色,蓝色)
  • RGBA:
    就是在rgb的基础上增加了一个a表示不透明度
    需要四个值,前三个和rgb一样,第四个表示不透明度
    1表示完全不透明 0表示完全透明 .5半透明
  • 十六进制的RGB值:
    语法:#红色绿色蓝色
    颜色浓度通过 00-ff
    如果颜色两位两位重复可以进行简写
    #aabbcc --> #abc,而#aabbcd就不能简写
    一定要RGB每一项都两两重复
  • HSL值 HSLA值
    H 色相(0 - 360)
    S 饱和度,颜色的浓度 0% - 100%(100%最正)
    L 亮度,颜色的亮度 0% - 100%(50%最正)
    A 不透明度,和之前的一样

layout

关系着整个网页的布局

文档流

文档流(normal flow)

  • 网页是一个多层的结构,一层摞着一层
  • 通过CSS可以分别为每一层来设置样式
  • 作为用户来讲只能看到最顶上一层
  • 这些层中,最底下的一层称为文档流,文档流是网页的基础
  • 我们所创建的元素默认都是在文档流中进行排列

对于我们来元素主要有两个状态

  • 在文档流中
  • 不在文档流中(脱离文档流)

元素在文档流中有什么特点:
块元素:

  • 块元素会在页面中独占一行(自上向下垂直排列)
  • 默认宽度是父元素的全部(会把父元素撑满)
  • 默认高度是被内容撑开(子元素)

行内元素:

  • 行内元素不会独占页面的一行,只占自身的大小
  • 行内元素在页面中左向右水平排列,如果一行之中不能容纳下所有的行内元素则元素会换到第二行继续自左向右排列(书写习惯一致)
  • 行内元素的默认宽度和高度都是被内容撑开

盒子模型

盒模型、盒子模型、框模型(box model)

  • CSS将页面中的所有元素都设置为了一个矩形的盒子
  • 将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置
  • 每一个盒子都由一下几个部分组成:
    内容区(content)
    内边距(padding)
    边框(border)
    外边距(margin)

内容区(content),元素中的所有的子元素和文本内容都在内容区中排列
内容区的大小由width 和 height两个属性来设置

  • width 设置内容区的宽度
  • height 设置内容区的高度
width: 200px;
height: 200px;
background-color: #bfa;

在这里插入图片描述
边框(border),边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部
边框的大小会影响到整个盒子的大小
要设置边框,需要至少设置三个样式:

  • 边框的宽度 border-width
  • 边框的颜色 border-color
  • 边框的样式 border-style
border-width: 10px;
border-color: red;
border-style: solid

在这里插入图片描述

边框不会影响内容区的大小,但会影响整个盒子模型的大小

边框

边框 (border)

  • 边框的宽度 border-width
  • 边框的颜色 border-color
  • 边框的样式 border-style

宽度
border-width: 10px; 默认值,一般都是 3个像素
border-width可以用来指定四个方向的边框的宽度值的情况

  • 四个值:上 右 下 左
  • 三个值:上 左右 下
  • 两个值:上下 左右
  • 一个值:上下左右

除了border-width还有一组 border-xxx-width
xxx可以是 top right bottom left
用来单独指定某一个边的宽度

颜色
border-color用来指定边框的颜色,同样可以分别指定四个边的边框规则和border-width一样
border-color也可以省略不写,如果省略了则自动使用color的颜色值

color: red;

样式
border-style 指定边框的样式,默认值是none 表示没有边框

  • solid 表示实线
  • dotted 点状虚线
  • dashed 虚线
  • double 双线

简写属性
border简写属性,通过该属性可以同时设置边框所有的相关样式,并且没有顺序要求
除了border以外还有四个 border-xxx

  • border-top
  • border-right
  • border-bottom
  • border-left

这个方式比较方便所以用的比较多

border: 10px red solid;

内边距(padding)

在这里插入图片描述

  • 内容区和边框之间的距离是内边距
  • 一共有四个方向的内边距:
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left
  • 简写属性和border一样遵循上左下右规则padding: 10px 20px 30px 40px;

内边距的设置会影响到盒子的大小,背景颜色会延伸到内边距上

一共盒子的可见框的大小,由内容区 内边距 和 边框共同决定,
所以在计算盒子大小时,需要将这三个区域加到一起计算

外边距(margin)

外边距不会影响盒子可见框的大小但是外边距会影响盒子的位置

一共有四个方向的外边距:
margin-top:上外边距,设置一个正值,元素会向下移动
margin-right:默认情况下设置margin-right不会产生任何效果
margin-bottom:下外边距,设置一个正值,其下边的元素会向下移动
margin-left:左外边距,设置一个正值,元素会向右移动

margin也可以设置负值,如果是负值则元素会向相反的方向移动

  • 元素在页面中是按照自左向右的顺序排列的,都往左上角挤,所以默认情况下如果我们设置的左和上外边距则会移动元素自身,而设置下和右外边距会挤开其他元素

margin的简写属性:margin 可以同时设置四个方向的外边距 ,用法和padding一样

margin会影响到盒子的实际占用空间

盒子的水平布局

元素的水平方向的布局:
元素在其父元素中水平方向的位置由以下几个属性共同决定

  • margin-left
  • border-left
  • padding-left
  • width
  • padding-right
  • border-right
  • margin-right

一个元素在其父元素中,水平布局必须要满足以下的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 (必须满足)
以上等式必须满足,如果相加结果使等式不成立,则称为过度约束,则等式会自动调整
调整的情况:
1,如果这七个值中没有为 auto 的情况,则浏览器会自动调整margin-right值以使等式满足,所以之前说调margin-right不会有任何效果,一般来说margin-right是由浏览器自己来调节的。
2,如果要设置auto,七个值有三个可以设置auto:

  • width

  • margin-left

  • maring-right

    1,如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大,设置为auto的外边距会自动为0
    2,如果将三个值都设置为auto,则外边距都是0,宽度最大
    3,如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值可以利用这个原理让元素在父元素中居中

width:200px;
margin:0 auto;

这个0是上下外边距,auto是左右外边距

总的来说
1,七个属性要满足等式。
2,如果不满足就会自动调整:

  • 如果没设置auto则自动调整margin-right填满父元素
  • 如果设置了auto分情况

垂直方向的布局

默认情况下父元素的高度被内容撑开
在这里插入图片描述
垂直方向上内容(包括子元素的边框边距等等)多高父元素就被撑的多高

如果父元素高度被设定,那该是多少就是多少。

子元素是在父元素的内容区中排列的,如果子元素的大小超过了父元素,则子元素会从父元素中溢出,使用 overflow 属性来设置父元素如何处理溢出的子元素
可选值:

  • visible,默认值 子元素会从父元素中溢出,在父元素外部的位置显示
  • hidden 溢出内容将会被裁剪不会显示
  • scroll 生成两个滚动条,通过滚动条来查看完整的内容
  • auto 根据需要生成滚动条(有的时候不需要两个滚动条,就用auto就好)

垂直外边距的折叠

我们给这两个元素分别设置上下外边距的时候,有一个不生效
在这里插入图片描述

相邻的垂直方向外边距会发生重叠现象
兄弟元素:

  • 兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)
  • 特殊情况:
    如果相邻的外边距一正一负,则取两者的和
    如果相邻的外边距都是负值,则取两者中绝对值较大的
  • 兄弟元素之间的外边距的重叠,对于开发是有利的,所以我们不需要进行处理

父子元素:
在这里插入图片描述

在这里插入图片描述

  • 父子元素间相邻外边距,子元素的会传递给父元素(上外边距)
  • 父子外边距的折叠会影响到页面的布局,必须要进行处理
    方法1:设置父元素的padding再改height
    方法2:以后再说更好的

行内元素的盒模型

行内元素的盒模型

  • 行内元素不支持设置宽度和高度

  • 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局
    在这里插入图片描述

  • 行内元素可以设置border,垂直方向的border不会影响页面的布局
    在这里插入图片描述

  • 行内元素可以设置margin,垂直方向的margin不会影响布局在这里插入图片描述
    display 用来设置元素显示的类型
    可选值:

  • inline 将元素设置为行内元素

  • block 将元素设置为块元素

  • inline-block 将元素设置为行内块元素
    行内块,既可以设置宽度和高度又不会独占一行

  • table 将元素设置为一个表格

  • none 元素不在页面中显示
    在这里插入图片描述
    a是行内元素,通过display把他设置成块元素,宽高就能实现了

visibility 用来设置元素的显示状态
可选值:

  • visible 默认值,元素在页面中正常显示
  • hidden 元素在页面中隐藏 不显示,但是依然占据页面的位置
    在这里插入图片描述
    与none的区别,none直接是消失,不会给他留位置
    在这里插入图片描述

默认样式

通常情况,浏览器都会为元素设置一些默认样式
默认样式的存在会影响到页面的布局
通常情况下编写网页时必须要去除浏览器的默认样式(PC端的页面)
在这里插入图片描述
通常是设置元素的内边距和外边距

但是上诉做法很麻烦,记得之前所学的一个通配选择器,可以直接使用这个来设置在这里插入图片描述
但是最完美的方式还不是这个,我们可以在网络上找到重置网页的css文件,直接用link应用即可
在这里插入图片描述
注意引入时要在style前面

轮廓阴影和圆角

轮廓

outline 用来设置元素的轮廓线,用法和border一模一样
轮廓和边框不同的点,就是轮廓不会影响到可见框的大小
可以看到并没有把下面的字给挤下去
在这里插入图片描述
一般不会用这个属性,平常会用在鼠标移动到(hover)的时候有个轮廓
在这里插入图片描述

阴影

box-shadow 用来设置元素的阴影效果,阴影不会影响页面布局 ,默认情况下阴影是在元素的正下方,通过设置偏移量来体现出阴影

  • 第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
  • 第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
  • 第三个值 阴影的模糊半径
  • 第四个值 阴影的颜色
    在这里插入图片描述

圆角

border-radius: 用来设置圆角 圆角设置的圆的半径大小

  • border-top-left-radius 左上角
  • border-top-right-radius 右上角
  • border-bottom-left-radius 左下角
  • border-bottom-right-radius 右下角

border-radius 可以分别指定四个角的圆角,一般都用这个方式

  • 四个值:左上、右上、右下、左下(顺时针顺序)
  • 三个值:左上、右上/左下、右下
  • 两个个值:左上/右下、右上/左下
  • 单位可以是像素也可以设置百分数
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

huamanggg

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值