day02-CSS层叠样式表入门

最新推荐文章于 2024-08-13 18:09:11 发布

Hannya。

最新推荐文章于 2024-08-13 18:09:11 发布

阅读量133

点赞数 1

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/asd747571569/article/details/118531941

版权

笔记专栏收录该内容

50 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS的三种引入方式：行内样式、内部样式表和外部样式表，以及各种选择器的使用，包括标签选择器、ID选择器、类选择器和属性选择器。此外，还讲解了伪类和伪元素的概念，并列举了常见的CSS样式，如文本样式、字体样式和背景设置。最后，概述了盒子模型和定位技术在网页布局中的应用。

摘要由CSDN通过智能技术生成

学习目标

掌握CSS三种引入方式
掌握CSS选择器
掌握CSS伪类
掌握CSS常用样式
掌握盒子模型
掌握定位

什么是CSS？

CSS叫层叠样式表，它的主要作用是定义HTML如何进行展示。

CSS的三种引入方式

1.行内样式表引入CSS

语法规则:
style=“key1: value1; key2: value2; …”

<div style="border: solid 1px beige;">6666</div>

1.内部样式表引入CSS

在页面的head标签内部添加一个style的标签，然后在style标签里面添加样式，例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{border: 2px solid blue;}
		</style>
	</head>
	<body>
		<div>999</div>
	</body>
</html>

3.外部样式表引入CSS

单独编写一个css文件，在CSS文件里面编写样式，然后在html页面中用link标签引入该文件即可。例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/test.css" />
	</head>
	<body>
		<div>996</div>
	</body>
</html>

div{
	border: 2.5px solid cornflowerblue;
}

CSS选择器

标签选择器

标签名{

}

div{border: 2px solid blue;}

id选择器

#id{

}

<div id="a">aaa</div>

#a{
	border: solid 1px cadetblue;
  }

类选择器

.类名{

}

<div class="b">aaa</div>

.b{
  border: solid 1px cadetblue;
  }

属性选择器

标签名[属性名=“值”]{

}

个人信息<input type="password" />

input[type="password"]{
	height: 60px;
			          }

后代选择器

选择器1 选择器2…{

}

<div class="c">aaa
		<a href="#" class="d">百度</a>
</div>

.c .d{
	border: solid 1px cadetblue;
	  }

父子选择器

选择器1>选择器2{

}

组合选择器

选择器1,选择器2,…{

}

相邻选择器

选择器1+选择器2{

}

复合选择器

选器1选器2选器3{

}

CSS伪类与伪元素

伪类

用来添加一些选择器的特殊效果。

:link：未访问过的
:visited：访问过的
:hover：鼠标经过
:focus：获得焦点
:active：活动链接

伪元素

::before：在什么之前
::after：在什么之后

css常用的样式

文本样式

text-align：水平对齐
word-spacing：字间距
letter-spacing：字母间距
line-height：行高
color：字体颜色
background-color：背景颜色
text-decoration：文本装饰

字体样式

font-family：字体
font-size：字体大小
font-weight：字体粗细
font：一次性全部设置字体、大小、粗细等

背景色和背景图

background-color：背景色
background-image：背景图片
background-repeat：是否重复显示
background-size：背景大小

盒子模型

把标签元素看成是一个盒子/框子，那么盒子将具有内边距和外边距，高度和宽度。
在这里插入图片描述

margin：表示外边距
padding：表示内边距
height：表示高度
width：表示宽度
border：表示边框
border-radius：用来设边框四角的弧度
border-top：上边框
border-bottom：下边框
border-left：左边框
border-right：右边框