1. Toy模板网首页
  2. > Toy博客

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

10月前 作者：L_GuoZY 分类：Toy博客 阅读(64) 违法举报

这篇具有很好参考价值的文章主要介绍了3-web前端 css 网页样式语言，基础语言、盒子模型、浮动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

html和css的关系：

  HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它负责定义网页的结构和内容。HTML使用各种标签来包含文本、链接、图

片、视频等元素，并可以与如JavaScript等其他技术结合使用，实现网页的动态功能。

  CSS (Cascading Style Sheets，级联样式表)是用于描述网页外观和样式的样式表语言。它让你可以控制网页的布局、颜色、字体以及其他视觉元素。CSS可以与HTML结合

使用，通过内联样式、内部样式表和外部样式表等方式，对网页的各个元素进行样式的设置。

  简单来说，HTML和CSS是相辅相成的。HTML提供了网页的内容和结构，而CSS则负责将这些内容以特定的样式呈现在用户面前。

1、三种样式<style></style>、

外部样式<link rel="stylesheet" href="style.css"/>

内部样式

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

 行内样式：

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

通过@import也能引入

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

 文章来源地址https://www.toymoban.com/news/detail-709904.html

2、选择器：标签选择器、类选择器、id选择器、通配选择器

优先级：id>类>标签>通配

注意： class 命名规范 必须以字母开头，字母数字-_ 、class 选择器 必须.开头 、

id选择器一个页面只能出现一次 、

标签中的class的值不能＋“.”

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

3、css文本修饰

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

注意：

1.文本对齐 只针对块元素有效

2.文本 可以控制图片 ，将图片放入块元素中

3.块元素 独占一行

4.行元素 和别的元素在一行 区分块元素和行元素：1.右键检查，看是否是行或者块；2.用行元素检验

5.文本样式永远控制父元素

     

4、背景

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

5、盒子模型

默认宽 百分百 默认高 0

div如果想显示 最少给个高就可以了

padding :内边距 内容到内壁的距离

宽= 内容width + 左边框 + 右边框 + 左内边距 + 右内距

高= 内容height + 上边框 + 下边框 + 上内边距 + 下边距

注意： 盒子模型针对的是块元素,对行元素无效

上下元素都给外边距的时候，以最大的为准

针对在css样式中，样式代码无优先级的情况下，系统按顺序执行代码结果

行高和高度一样高，文字垂直居中

针对因调试内边距导致盒子变大的情况使用：内减模式：box-sizing:boder-box;

左右元素都给外边距的时候，以和为准

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

5、浮动

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

6、伪类

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

7、字体图标

推荐矢量小图标网址:https://www.iconfont.cn/

8、css中的颜色值

1）字母表示 color：red；

2）十六进制表示：#000（000000）--#fff（ffffff）

3）rgb表示（255，0，0）rgba（255，0，0，0.5）a透明度     0.5表示半透明

9、css长度单位

px 像素、%百分比、em 相对于父元素、rem相对于根标签<html>

calc css内长度的计算

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

10、css的三大特性

1）层叠性

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

2）继承性

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

3）优先级

3-web前端 css 网页样式语言，基础语言、盒子模型、浮动

 

 

 

 

 

     
     

 

到了这里，关于3-web前端 css 网页样式语言，基础语言、盒子模型、浮动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包