HTML_CSS-CSDN博客

本文链接：https://blog.csdn.net/qq_63917870/article/details/133465247

1、CSS概述

CSS是Cascading Style Sheets缩写（级联样式表）
CSS是一种样式表语言，用于为HTML文档控制 外观样式，定义布局 。例如， CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面
CSS可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分
CSS实现内容与样式的分离，便于团队开发，可以样式复用，便于网站的后期维护，页面的精确控制，让页面更精美

2、CSS与HTML的关系

HTML是网页内容
CSS定义网页的样式

3、CSS基本用法

3.1、CSS语法

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>

其中：

选择器：要修饰的对象
属性名：修饰对象的哪一个属性
属性值：何种样式

CSS的用法主要有三种方式：行内样式表、内嵌样式表、外部样式表

3.2、行内样式表

行内样式表 , 又有人称内联样式，是通过标签的 style 属性来设置元素的样式，其基本语法格式如下： <标签名 style=" 属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;"> 内容 </ 标签名 >

3.2、内嵌样式表

内嵌式是将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义

3.3、外部样式表

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href=".css样式文件路径" rel="stylesheet" type=" text /css"/>
		<style>
			&@import url("css样式文件路径");
			&@import "css样式文件路径";
		</style>
	</head>
	<body>
	</body>
</html>

4、CSS选择器

CSS中常用的选择器主要有4 种：标签选择器、类选择器、id选择器、通配符选择器

4.1、标签选择器

也称作元素选择器，使用HTML标签作为选择器的名称，以标签名作为样式应用的依据

4.2、类选择器

通过标签内部定义的class = “类名”，“.类名”属性值来选择调用样式的依据
当调用多个类选择器时，中间以空格分隔，且类选择器不能以数字开头

4.3、ID选择器

使用自定义名称，以 # 作为前缀，通过标签的id属性值选中唯一的一个标签

4.4、通配符选择器

使用“*”作为前缀，可以用来选中页面中的所有的标签

以上选择器的优先级为：id选择器 > 类选择器 > 标签选择器 > 通配选择器

5、CSS中的常用属性

5.1、字体属性

属性	作用	附加
fong-size	字体大小	通常以px为单位
font-weight	字体粗细	nomal：默认 bold：粗体
font-family	字体样式	操作系统中所带的字体样式，楷体、宋体、黑体等
font-style	字体风格	nomal：默认 italic：斜体

5.2、文本属性

属性	作用	附加
color	字体颜色
text-align	文本水平对齐	left、center、right
text-indent	设置首行缩进
line-height	设置行高	行之间的高度
vertical-align	垂直方式对齐	top、middle、bottom可以用于图片和文字的对齐方式
letter-spacing	指定字符间距
text-decoration	文本修饰	line-through：穿过文本的一条线 underline：定义文本下的一条线 none ：定义标准的文本

5.3、背景属性

属性	作用	附加
background-color	背景颜色	transparent 透明
background-image	背景图片
background-repeat	背景重复	repeat(默认)，repeat-x，repeat-y,no-repeat
background-size	背景尺寸
background- position	背景位置	top、bottom、left、right、cente
background-attachment	背景是否滚动	scroll(默认)、fixed固定不动

5.4、列表属性

属性	作用	说明
list-style-image	将图象设置为列表项标志	none、disc、circle、square、decimal
list-style-position	设置列表中列表项标志的位置	outside(默认)、inside
list-style-type	设置列表项标志的类型
list-style	简写属性

6、CSS伪类

CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类

6.1、伪类语法

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

附加：透明属性opacity、display属性、div、span标签

opacity属性

opacity

属性设置标签的不透明级别值为 1 。规定不透明度：从 0.0 （完全透明）到 1.0 （完全不透明）。

display属性：

通过display属性设置元素是否显示，以及是否独占一行

block	设置标签为块标签
inline	设置标签为行级标签
inline-block	设置标签为行级块标签
none	隐藏标签（标签将在页面中完全消失）

div标签

div是块级标签，可以放置任何标签。
div没有任何附加功能，给了什么属性就能变成什么样。
div主要的作用是被用来布局网页。

span标签

span是行级标签
span 没有任何附加功能，给了什么属性就能变成什么样。
span标签被用来选中文档中的文字

7、盒子模型

CSS处理网页时，它认为每个标签都包含在一个不可见的盒子里
如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子
我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局

7.1、盒子中的属性

width 宽度
height 高度
border 边框
padding 内边距
margin 外边距

7.2、border 边框

可以在标签周围创建边框，边框是标签可见框的最外部。
可以使用border属性来设置盒子的边框： border:1px red solid; 上边的样式分别指定了边框的宽度、颜色和样式
边框包含上top、右right、下bottom、左left
border-top、border-right、border-bottom、border-lef
边框可以设置样式
dotted （点线） dashed （虚线） solid （实线） double （双线） groove （槽线）

border-radius设置四个角为圆角边框

border-top-left-radius设置左上为圆角边框