CSS入门

于 2022-03-07 21:41:23 发布
阅读量79 收藏 1
点赞数
分类专栏： javaSE 文章标签： java python 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46815330/article/details/123310652
版权

文章目录

基础语法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
如何关联css和html？
在这里插入图片描述
在这里插入图片描述

如何在html中定义css?

  • 内联方式
  • 外联方式

内联方式

在这里插入图片描述
在这里插入图片描述
这种方式的缺点？内联方式的样式只对当前标签有效~~。无法为一类标签设置样式。代码耦合度高。没有讲内容和样式分离。

外联样式

外联样式一

style中的p为元素选择器，找到所有的p元素。
在这里插入图片描述

外联样式二

通过link链接
href指定使用的css路径
在这里插入图片描述
内联样式优先级高于外联样式。

css选择器

在这里插入图片描述

  • id选择器用法：#id(卫衣不可重复)
  • 类选择器用法:.class
  • 元素选择器：spam(元素名称)
  • 属性选择器：【title】(属性名称)
    在这里插入图片描述

在这里插入图片描述

后代元素选择器

在这里插入图片描述

在这里插入图片描述

子元素选择器

在这里插入图片描述
在这里插入图片描述

兄弟元素

在这里插入图片描述
在这里插入图片描述

伪类

在这里插入图片描述
在这里插入图片描述

伪元素

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

css选择器的优先级

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

css设置样式

背景样式

在这里插入图片描述
在这里插入图片描述

文本样式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

字体样式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

列表样式

在这里插入图片描述
在这里插入图片描述

表格

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
多元素选择器
在这里插入图片描述
在这里插入图片描述

css布局

会使用到浮动。

两行三列布局

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

三行两列在这里插入图片描述

在这里插入图片描述

盒子模型

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

边框

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

内边距

在这里插入图片描述
d2和d1父子关系，高和宽相同。d2吧d1覆盖住了。
在这里插入图片描述
在这里插入图片描述

外边距

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

在这里插入图片描述

范德彪陕西分彪
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS入门PPT
01-19
CSS入门，适合初学者，基础的CSS操作 CSS(Cascading Style Sheet)级联样式单（层叠样式表） HTML5建议把页面外观交给CSS控制。 优点： 表达效果丰富 （元素样式、精确定位） 文档体积小（重复定义 提高传输速度 ...
CSS入门教程篇
10-30
### CSS入门教程篇 #### 一、CSS简介与基本语法规范 **CSS**（Cascading Style Sheets）即层叠样式表，它是一种用于增强HTML文档样式的语言，主要用于控制网页内容的外观呈现，如颜色、布局等。CSS使得内容与表现...
css 入门基础教程
09-25
总的来说，CSS入门基础教程涵盖了基本语法、选择器、注释和不同类型的样式表，这些都是学习CSS的基础。掌握这些知识后，可以进一步学习更复杂的布局技巧、响应式设计、动画和过渡效果，以及CSS预处理器等进阶主题。
css入门入门入门入门
05-23
01_CSS快速入门.mp4可能涵盖了CSS的基础知识，包括选择器的使用、盒模型、浮动和定位，这些都是CSS初学者需要掌握的基础技能。盒模型定义了元素的尺寸，包括内容、内边距、边框和外边距。浮动和定位则是布局中的重要...
CSS入门讲解
10-11
WEB项目第二天，HTML和CSS入门讲解，内容还是比较详细的
html + css 入门教程
最新发布
02-18
### HTML + CSS 入门教程知识点详解 #### 一、基础知识概述 在开始学习HTML与CSS之前，我们首先需要明确几个基本概念。 1. **HTML（HyperText Markup Language）**： - 定义：HTML是一种标记语言，用于创建网页...
CSS入门源代码 CSS入门源代码
05-20
这个压缩包文件“CSS入门源代码”提供了一些关于CSS基础和进阶知识的学习资源，主要包括以下几个方面： 1. **CSS选择器**：CSS选择器是用于选取HTML或XML文档中的元素的关键工具。基本选择器包括标签选择器（如`<p>...
15个必须阅读的CSS入门文章
09-25
以下是一些精选的CSS入门文章，它们将为你提供必要的指导： 1. **CSS Reset**：在开始设计之前，了解如何使用CSS Reset消除浏览器默认样式的差异至关重要。这将确保你的设计在所有平台上看起来一致。 2. **CSS定位...
CSS入门到精通教程全书
03-10
《CSS入门到精通教程全书》是一本专为前端初学者设计的教程，旨在帮助零基础的学习者快速掌握CSS（层叠样式表）的核心概念和技术。CSS是网页设计中的重要组成部分，它负责定义网页的布局、颜色、字体、动画等视觉...
html+css入门到实战源码
12-09
... CSS的引入通常有三种方式：行内样式...通过这个"html+css入门到实战源码"的学习资源，你将能够逐步掌握前端开发的基础，为未来的网页设计和开发工作打下坚实的基础。不断实践，勇于探索，你将在前端领域走得更远。
HTML与CSS入门经典 第8版 英文原版
08-23
### HTML与CSS入门经典 第8版 英文原版 #### 知识点概览 本书《HTML与CSS入门经典 第8版》是一本全面介绍HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）基础知识的专业教材。通过24小时的教学...
CSS入门。（仅供参考）
01-08
文档出处部分Coogle和《原创》，如有雷同纯属巧合 《仅供参考》 首先说明以下内容是本人自己整理（仅供参考！！！！！！！！） 首先浏览器我建议使用Google Chrome ，Mozilla Firefox 编译器建议...5），CSS可以使
html+css入门小兔鲜项目
12-05
HTML+CSS入门小兔鲜项目 本项目旨在使用 HTML 和 CSS 来构建一个小兔鲜项目，学习目标是能够在网页中使用精灵图，使用背景大小属性，设置背景图片的大小，认识 CSS 写作顺序，提高代码专业性和浏览器渲染性能，以及...
html+css入门学习笔记
01-24
本入门学习笔记将帮助初学者理解这两门技术的基本概念，逐步掌握创建动态、美观网页的方法。 HTML是用于创建网页内容的语言，它通过一系列标签来定义网页的各个部分，如标题、段落、图片、链接等。在HTML5中，新增...
CSS入门笔记
03-28
**CSS（层叠样式表）入门笔记** 在网页设计领域，CSS（Cascading Style Sheets）扮演着至关重要的角色，它负责控制网页的布局和视觉样式。本笔记将引导初学者逐步了解CSS的基础知识，包括选择器、属性、值以及如何...
css入门教程之学习网页布局(1)
12-11
在CSS入门教程中，学习网页布局是至关重要的一步。网页布局指的是通过CSS控制网页中各个元素的显示位置，使得整个页面结构清晰、美观且易于阅读。对于初学者来说，可能会误以为布局是创建网页的第一步，实际上，一个...
lesscss入门讲解
01-02
### LessCSS入门讲解 #### 什么是LessCSS？ Less是一种动态样式语言，它为CSS增加了诸如变量、混合（mixins）、运算以及函数等高级特性。Less的设计理念是在保持现有CSS语法不变的同时，添加新的功能，使得样式表...
CSS入门与优势解析
下面是一个简单的CSS入门示例： ```html <!DOCTYPE html> 第一个css程序 <!-- 在部分内使用标签来写CSS --> <link rel="stylesheet" href="css/style.css"> 我是一级标题 ``` 在这个例子中，`<style>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值