web前端基础知识(二)#CSS基础

最新推荐文章于 2022-08-09 00:22:35 发布

TtuoSYy7

最新推荐文章于 2022-08-09 00:22:35 发布

阅读量477

点赞数 1

分类专栏： Web前端开发文章标签： css

本文链接：https://blog.csdn.net/weixin_46273248/article/details/105299708

版权

Web前端开发专栏收录该内容

4 篇文章 1 订阅

订阅专栏

CSS （Cascading Style Sheet）层叠样式表，用于设计页面风格。
解决了传统HTML网页维护困难，标记不足，定位困难的缺点。使得网页的字体更美观，更方便排版，轻松控制页面布局，实现网站中的多个网页风格统一

一、CSS基础

1.1 CSS语法

CSS是一个由包含一个或多个规则的文本文件
规则：选择器 {属性：属性值}
注释方式：/* 注释信息*/

P{
 font-size:12px;	 /*字号*/
 color:blue;     	/*文字颜色*/
 font-weight:bold;  /*加粗*/
}

1.2 CSS的定义与引用

CSS有三种样式类型：

1. 行内样式

指直接在html文件body部分当中的标签内定义。
style的多个属性之间用分号隔开；
行内样式表只影响单个标签

基本语法:
<标签 style=“属性 : 属性值 ; 属性 : 属性值 ;”>

<p style= "color:red; font-size:28px;">
	行内样式表
</p>

2. 内嵌样式

指在html文件head部分定义
影响单个文件

基本语法：

<head>
	<style type="text/css">
 	p{
 		color:red;
	 }
	</style>
</head>

3. 外部链接样式

将样式属性写在单独的 .css文件中
页面结构HTML代码与样式CSS代码完全分离，维护方便
可以在同一个HTML文件内部引用多个外部样式表

基本语法：

<head>
	<link type="text/css" rel="stylesheet" href="外部样式表的文件相对路径以及文件名称（带后缀.css）" />
</head>

CSS样式表的优先级：

多重样式可以层叠，覆盖
样式的优先级按照 就近原则
行内样式 > 内嵌样式 > 外部链接样式 > 浏览器默认样式

例如：

/*外部样式表*/
h1{
 color:red;
 text-align:left
 font-size:12px;
}
/*内嵌样式*/
h1{
 text-align:right;
 font-size:20px;
}

按照样式表的优先级，内嵌样式优先于外部样式，所以两个样式表共有的属性将采取内嵌样式里的属性值，而内嵌样式表中没有的属性将采用外部样式表中的属性及属性值。

最终 h1 得到的样式为：

color:red;
text-align:right;
font-size:20px;

1.3 CSS选择器

CSS选择器有四种类型：

1 .标签选择器

对HTML的标签重新定义
基本语法：
p,h1{font-size:30px;color:red;}

2 .类选择器

以 <标签 class=" "的形式给标签定义一个名字，. class值{}，分别定义不同名字的标签的样式

基本语法：

<style type="text/css">
  p   {font-size:12px}
 .one {font-size:18px}
 .two {font-size:24px}
</style>

<body>
 <p >类别选择器</p>		/*样式 font-size:12px*/
 <p class="one">类</p>	/*样式 font-size:18px*/
 <p class="one">别</p>	/*样式 font-size:18px*/
 <p class="two">选</p>	/*样式 font-size:24px*/
 <p class="two">择</p>	/*样式 font-size:24px*/
</body>

3. ID选择器

先以<标签 id=" "的形式给id赋一个名字，# id值{}，分别定义不同名字的标签的样式

基本语法：

<style type="text/css">
 #one{font-size:12px;}
 #two{font-size:24px;}
</style>

<body>
 <p id="one"> I </p>	/*样式 font-size:12px*/
 <p id="two"> D </p>	/*样式 font-size:24px*/
</body>

ID选择器与类选择器的区别：
（1）类选择器可以给任意多的标记定义样式，但ID选择器在页面中标签中只能使用一次；
（2）ID选择器样式比类选择器样式优先级高。ID选择器局限性大，只能单独定义某个元素的样式（特殊情况下使用）

二、CSS样式

2.1 文本样式

文字大小单位

px 像素

em 字符（1em等于一个字符）

% 百分比

注意：

在HTML继承关系中，子元素中的文本会默认继承父元素中的文本大小，而百分比的运用就是在父元素文本大小的基础上运算得出结果。例如：

在这里插入图片描述
文本属性

字体 font

2.2 背景与超链接

背景属性
空元素需要先定义元素的高度和宽度

链接的四种状态

a:link -------初始状态下，未被访问的链接
a:visited —用户已访问的链接
a:hover — 鼠标悬停在链接上时
a:active — 链接被点击的时刻

注意：
a:hover必须位于a:link和a:visited之后
a:active必须位于a:hover之后

四种状态对应效果：
在这里插入图片描述

2.3 列表与表格

列表样式属性：
无序列表和有序列表共用样式
list-style （所有用于列表的属性设置于一个声明中）

list-style-image : url(“image/logo.gif”);
（为列表项标志设置图像）
list-style-position : inside | outside;
（标志的位置）
list-style-type : none | disc | …;
（标志的类型）

常见标志类型：
在这里插入图片描述
表格大小：

table{
	width:500px;  /* 宽 */
	height:200px; /* 高 */
}

表格边框：

table,td,th{
	border: 1px solid #eee;
}

table{
	border-collapse:collapse; /*取消外边框*/
}

奇偶选择器：
即隔行样式 odd为基数，even为偶数

tr:nth-child(odd){
	background-color:black; /*奇数行背景色为黑色*/
}

三、CSS布局与定位

在这里插入图片描述
常见排版：

3.1 盒子模型

W3C组织建议所有网页上的对象都放在一个盒中，通过创建定义来控制这个盒的属性，这些对象包括段落、列表、标题、图片以及层。

盒子模型主要定义为四个区域：
margin （边界，外边距）
border （边框）
padding （填充，内边距）
content （内容）
在这里插入图片描述
盒子的宽度和高度：

一个盒子的实际宽度、高度为：
content + padding + border + margin

基本语法：

#box{
	width:100px;
	height:100px;
	border:1px solid;
	padding:20px;
	margin:10px;
}

<body>
	<div id="box">
		内容
	</div>
</body>

overflow属性
当内容溢出盒子时，overflow属性取值

hidden ----超出部分不可见
scroll ------显示滚动条
auto -------如果有超出部分，显示滚动跳

border属性

margin属性
基本语法：
margin: top长度 right长度 bottom长度 left长度
即从top开始顺时针方向
margin缩写
margin: 1px; 等同于 margin: 1px 1px 1px 1px;
margin: 1px 2px; 等同于 margin: 1px 2px 1px 2px;
margin: 1px 2px 3px; 等同于 margin: 1px 2px 3px 2px;

原理：
在这里插入图片描述
margin的合并：
垂直方向合并，水平方向不合并

两个盒子之间的距离，由两个盒子的外边距（margin）中的最长一个外边距决定。

即：
在这里插入图片描述

3.2 CSS定位机制

1. 文档流定位
HTML文件默认为文档流定位
block元素：
独占一行
元素的height width margin padding 都可设置

inline元素：
不单独占一行
width height不可设置
width就是它包含的文字或图片的宽度，不可改变
元素之间有一个间距问题

inline-block元素：
同时具备inline和block元素的特点
不单独占用一行
元素的height width margin padding 都可设置

元素类型转换 display属性：
display:none 元素不被显示
display:block 显示为block元素
display:inline 显示为inline元素
display:inline-block 显示为inline-block元素

2. 浮动定位

float属性：

left-----左浮动
right—右浮动
none–不浮动

float属性的特点
在这里插入图片描述

clear属性
both 清除左右两边的浮动
left和right 清除左右其中一个方向的浮动
none 默认值，只在需要移除已指定的清楚值时用到

3. 层定位
在这里插入图片描述

position属性（相对于谁定位）

static：默认值
（没有定位，元素出现在正常的流中）

fixed：固定定位
（相对于浏览器窗口定位）

relative-：相对定位
（相对于其直接父元素进行定位）
脱离正常的文档流，但其在文档流中的原位置依然存在
案例：

#box1{
	width:170px;
	height:190px;
	position:relative;
	top:20px;
	left:20px;
}

在这里插入图片描述

absolute：绝对定位
（相对于static定位以外的第一个父元素进行定位）
脱离正常文本流，但其在正常流的原位置不再存在
案例：

#box1{
	position:absolute;
	top:20px;
	left:20px;
}

在这里插入图片描述
相对定位 VS 绝对定位

TtuoSYy7

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
web前端基础知识(二)#CSS基础

CSS （Cascading Style Sheet）层叠样式表，用于设计页面风格。解决了传统HTML网页维护困难，标记不足，定位困难的缺点。使得网页的字体更美观，更方便排版，轻松控制页面布局，实现网站中的多个网页风格统一目录一、CSS基础1.1 CSS语法1.2 CSS的定义与引用1.3 CSS选择器一、CSS基础1.1 CSS语法CSS是一个由包含一个或多个规则的文本文件规则：选...
复制链接

扫一扫

专栏目录