CSS学习
学习CSS
一、概述
CSS(层叠样式表)是一种用于描述HTML(或XML和SVG等其他标记语言)文档样式的样式表语言。它被广泛用于网页和用户界面的设计和布局。通过使用CSS,开发人员可以分离内容和样式,使网页更易于维护,提高用户体验。
二、学习资源
W3Schools、菜鸟教程
三、核心概念
选 ...
CSS基础学习
介绍
CSS(层叠样式表,Cascading Style Sheets)是一种用于描述网页或文档外观和样式的标记语言。它与 HTML 结合使用,为网页添加样式、布局和视觉效果。
CSS 的主要作用是将网页的结构与样式分离,使得开发者可以通过 CSS 文件或样式块来定义网页的外观,而不需要直接修改 HTML 文件。这种分离的设计使得网页的样式表现 ...
Tailwind CSS的初次邂逅
官方文档
英文文档:Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
中文文档:Tailwind CSS - 只需书写 HTML 代码,无需书写 CSS,即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网
热度
从npm.devtool的标签可以看出,截至2023年8月,tailwindCss每个月npm下载量高 ...
css学习Day01
css学习Day01
css语法
选择器{
声明1;
声明2;
声明3;
}
一、css四种导入方式
行内样式
<h1 style="color:red">
标题
</h1>
内部样式
<head>
<style>
h1{
color:green
}
</style>
</head>
外部样式
链接式:
<link rel="stylesheet" href="css文件地址">
...
CSS学习笔记2-CSS的继承_层叠_类型和CSS盒子模型
1 CSS属性的继承
1.1 CSS的某些属性具有继承性(Inherited):
如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
1.2 如何知道一个属性是否具有继承性呢?
常见的font-size/font-family/font ...
vue学习第8天 css ---- position( 5种定位 常见4种 + 粘性定位)
学习目标
1)定位的4种分类 (四种定位)2)4种定位各自的特点 (4种定位各自的特点)3)常用子绝父相布局的原因 (子绝对、父相对布局)4)轮播图效果 5)显示隐藏的2种方式以及区别
定位
定位和浮动的不同
1)浮动可以让 ...
3、Web前端学习规划:CSS - 学习规划系列文章
CSS作为Web前端开发的第2种重要的语言,笔者建议在学了HTML之后进行。CSS主要是对于HTML做一个渲染,其也带了一些语言语法函数,功能也非常强大。
1、 简介;
CSS(层叠样式表)是一种用于描述网页样式的语言。它可以控制网页中的字体、颜色、布局、背景等方面的样式 ...
CSS学习笔记
CSS学习笔记
vertical-align
vertical-align 属性设置元素的垂直对齐方式。
css中的vertical-align 属性只能用于 行内元素 和 置换元素(例如 图像和表单输入框) ,此属性不继承。
vertical-align的取值:baseline|sub|super|top|text-top|middel|bottom|text-bottom|<length>|<percentage>;
...
狂神说css学习笔记
什么是CSS
Cascading Style Sheet层叠级联样式表
CSS:表现层(美化网页)如:字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动等。
CSS发展史
CSS1.0
CSS2.0 DIV(块)+CSS,HTML和CSS结构分离的思想,网页变得简单,利于SEO
CSS2.1 浮动,定位
CSS3.0 圆角,阴影,动画… 浏览器兼容性-
CSS的快速入门及优势
...
前端学习-CSS-10-CSS定位装饰
学习时间:2022.11.30
目录CSS定位装饰定位定位的基本介绍定位的基本方式staticrelativeabsolutefixed不同元素之间的层级关系装饰垂直对齐光标类型边框圆角overflow溢出部分显示效果元素本身隐藏
CSS定位装饰
定位
定位的基本介绍
网页常见布局方式
标准流
浮动
定位:让元素可以在网页的任意位置,一般用于盒子之间的层 ...
前端学习-CSS-09-浮动
学习时间:2022.11.14
目录浮动结构伪类选择器伪元素浮动浮动的作用浮动的特点清除浮动浮动带来的影响清除浮动的方法方法1:给父母元素加一个高度方法2:额外标签法方法3:单伪元素标签法方法4:双伪元素标签法方法5:overflow
浮动
结构伪类选择器
根据元素在HTML的关系查找元素
可以减少HTML对类的依赖,保持代码的整洁
...
前端学习-CSS-08-盒子模型
学习时间:2022.11.13
目录盒子模型盒子模型的介绍内容的宽高边框(border)连写形式单方向设置单个属性简单案例内边距(padding)内减模式外边距(margin)外边距折叠现象1-合并现象外边距折叠现象2-塌陷现象行内标签的内外边距问题
盒子模型
盒子模型的介绍
每个标签都可以看做是一个盒子
盒子模型分为:
内容区域(content), ...
前端之CSS学习
目录表单标签的补充说明CSS层叠样式表CSS学习预备知识CSS选择器CSS基本选择器标签的嵌套名称CSS组合选择器分组与嵌套属性选择性伪类选择器伪元素标签选择器优先级CSS样式调节字体样式文字装饰背景属性
表单标签的补充说明
基于form表单发送数据
1.用于获取用户数据的标签至少应该含有name属性
name属性相当于字典的键
...
前端学习-CSS-07-CSS特性
学习时间:2022.11.12
CSS特性
继承性
子女元素默认继承父母元素的相关属性
只有文字相关的属性会被继承,其他属性均不被继承
当子女元素有自己的浏览器默认属性时,如a标签,h系列标签,不会继承
可以使用浏览器调试工具来判断样式是否能被继承
层叠性
后面的样式会覆盖前面的
只有优先级相同的选择器才有层叠的效果
...
前端学习-CSS-01-CSS基础认知
学习时间:2022.11.06
CSS基础认知
CSS初识
<!-- 01-CSS初识.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS初识</title>
<st ...
Asp.net core 少走弯路系列教程(三)CSS 学习
前言
新人学习成本很高,网络上太多的名词和框架,全部学习会浪费大量的时间和精力。
新手缺乏学习内容的辨别能力,本系列文章为新手过滤掉不适合的学习内容(比如多线程等等),让新手少走弯路直通罗马。
作者认为新人应该先打好基础,不要直接学习框架,例如先掌握 SQL 再使用 EFCore 框架。
作者只传授数年内不会变化的 ...
CSS学习
CSS学习笔记(狂神说Java)
狂神说B站视频:https://www.bilibili.com/video/BV1YJ411a7dy
HTML + CSS +JavaScript
结构 + 表现 + 交互
一、什么是CSS
Cascading Style Sheet(层叠级联样式表)
CSS:表现(美化网页)
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…
二、CSS发展史
CSS1.0 : 加粗
CSS2.0 ...
CSS入门学习笔记
CSS入门学习笔记一、CSS简介1、什么是CSS?2、为什么使用CSS?3、CSS的作用二、CSS语法1、CSS基础语法2、CSS注释语法3、CSS应用方法三、CSS选择器1、元素选择器2、类选择器3、ID选择器4、组合选择器5、后代选择器6、子元素选择器7、兄弟选择器8、全局选择器9、伪类选择器10、选择器优先级四、CSS常用属性1、字体属性2、文本 ...
3.CSS学习
CSS是一种层叠样式表(样式可以叠加)
为什么要用CSS
虽然html的标签的某些属性是可以设置样式效果,可是细节处理还不够好
假如用html自带的属性来实现的样式,可能会出现很多重复代码,维护难
Css可以做到网页和内容分离,对网页的元素进行像素级的精准控制
CSS的语法:CSS样式由选择器和和一条或多条以分号隔开的样式声明 ...
学习笔记——CSS
一、学习重点
二、学习内容
例题一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
...