Css基础教程(一)

最新推荐文章于 2024-09-15 22:07:21 发布

爱敲代码的小蒋

最新推荐文章于 2024-09-15 22:07:21 发布

阅读量317

点赞数 6

文章标签： css 前端

本文链接：https://blog.csdn.net/iamjiangxiaoqian/article/details/140559765

版权

CSS（Cascading Style Sheets，层叠样式表）是一种用来增强HTML网页表现的语言，它可以控制网页的布局、颜色、字体和其他视觉元素。通过将内容（HTML）和设计（CSS）分离，可以使网页更易于管理和访问。

CSS可以通过以下三种方式添加到HTML中：

内联样式：直接在HTML元素内部使用style属性。


<p style="color: red;">这是红色文字的段落。</p>

内部样式表：在HTML的<head>部分使用<style>标签。
```
<style> p { color: blue; } </style>
```
外部样式表：创建一个单独的CSS文件，并通过<link>标签引入。实际开发过程中这种方式用的最多,因为往往css的代码特别多,未来与页面区分开会选择创建新的css文件再导入到页面中
```
<link rel="stylesheet" href="styles.css">
在styles.css文件中：




p { color: green; }
```

CSS的基本语法非常简单，它包括选择器和一组声明：

css

选择器 { 属性: 值; 属性: 值; }

例如，要将所有段落的文字颜色设置为紫色，可以这样写：

css

p { color: purple; }

颜色和背景：

color：设置文字颜色。
background-color：设置背景颜色。

文本格式：

font-size：设置文字大小。
text-align：设置文本对齐方式（left, right, center, justify）。

盒模型：
- ```
margin：设置元素外边距。
padding：设置元素内边距。
border：设置元素边框。
```
- 这个模型是一个元素的各种边距的规范,初学时可能会较难理解,建议写一个div元素,设置这个元素的margin,border,padding等等,推荐使用chorm浏览器,直接打开浏览器控制台中调整,可以看到这个盒子模型到底是什么

布局：

display：设置元素的显示类型（block, inline, inline-block, flex等）。
position：设置元素的定位方式（static, relative, absolute, fixed）。

CSS选择器是CSS规则的关键部分，它定义了哪些HTML元素应该应用规则。常见的选择器有：

元素选择器：直接指定元素名，如p。
类选择器：以.开头，如.classname。
ID选择器：以#开头，如#idname。
属性选择器：基于属性值，如[type="text"]。

通过使用媒体查询（Media Queries），CSS可以根据不同的屏幕尺寸和设备特性应用不同的样式规则，实现响应式设计：

css

@media screen and (max-width: 600px) { body { background-color: lightblue; } }

关注