笔记

最新推荐文章于 2021-04-02 11:13:49 发布

Zhou_MengDie

最新推荐文章于 2021-04-02 11:13:49 发布

阅读量147

点赞数

本文链接：https://blog.csdn.net/Zhou_MengDie/article/details/103533739

版权

尚硅谷前端HTML5视频_HTML & CSS 核心基础教程（103集实战教学，从入门到精通）

P35 伪类的顺序

涉及到a的伪类


link	链接
visited	已访问过
hover	鼠标移入
active	正在点击

顺序的快捷记录方法：
LoVe HAte

a:link{
	color:yellow
	}

P36 文本标签

和


表示语气上的强调，em在浏览器中默认使用斜体显示

表示强调的内容，比em更强烈，默认使用粗体显示
和
对于不需要着重的内容而是单纯的加粗或者是斜体，就可以使用b和i标签

比父元素的文字要小一些，用来表示一些细则一类的内容。比如：合同中小字，网站的版权声明都可以放到small
<cite>
所有加书名号的内容都可以使用cite标签，表示参考的内容
<q>
表示一个短的引用，浏览器会默认添加引号
和
sup来设置一个上标，sub来设置一个下标
<del>和<ins>
del会自动添加删除线，ins会自动添加下划线
<pre>
预格式标签，会将代码中的格式保存，不会忽略多个空格

P37 无序列表和有序列表

无序列表 [ il ]
通过type可以修改无序列表的项目符号
注意:一般不使用默认的项目符号，采用为li设置背景图片的方式来设置
有序列表 [ ol ]
有序列表和无序列表类似，他使用ol来代替il
可以指定序号的类型
可选值：1，默认值
a / A，采用大小写字母作为序号
i / I 采用大小写的罗马数字作为序号
定义列表 [ dl ]
用来对一些词汇或内容进行定义
dl中有两个子标签
dt：被定义的内容
dd：对定义内容的描述

列表之间可以互相嵌套,可以在无序列表中放个有序列表
也可以在有序列表中放一个无序列表

P39 长度单位

长度单位：像素px

像素是我们在网页中使用最多的一个单位，
一个像素就相当于
百分比%
-也可以将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值。

.box1{
	width:50%;
	height:50%;
	background-color:black;
}

em
和百分比类似，它是相对于当前元素的字体大小来计算的
1em=1font-size
使用em时，当字体大小发生改变时，em也会随之改变
当设置字体相关样式时，经常会使用em

.box1{
	font-size：50px；
	width：1em；
	/*widht=α em X β px
		width=50px
	*/
}

P42 RGB值

颜色单位：

在CSS中可以直接使用颜色的单词来表示不同的颜色。列：红色：red；蓝色：blue；绿色：green。
也可也使用RGB值来表示不同的颜色。
例：rgb(红色的浓度，绿色的浓度，蓝色的浓度)；
也可以用百分数来设置，需要一个0%-100%之间的数字
【P40的内容】
也可以使用十六进制数来代替，使用三组两位的十六进制数来表示一个颜色
红色：#ff0000

P41 字体

color是文字的颜色
font-family可以指定文字的字体
当采用某种字体时，如果浏览器支持使用该字体，如果不支持则用默认字体。
该样式可以使用多个字体

font-family:arial,微软雅黑;

可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开

font:italic small-caps bold 60px "微软雅黑";

如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式

P45 行高

使用line-height来设置行高

可以用px设置
也可也用百分数来设置
可以直接传一个数值，则行高会设置字体大小相应的倍数
行间距 = 行高 - 字体大小

.p1{
	font-size:20px;
	line-height:40px;
	/*
	line-height:200%
	line-height:1
	*/
}

对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以使单行文本在父元素的垂直居中

.box{
	width:200px;
	height:200px;
	background-color:#bfa
	line-height:200px;
}

在font中也可以指定行高,在字体后可以添加行高,来指定行高,该值是可选的,如果不指定则会使用默认值

P46 文本样式

text-transform可以来设置英文文本的大小写


none	默认值，该怎么显示就怎么显示，不做任何处理
capitalize	单词的首字母大写，通过空格来识别单词
uppercase	所有的字母都大写
lowercase	所有的字母都小写

.p1{
	text-transform:none;
}
<p class="p1">
"We should start back,"Graed urged as the woods began to.
</p>

text-decoration可以用来设置文本的修饰


none	默认值，不添加任何修饰，正常显示
underline	为文本添加下划线
overline	为文本添加上划线
line-through	为文本添加删除线

_{超链接会默认添加下划线，如果需要去除下划线则需要设置为none}

letter-spacing可以指定字符间距
word-spacing可以设置单词之间的距离
_{实际上就是设置词与词之间空格的大小}


left	默认值，文本靠左对齐
right	文本靠右对齐
center	文本居中对齐
justify	两端对齐

_{justify:通过调整文本之间空格的大小来打到一个两端对齐的目的}

text-indent 设置首行缩进，当给它指定一个正值时，会自动向右侧缩进指定的像素。如果为它指定一个负值，则会向左移动指定的像素，通过这种方式可以将一些不想显示的文字隐藏起来。

P46 盒子模型概述

内容区

使用width来设置内容区的宽度
使用height来设置内容区的高度
_{注：width和height只是设置的盒子内容区（上图“element元素”）的大小，而不是盒子整个的大小}
盒子可见框的大小由内容区，内边距和边框共同决定

边框

.box1{
	wigth:100px;
	height:100px;
	background-color:#bfa;
}

要为一个元素设置边框必须指定三个样式

1.border-width：边框的宽度

使用border-width可以分别制定四个边框的宽度

如果在border-width指定了四个值，则四个值分别会设置给上右下左，按照顺时针方向设置

border-width:10px 20px 30px 40px;

如果指定三个值，会设置给上，左右，下
如果指定两个值，会设置给上下，左右

2.border-color：边框的颜色
同理，color也提供了四个方向的样式，可以分别指定颜色

3.border-style：边框的样式
同理，style也提供了四个方向的样式，可以分别指定颜色

4.border：简写样式

边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色。且没有任何的顺序要求。
border一指定就是同时指定四个边，不能分别指定

border:red solid 10px;
border-right:none;

内边距：padding

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距。盒子的大小由内容区、内边距和边框共同决定。
盒子可见框的宽度：
=border-left-width + padding-left + width + padding-right + border-right-width
左边框+内容区+左内边距+右内边距+右边框

padding-可以同时指定四个边框的样式，规则和border-width一致

外边距：margin

外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置。
margin-top
margin-left
margin-right
margin-bottom

由于页面中的元素都是靠左靠上摆放的，会导致盒子自身的位置发生改变。如果设置的是右，下边距会改变别的盒子的位置。
外边距也可以指定一个负值，会向反方向移动
margin还可以设置为auto，一般只设置给水平方向。只指定给左右外边距的话会设置为最大值。同时给左右设置则会居中。
在网页中垂直方向的相邻外边距会发生外边距的重叠，所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和

浏览器的默认样式
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，一般情况下我们不需要它的默认样式。
所以我们要给浏览器默认的margin和padding给去掉

*{
	margin:0;
	padding:0;
}

_{*选择所有元素}

内联元素的盒子模型
内联元素不能设置width和height，可以设置垂直方向内边距，但是不会影响页面的布局。水平方向的外边距不会重叠，而是求和。不支持垂直外边距。

P55 display和visibility

display

内联元素不能设置宽高。
将一个内敛元素变成块元素，通过display样式可以修改元素的类型。

inline：可以将一个元素作为内敛元素显示
block：可以将一个元素设置块元素显示
inline-block：将一个元素转换为行内块元素（可以是一个元素既有行内元素的特点又有块元素的特点。既可以设置宽高，又不会独占一行。）
none：不显示元素，并且元素不会在页面中继续占有位置。

a{
	display:block;
	
	width:200px;
	height:200px;
}

visibility
visible 默认值，元素默认会在页面显示
hidden 元素会隐藏不显示（隐藏的元素虽然不会显示，但是位置会依然保持）

P56 overflow _滚动条

子元素默认是在父元素的内容区中，理论上讲子元素的最大等于父元素内容区大小。如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素意外的位置显示。超出的部分我们称为溢出的内容。
通过overflow可以设置父元素如何处理溢出的内容：

visible：默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示。
hidden：溢出的内容，会被修剪，不会显示出来。
scroll：为父元素添加滚动条，通过滚动条来查看完整内容。_{（该属性不论内容是否溢出都会添加水平和垂直的滚动条。）}
auto：会根据需求自动添加滚动条。

<head>
	<meta charset="UTF-8">
	<style type="text/css">
		
		.box{
		width:200px;
		height:200px;
		blackground-color:#bfa;
		overflow:auto;
		}
		
		.box2{
		width:100px;
		height:500px;
		blackground-color:red;
		}
</head>

<body>
<div class="box1">
	<div class="box2"></div>
	</div>
</body>

Zhou_MengDie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记

尚硅谷前端HTML5视频_HTML & CSS 核心基础教程（103集实战教学，从入门到精通）P35 伪类的顺序涉及到a的伪类link链接visited已访问过hover鼠标移入active正在点击顺序的快捷记录方法：LoVe HAtea:link{ color:yellow }P36 文本标签&l...
复制链接

扫一扫