打开前端的第二步---Css学后总结

CSS是Cascading Style Sheets(级联样式表)

级联: 进行关联

样式表语言:修饰网页外观的语言

Css存在的目的:简化代码量将重复代码提取到Style标签中,进行调用,可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

CSS与HTML的关系:
HTML是网页内容 CSS定义页面的样式

Css存在使用的方式

在这里插入图片描述

行内样式表

是通过标签的style属性来设置
元素的样式,其基本语法格式如下:
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>

<p style = "color:red;font-size:30px;font-family:隶书;">
这个段落应用了样式
<p>

内嵌式

将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义

<style type="text/css">
p { color:red; font-family:"隶书"; font-size:24px;}
</style>

外部样式表

将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中.

<head>
<link href="newstyle.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>

新建一个css文件在内部直接写入指定的格式代码

p { color:red; font-family:"隶书"; font-size:24px;}

选择器

要使用CSS对HTML页面中的标签实现一对一,一对多的控制,这就需要用到CSS选择器。

常用的选择器
标签选择器:通过标签选择器可以选择页面中的所有指定标签
语法:标签名 {}

类选择器:通过标签的class属性值选中一组标签
语法:.class属性值{}

.p1{
				color: blue;
				font-size: 20px;
			}
<p class="p1">静夜思</p>

id 选择器:通过标签的id属性值选中唯一的一个标签
语法: #id属性值 {}

<p id="p3">静夜思</p>
#p3{
				color: green;
			}

选择器组合 通过选择器分组可以同时选中多个选择器对应的标签
语法:选择器1,选择器2,选择器N{}

通配选择器可以用来选中页面中的所有的标签
语法:*{}

选择器的优先级 行内样式表>id选择器>类选择器>标签选择器>通配选择器

文本属性

● color:字体颜色
● font-size:字体大小
● font-family:字体
● text-align:文本对齐
● text-decoration:line-through:定义穿过文本的一条线
● text-decoration:underline:定义文本下的一条线
● text-decoration:none:定义标准的文本
● font-style: italic;斜体文本
● font-weight:字体粗细
● line-height:设置行高
● letter-spacing可以指定字符间距
● text-indent用来设置首行缩进

背景属性

background-color :背景颜色
background-image+背景图片地址
background-repeat 调整背景重复(多数因为背景大,图片小而重复)
background-size : width height背景尺寸
background- position 背景位置

css列表属性

可以放置、改变列表项标志,或者将图像作为列表项标志

  1. line-style-type 改变列表前列表符号
  2. list-style-image:+图片地址
  3. list-style-position 设置列表中列表项标志的位置

css伪类

专门为了改变标签的一种特殊状态,当我们使用伪类可以添加给这些标签一些新的状态.

:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				text-decoration: none;//超链接去除下划线
			}
			a:hover{
				color: #0000FF;//触碰时字体变色
			}
			a:active{
				color: #FFFF00;//点击时字体变色
			}
			.text:focus{
				background-color: #0000FF;
				color: #FF0000; //点击时文本框变色,文本框字体变色
			}
		</style>
	</head><body><a href="">百度</a><input type="text" class="text"></body>
</html>

透明度

定义透明效果的属性是 opacity。

opacity 属性设置标签的不透明级别 值为1。
规定不透明度:从 0.0 (完全透明)到 1.0(完全不透明)。

img:hover{
				opacity: 0.5;// 触碰时图片虚化
			}

块级标签

特点: 独占一行,可以调整宽高,高度默认为0,宽度默认为父级标签的宽度

例如<p>、<h1>、<ul>、<ol>、<hr/>标签

行级标签

特点: 只占自身大小,不可以调整宽高

例如<font>、<b>、<i>、<a>等。

行级块标签

特点:不是独占一行,可以改变宽高

例如 <input/> <img>

注意: 一般情况下使用块级标签包含行级标签,不使用行级标签包含块标签。

a标签可以包含任何标签,除去a本身;

p标签不可以包含任何的块标签 。

Display

通过display属性可以修改标签的类型

可选值
block :设置标签为块标签
inline :设置标签为行级标签
inline-block :设置标签为行级块标签
none :隐藏标签(标签将在页面中完全消失)

Div和Span

div: 是块级标签 h1,p也是块,有默认的样式 或其他缺陷, 可以包含任何标签,没有任何的默认样式, 主要用于网页布局

span: 是行级标签 b,i,u也是行级标签,但是有默认样式 没有任何的附加样式, 作用是用来选中网页上的文本,并为文本添加css样式

盒子模型

形象的把每个标签的4个部分这一构造称为"盒子模型"

每个标签由4个部分组成:
1.内容区: 放内容的区域 `
2.内边距: 内容区到边框的距离
3.边框: 墙
4.外边距: 过道
width,height只是设置内容区大小,不是整个标签大小,如果标签没有设置内
边距大小和边框大小,那么盒子大小=内容区大小

标签的大小 = 内容区大小+内边距大小+边框大小

内边距: 内边距指的就是标签内容区与边框以内的空间

/* padding-top 设置内边距 */
				padding-top: 10px;
				padding-left: 10px;
				padding-right: 10px;
				padding-bottom: 10px; 
padding: 20px;  为上下左右添加内边距
		
		 padding: 10px 5px; padding:上下  左右 
		 
		    padding: 5px 10px 15px 20px;  padding:上 右 下 左

边框 : 标签的最外层

  border-top-color: #FF0000; //边框上色
			border-top-width: 1px;
			border-top-style: solid; //边框实体化
			
			 border-top: 1px solid red ; 
			
			 border: 1px solid red ;  设置四个方向的边框
			 
			 border-top-left-radius: 100px; 
			 
			 border-radius: 100px; /* 设置圆角边框*/

外边距 : 外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置外边距。用法和padding类似,同样也提供了四个方向的 。

/* margin-top: 50px;
			margin-left: 50px;
			margin-bottom: 50px; */
		
			/* margin: 10px; */
			
			/* margin-left: auto;左右设置外边距的值为auto, 外边距会自动为最大值 
			margin-right: auto;*/
			
			/*margin-top:100px; 上下外边距 只能给具体的数值 
			margin-bottom: 100px;*/
			
			/* margin: auto;  上下为auto时,值为0*/
			margin: 10px auto;

清除浏览器默认样式

在css属性中添加 : outline: none;

浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的标签都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。
*{
margin: 0;
padding: 0;
}

文档流

指标签在网页中排放的顺序,从左至右,从上至下,一个标签接着另一个块级标签各占一行,行级标签一个接着一个,直到一行满为止才开始下一行

浮动

所谓浮动指的是使标签脱离原来的文档流,在父标签中浮动起来

float:

none :不浮动

left :向左浮动

right :向右浮动

块级标签和行级标签都可以浮动,当一个行级标签浮动以后将会自动变为一 个块级标签。当一个块级标签浮动以后,宽度会默认是内容的宽度,所以当漂浮一个块级标签时我们 都会为其指定一个宽度

​ 当一个标签浮动以后,其下方的标签会上移。

​ 浮动会使标签完全脱离文档流,也就是不再在文档中在占用位置标签浮
动以后即完全脱离文档流,这时不会再影响父标签的高度。也就是浮动
标签不会撑开父标签。

清除浮动

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不
发生变化。

可选值:
left : 忽略左侧浮动
right :忽略右侧浮动
both :忽略全部浮动

定位

允许我们要定位的标签,相对于其原来的位置,另一个标签,或父级标签或浏览器边框分为: 1. 相对定位,2. 固定定位, 3. 绝对定位

相对定位

position: relative(开启相对定位时,如果不给予偏离量标签不会发生任何变化)

left: 50px; //向左偏移50像素单位

相对定位的特点
当标签的position属性设置为relative时,则开启了标签的相对定位
1.当开启了标签的相对定位以后,而不设置偏移量时,标签不会发生任何变化
2.相对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流

绝对定位

绝对定位是不占空间的,运用了绝对定位的标签会脱离原来的文档流,浮动起来,因此视觉上会其他的标签重叠。
可以通过position: absolute; 开启绝对定位
left right top bottom四个属性来设置标签的偏移量

绝对定位的特点
1.开启绝对定位,会使标签脱离文档流
2.开启绝对定位以后,如果不设置偏移量,则标签的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位(一般情况,开启了子标签的绝对定位都会同时开启父标签的相对定位)
如果所有的祖先标签都没有开启定位,则会相对于浏览器窗口进行定位
4.绝对定位会使标签提升一个层级
5.绝对定位会改变标签的性质,行级标签变成块标签

固定定位

将你指定的标签进行固定定位 position: fixed;

  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值