【前端模块】css基础

最新推荐文章于 2024-08-07 14:19:47 发布

_之桐_

最新推荐文章于 2024-08-07 14:19:47 发布

阅读量170

点赞数

分类专栏： —— 前端模块—— 文章标签： html css web

本文链接：https://blog.csdn.net/xt199711/article/details/105808304

版权

—— 前端模块—— 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

一、概念

css (Cascading style Sheets 层叠样式表)

层叠：多个样式可以作用在同一个html的元素上，同时生效

二、好处

1. 功能强大
2. 将内容展示和样式控制分离
  - 减低耦合度。解耦
  - 让分工协作更容易
  - 提开发效率

三、css使用

css与html结合的方式

内联样式
- 在标签内使用style属性指定css代码
```
<div style="color:red;">
hello
</div>
```

内部样式

在head标签内，定义style标签，style标签的标签体就是css代码

<head>
    <style>
        div{
            color:red;
        }
    </style>
</head>

外部样式

定义css资源文件

在head标签内，定义link标签，引入外部的资源文件

<!--a.css外部文件-->
div{
	color:red;
}
<!--html文件-->
<head>
	<link rel = "stylesheet" href = "css/a.css"/>
</head>

注意：

1,2,3中方式，css作用范围越来越大
1方式不常用，后期常用2,3
第三种格式可以写为：

<style>
    @import "css/a.css"
</style>

四、css语法

格式

选择器{
	属性名1:属性值1;
	属性名2:属性值2;
}

注意：每一对属性需要使用；隔开，最后一对属性可以不加

五、选择器

选择器：筛选具有相似特征的元素

分类

(1)基础选择器

id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一（在标签内设置id的键值对）

语法：id属性值{}
元素选择器：选择具有相同标签名称的元素

语法：标签名称{}

注意：id选择器的优先级要高于元素选择器
类选择器：选择具有相同的calss属性值的元素（在标签内设置class的键值对）

语法：.class属性值{}

注意：类选择器的优先级要高于元素选择器

（2）扩展选择器

选择所有元素：
1. 语法：*{}
并集选择器
1. 选择器1，选择器2{}
子选择器：删选选择器1元素下的选择器2元素
1. 语法：选择器1 选择器2{}
父选择器：筛选选择器2的父选择器1
1. 语法：选择器1>选择器2{}
属性选择器：选择元素名称，属性名=属性值的元素
1. 语法：元素名称[属性名=“属性值”]{}
伪类选择器：选择一些元素具有的状态
1. 语法：元素:状态{}
2. 如：
  
  状态：
  
  link：初始化的状态
  
  visited：被访问过的状态
  
  active：正在访问的状态
  
  hover：鼠标悬浮的状态

六、属性

字体、文本
1. font-size：字体大小
2. color：文本颜色
3. text-align：对齐方式
4. line-height：行高
背景
1. background
边框
1. border：设置边框，符合属性
尺寸
1. width：宽度
2. height：高度
盒子模型
1. margin：外边距
2. padding：内边距
  1. 默认情况下，内边距会影响整个赫兹的大小
  2. box-sizing:border-box; 设置赫兹的属性会最终就是赫兹的大小
3. float：浮动
  1. left
  2. right

七、案例样式


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css</title>
		<style>
			*{
				margin:0px;
				padding:0px;
				box-sizing:border-box;
			}
			.parent{
				height:300px;
				width:200px;
				margin-left:300px;
				margin-top:200px;
				padding:50px;
				border:30px solid red;
				
			}
			
			.child{
				height:100;
				width:50px;
				;
			}
		</style> 
</head>
<body>
	<div class="parent" >
		<div class="child" >
			测试
		</div>
	</div>
</body>
</html>

red;

		}
		
		.child{
			height:100;
			width:50px;
			;
		}
	</style>

测试

```

在这里插入图片描述

_之桐_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端模块】css基础

文章目录一、概念二、好处三、css使用四、css语法五、选择器六、属性七、案例样式一、概念css (Cascading style Sheets 层叠样式表)层叠：多个样式可以作用在同一个html的元素上，同时生效二、好处1. 功能强大2. 将内容展示和样式控制分离 - 减低耦合度。解耦 - 让分工协作更容易 - 提开发效率三、css使用css与html结合的方式...
复制链接

扫一扫