CSS基础、盒子模型、选择器与权重

最新推荐文章于 2024-05-09 11:32:07 发布

不想秃头的林染染

最新推荐文章于 2024-05-09 11:32:07 发布

阅读量240

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/m0_63163990/article/details/124193011

版权

CSS基础、选择器与权重、盒子模型

一、CSS的字体属性

CSS Fonts（字体）属性用于定义字体系列，例如大小、粗细、和文字样式（斜体之类）。
1.字体
CSS使用font-family属性定义文本的字体系列。

p{font-family:"微软雅黑";}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在各个浏览器都能显示
常见字体：body{font-family:‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’;}

2.字体大小
CSS使用font-size属性定义字体大小。

p{font-size:20px;}

px(像素）大小是我们常用单位

3.字体粗细
CSS使用font-weight属性设置文本字体的粗细。

p{font-weight:bold;}

在这里插入图片描述

实际开发中，更喜欢用数字表示粗细。

4.字体样式
CSS使用font-style属性设置文本风格。

p{font-style:normal;}

在这里插入图片描述

5.综合实例

p.a {
  font: 20px Arial, sans-serif;
}
p.b {
  font: italic bold 12px/30px Georgia, serif;
}

在这里插入图片描述

二、CSS的文本属性

CSS Text(文本）属性可定义文本的外观，如颜色、对其文本、装饰文本、文本缩进、行间距等。

1.文本颜色
color属性用于定义文本颜色

body {
  color: blue;
}

颜色名 - 比如 “red” 十六进制值
比如 “#ff0000” RGB 值
比如 “rgb(255,0,0)”

2.对齐文本
text-ailgn属性用于设置元素内文本内容的水平对齐。

h1 {
  text-align: center;
}

在这里插入图片描述
3.装饰文本
text-decoration属性规定添加到文本的修饰，例如下划线，删除线，上划线等。

h1 {
  text-decoration: overline;
}
h2 {
  text-decoration: line-through;
}
h3 {
  text-decoration: underline;
}

在这里插入图片描述
4.文本缩进
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
em是一个相对单位，是当前元素一个文字的大小，如果没有当前元素设定的大小，则按照父元素的一个文字大小。

p {
  text-indent: 2em;
}

例如：
在这里插入图片描述

5.行间距
line-height属性用于设置行间距离，可以控制文字行与行之间距离。

p{
  line-height:40px;
}

在这里插入图片描述

三、CSS的三种样式表

按照CSS样式书写的位置（或引入的方式）不同，CSS样式可以分为三大类：

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

在这里插入图片描述
1. 内部样式表

内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个< style > 标签中。

<style>
	div{
		color:red;
		font-size:12px;
		}
</style>

效果如下：
在这里插入图片描述

< style >标签理论上可以放到HTML文档的任何地方，但一般都会放在文档的< head >标签中
通过这种方式，可是方便控制当前整个页面中的元素样式设置。
代码结构清晰，但是并没有实现结构与样式完全分离。
使用内部样式表设定CSS，通常也被称为嵌入式引入，这种方式是我们联系时常用的方式。

2.行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式 ，适合于修改简单样式。

<div style="color:pink; font-size:40px;">青春不常在</div>

效果如下：
在这里插入图片描述

style 其实就是标签的属性
在双引号中间，写法要符合CSS规范
可以控制当前的标签设置样式
由于书写繁琐，不推荐大量使用
该方法通常被称为行内式引入。

3.外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。通常又称为外联式引入。

引入步骤：

新建一个后缀名为.css的样式文件，把所有CSS代码放入此文件中。
在HTML页面中，使用< link >标签引入这个文件。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/demo/css/mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

效果如下：
在这里插入图片描述

四、CSS基础选择器及权重

选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。

1.标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签制定统一的CSS样式。
在这里插入图片描述

把某一类标签全部选出来，快速为同类型的标签统一设置样式不能设置差异化样式。

2.类选择器
差异化选择不同的标签，单独选一个或几个标签，可以用类选择器。类选择器在HTML中用class属性表示，在CSS中，用"."表示。
在这里插入图片描述
3.id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素用id属性来设置id选择器，CSS中用“#”来定义。

在这里插入图片描述
4.通配符选择器
在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素。

5.选择器权重

权重由四组数字组成，但是不会进位
值从左到右，左面最大，一级大于一级，级别之间不可超越。

在这里插入图片描述

五、CSS样式的三大特性

CSS有三大特性：层叠性、继承性、优先级

1.层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式，主要解决样式冲突。
在这里插入图片描述

层叠性原则：

样式冲突，遵循就近原则，那个样式离得近，就执行那个
样式不冲突，不会层叠

2.继承性
子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
在这里插入图片描述

恰当地使用继承可以简化代码
子元素可以继承父元素的样式（text-，font-等）

3.优先级
当同一个元素指定多个选择器，就会有优先级的产生

选择器相同，执行层叠性
选择器不同，根据选择器权重（见选择器权重）执行
类选择器永远大于元素选择器，id选择器永远大于类选择器
继承的权重是0。

六、行内元素、块元素特点及转换

HTML元素一般分为块元素和行内元素两种类型

1.块元素

常见块元素有< h1 > ~ < h6 >、< div >、< ul >、< ol >、< li >等，其中< div >标签是最典型的块元素。
块元素的特点：

自己独占一行
高度，宽度，内外边距都可以控制
宽度默认为容器的100%
是一个容器及盒子，里面可以放行内或块级元素
文字类元素（例如< p >、< h1 > ~ < h6 >)内不能使用块级元素

2.行内元素
常见行内元素有< a >、< strong >、< span >、< ins >、< b >、< em >、< i >、< del >、< s >、< u >等，其中< span >标签是最典型的行内元素，有的地方也将行内元素称为内联元素。
行内元素的特点：

相邻行内元素在一行上，一行可以显示多个
高、宽不能设置
默认宽度为本身宽度
只能容乃文本或其他行内元素
链接里不能再放链接,特殊情况下< a >里面可以放块级元素

3.行内块元素
在行内元素中有几个特殊的标签< img >、< input >、< td >,它们同时具有块元素和行内元素的特点，被称为行内块元素。
行内块元素特点：

和相邻行内元素（行内块）在一行上，但会有空白缝隙，一行可以显示多个。
默认宽度为本身宽度
高度、行高、内外边距可以控制

4.元素模式转换
一个模式的元素需要另外一种模式的特性

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display:inline-block;

七、盒子模型（Box Model）

页面布局要学习三大核心，盒子模型，浮动和定位。
1.盒子模型的组成
所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括边框、外边距、内边距和实际内容。

border边框
content内容
padding内边距
margin外边距

在这里插入图片描述

2.边框（border）
border可以设置元素的边框，边框由三部分组成，边框宽度（粗细）、边框样式、边框颜色

在这里插入图片描述

边框属性允许指定一个元素边框的样式和颜色。
边框会影响盒子实际大小。解决办法：用width/height减去多出来的边框大小

3.内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离。

在这里插入图片描述
padding属性可以有一到四个值

padding影响了盒子实际大小，会增大盒子实际大小。解决办法：用width/height减去多出来的内边距大小

4.外边距（margin）

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

在这里插入图片描述
清除内外边距

5.实例

<html>
	<head>
		<title>css 盒子模型</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<style type="text/css">
			div{
				width:300px;
				height:300px;
                padding-top:50px;
			}
			#h1{
				width:650px;
			}
			#h2{
				width:650px;
			}
			#d1{
				border:dashed 5px red;
				float:left;
				margin-left: 10px auto;
                text-align:center;
			}
			#d2{
				border:solid 5px yellowgreen;
				float:left;
                margin-bottom: 10px;
			}
			#d3{
				border:dotted 5px orange;
				float:left;
				margin-right:10px;
			}
			#d4{
				border:solid 5px magenta;
				float:left;
			}
			#h1,#h2{
				width:650px;
				margin-top:20px;
				margin:auto;
			}			
		</style>
	</head>
	<body>
		<h3 align="center">css 盒子</h3>
		<hr size="30" color="aquamarine"/>
		<div id="h1">
			<div id="d1">
			  第一部分
			</div >
			<div id="d2">
				第二部分
			</div>
		</div>
		<div id="h2">
			<div id="d3">
				第三部分
			</div>
			<div id="d4">
				第四部分
			</div>
		</div>
	</body>
</html>