【牛腩】HTML+CSS基础了解

简介: 【牛腩】HTML+CSS基础了解

从牛腩老师那里了解到了HTML和CSS的一部分基础知识。又在网上查了一些资料,有了一个初步的了解。

HTML:

标签:HTML 文档和 HTML 元素是通过 HTML 标签进行标记的

容器:与容器AOP概念不一样。

HTML(文字)标签选择器、类选择器、ID选择器

优先级:ID选择器>类选择器>标签选择器

标签选择器

例子

HTML中:

Body{
    2345
}

CSS中:

Body{
    Color:#fof;
}

类选择器

例子:

HTML中:

<span class="menu">• 1

CSS中:

.menu{ /*栏目样式*/
    Color:#f00;/* 文字颜色*/
}

ID选择器

例子:

HTML中:

<span id="special">• 1

CSS中:

#special{
    Font-weight:bold;/*粗体*/
}

选择器的父子关系、并列关系:

.title span{/*CSS 中的父子关系*/
    }
.menu, .title{ /*CSS 中的并列关系*/
    }
/*HTML 中的并列关系,冲突时,与CSS的排列顺序有关*/
    <Span class="menu niu">栏目吧</span>• 1

CSS:

CSS核心内容:标准流、盒子模型、浮动、定位

块级元素 block、行集元素 inline

块级元素:div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

<div ></div>/*单管一行*/• 1
<span></span>• 1

行级可以变块级,块比行好控制,在多个浏览器中显示一样

标准流:按顺序显示,类似代码的顺序执行

盒子模型:

内边距:上下左右;padding

外边距:上下左右;margin:

内容区域:宽,高;content:width,height

画框:宽。border-width

共14个参数。三层包围4个+中心2个。对称。

浮动 float:

用于控制浮动,把盒子横向排列。

.box{
    clear:left;  /*清除向左浮动*/
    clear:right; /*清除向右浮动*/
    clear:both;  /*同时清除向左向右浮动*/

定位 position:

相对定位 relative vs 绝对定位 absolute。

相对定位,不脱离标准流。偏移量,相对于原来的位置。

绝对定位,脱离标准流。会影响标准流中的其他元素。

在查找资料的过程中发现一个特别有意思的CSS学习资料:http://zh.learnlayout.com/no-layout.html 里面讲了CSS布局的基础属性。

HTML + CSS:

html是静态网页文本内容,css是对界面元素样式的设置。应用html+css把网页的内容和样式解耦,使之更易于维护。

初步进行了一些了解,接下来还要多用,多深入学习。


相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
30天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
33 2
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
79 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24
|
3月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
86 5
|
3月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
121 7
|
3月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
59 5

热门文章

最新文章