当前位置：首页 > news >正文

web基础之CSS

news 2025/7/28 2:57:42

web基础之CSS

文章目录

web基础之CSS
- 一、CSS简介
- 二、基本用法
- - 2、CSS应用方式
  - - 2.1 行内样式
    - 2.2内部样式
    - 2.3外部样式
- 三、选择器
- - 1、标签选择器
  - 2、类选择器
  - 3、ID选择器
  - 4、选择器的优先级
- 四、常见的CSS属性
- - 1、字体属性
  - 2、文本属性
  - 3、背景属性
  - 4、表格属性
  - 5、盒子模型的属性
  - 6、定位
- 总结

一、CSS简介

CSS（Cascading Style Sheel）层叠样式表。是一组设置样式规则，并用于空值页面的外观布局的样式。

作用：用于页面的外观美化，以及页面组件的布局和定位。

二、基本用法

CSS语法：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css语法</title><style>选择器{        		#表示要修饰的对象属性名:属性值;	  #修饰对象的具体属性（样式）：样式的取值；}</style></head><body></body>
</html>

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css语法</title><style>p{font-size: 20px;color: red;}</style></head><body><p>这是一个段落标签</p></body>
</html>

在这里插入图片描述

2、CSS应用方式

引用方式一共有三种：行内样式、内部样式、外部样式。

2.1 行内样式

被称为嵌入式，通过使用HTML 标签的style属性进行定义，样式只对设置了style属性的标签起作用。

<body><p>这是一个段落标签</p><p style="color: red; font-style: 宋体;">样式的尝试，行内样式</p>
</body>

在这里插入图片描述

2.2内部样式

被称为内嵌样式，在页面头部通过style标签定义，对当前页面中所有符合样式的选择器标签都起作用。

	<head><meta charset="utf-8"><title>css语法</title><style>p{color: pink;font-size: 50px;}</style></head><body><p>这是一个段落标签</p><p>样式的尝试，内部样式</p></body>

在这里插入图片描述

2.3外部样式

就是在页面文件外单独的创建一个.css 的文件。然后再页面文件中使用 link标签进行引入。
引用：

	<head><meta charset="utf-8"><title>css语法</title><link rel="stylesheet" type="text/css" href="css/01.css" /></head>

css文件：

h1{color: green;
}
p{color: blueviolet;
}

在这里插入图片描述

三、选择器

1、标签选择器

也被称为元素选择器，使用HTML标签作为选择器的名称。
在这里插入图片描述

在这里插入图片描述

2、类选择器

使用自定义的名称，以 . （点）作为前缀，然后再通过HTML 标签的Class属性调用类选择器。

注意：

调用时不能添加 . 号。
同时调用多个类选择器时，以 空格 分隔。
类选择器名称不能以数字开头。

3、ID选择器

使用自定义名称，以#作为前缀，然后通过HTML标签的id属性进行名称匹配，一对一的关系。
在这里插入图片描述

4、选择器的优先级

行内样式>ID选择器>类选择器>标签选择器
因为样式的加载顺序是，根据书写顺序进行加载的，在同优先级的前提下，后加载的会覆盖先加载的同名样式，就是就近原则，离得越近越优先。

四、常见的CSS属性

1、字体属性

设置字体的相关样式。

属性	含义	说明
font-size	大小、尺寸	可以使用多种单位
font-weight	粗细
font-family	字体
font-style	样式
font	简写

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css语法</title><!--<link rel="stylesheet" type="text/css" href="css/01.css" />--><style>h1{color: red;font-size: 50px;}.a{color: blueviolet;font-weight: bold;}#bb{color: green;font-family: 宋体;}.aa{color: aqua;font-style: italic;}</style></head><body><p id="bb">这是一个段落标签</p><p class="a">样式的尝试，内部样式</p><h1>这是一个大标题</h1><p class="aa">样式</p></body>
</html>

在这里插入图片描述

2、文本属性

属性	含义	说明
color	颜色
line-height	行高	行之间的高度
text-align	水平对齐方式	取值：left、center、right
vertical-align	竖直对齐方式	取值：top、middle、bottom可用于图片和文字的对齐方式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css语法</title><!--<link rel="stylesheet" type="text/css" href="css/01.css" />--><style>h1{color: red;font-size: 50px;line-height: 50px;text-align: center;}.a{color: blueviolet;font-weight: bold;line-height: 80px;vertical-align:top;}#bb{color: green;font-family: 宋体;text-align: left;}.aa{color: aqua;font-size: 80px;font-style: italic;text-align: right;}</style></head><body><p id="bb">这是一个段落标签</p><p class="a">样式的尝试，内部样式</p><h1>这是一个大标题</h1><p class="aa">样式</p></body>
</html>

在这里插入图片描述

3、背景属性

属性	含义	说明
background-color	背景颜色
background-image	背景图片	使用url（）方式进行指定图片路径

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css语法</title><!--<link rel="stylesheet" type="text/css" href="css/01.css" />--><style>body{background-color: bisque;<!--background-image: url("img/03.png");-->}h1{color: red;font-size: 50px;line-height: 50px;text-align: center;}.a{color: blueviolet;font-weight: bold;line-height: 80px;vertical-align:top;}#bb{color: green;font-family: 宋体;text-align: left;}.aa{color: aqua;font-size: 80px;font-style: italic;text-align: right;}</style></head><body><p id="bb">这是一个段落标签</p><p class="a">样式的尝试，内部样式</p><h1>这是一个大标题</h1><p class="aa">样式</p></body>
</html>

在这里插入图片描述

4、表格属性

border-collapse：表格中相邻的边框是否合并为单一边框。
取值：separated（默认） collapse

		<style>table{width: 200px;height: 100px;border: 1px solid red;border-collapse: collapse;}td{border: 1px solid red;}</style>

在这里插入图片描述

5、盒子模型的属性

盒子模型就是网页页面的布局。

width：宽度
height：高度
border：边框
padding：内边框
margin：外边框
盒子的边框（border）
盒子的边框分为四个方向：
1、顶部：top：border -top 三个样式：分别是：1、color 、width、和style
2、右边：right border -right 三个样式：分别是：1、color 、width、和style
3、左边：left border-left 三个样式：分别是：1、color 、width、和style
4、下边：bottom border -bottom 三个样式：分别是：1、color 、width、和style
边框样式的取值：
1、solid实线、
2、dashed：虚线
3、dotted：点线
4、double：双线

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子模型属性</title><!--<link rel="stylesheet" type="text/css" href="css/01.css" />--><style>p{width: 300px;background-color: aquamarine;}.a1{/* border-top-color:red;border-top-width: 2px;border-top-style: solid;border-right-color: blue;border-right-width: 3px;border-right-style: dotted;主要设置了顶部边框和右边框的属性*/border: 1px solid red;padding: 20px;margin: 10px;}.a2{padding: 30px;}.a3{margin: auto;text-align: center;height: 100px;line-height: 100px;}</style></head><body><p class="a1">这是一个元素</p><p class="a2">这是二个元素</p><p class="a3">这是三个元素</p></body>
</html>

在这里插入图片描述

6、定位

通过position 属性实现对元素的定位，在设置定位方式后，还需要设置定位属性。
定位常见方式取值如下：

取值	含义	说明
static	默认值	按照常规文档流进行显示
relative	相对定位	相对于标签原来的位置进行定位
absolute	绝对定位	相对于第一个非static定位的父标签的定位
fixed	固定定位	相对于浏览器窗口进行定位

定位属性就是：顶部（top）、左边（left）、右边（right）、顶部（bottom）

1、相对定位

先设置元素的position属性为relative，然后再设置定位属性（方向性）。

2、绝对定位

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置定位属性（也就是方向）。

3、固定定位
先将元素的position属性设置为fixed，然后再设置定位属性（方向）。
4、z-index元素
通过z-index元素进行设置优先级，通过z-index来控制元素的堆叠顺序，取值为数字，值越大优先级越高。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>定位</title><!--<link rel="stylesheet" type="text/css" href="css/01.css" />--><style>#zhu{width: 900px;border: 1px solid red;position: relative;}.div1{width: 100px;height: 80px;background-color: aqua;position: relative;/* 相对定位 */top: 30px;left: 60px;z-index: -6;}.div2{width: 100px;height: 80px;background-color: bisque;position: absolute;left: 180px;bottom: 80px;z-index: -9;}.div3{width: 100px;height: 80px;background-color: cadetblue;position: fixed;bottom:20px;left: 100px;}.div4{width: 100px;height: 80px;background-color: chartreuse;}</style></head><body><div id="zhu"><div class="div1">第一个盒子</div><div class="div2">第二个盒子</div><div class="div3">第三个盒子</div><div class="div4">啥也不做</div></div></body>
</html>