首页 > 其他分享 >html+css随手记录第二天

html+css随手记录第二天

时间:2024-07-06 12:26:54浏览次数:15  
标签:随手 样式 元素 html 边框 HTML css CSS 样式表

1.CSS 简介
       需要对下面的知识有基本的了解:HTML / XHTML
1.1什么是 CSS?
       CSS 指层叠样式表 (Cascading Style Sheets)
       css样式定义如何显示 HTML 元素,样式通常存储在样式表中,把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题,外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一个。

1.2css样式解决了一个很大的问题
        HTML 标签原本被设计为用于定义文档内容,样式表定义如何显示 HTML 元素,就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

        HTML 中的字体标签和颜色属性  <font>HTML5不支持,不赞成使用。定义文字的字体、尺寸和颜色。

1.3CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号 ; 结束,声明总以大括号 {} 括起来:

p {color:red;text-align:center;}

1.4CSS 注释
注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束, 实例如下:

p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

2.CSS 盒子模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model):

不同部分的说明:

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度,你需要知道的盒模型是如何工作的。

2.1元素的宽度和高度
       Remark重要: 当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和外边距。
最终元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框

标签:随手,样式,元素,html,边框,HTML,css,CSS,样式表
From: https://blog.csdn.net/2301_76923794/article/details/140225214

相关文章

  • HTML 【实用教程】(2024最新版)
    核心思想——语义化【面试题】如何理解HTML语义化?仅通过标签便能判断内容的类型,特别是区分标题、段落、图片和表格增加代码可读性,让人更容易读懂对SEO更加友好,让搜索引擎更容易读懂html文件的基本结构html文件的文件后缀为.html,如index.htmlvscode中......
  • HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下
    超链接a标签主要有以下功能:跳转到其他页面<ahref="https://www.baidu.com/"target="_blank">百度</a>href:目标页面的url地址或同网站的其他页面地址,如detail.htmltarget:打开目标页面的方式_self:在同一个网页中显示(默认值)_blank:在新的窗口中打开【常用】_......
  • 纯 CSS 实现文字智能适配背景效果
    还记得2017年,我们响应朋友的邀约从高德离职出来创业的时候,遇到了一个相对来说有点特殊的需求,动态的文字有长有短,但是需要智能适配背景的颜色变成其对比色。大概效果如下: 仔细看会发现,哪怕半个文字存在于两个不同的背景色之间,这个文字也会被分割成两个颜色。看到这样的需......
  • 如何将pdf转成html?PDF转HTML网页的3个方法
    怎么把pdf转化成html?我们在查看一些文件的时候会遇到查看失败或是无法打开的情况,发送的时候也可能会出现这样或那样的问题,其实我们可以将PDF文件转换成HTML格式,在该格式下文件打开和加载的速度很快,而且能不受到软件的制约,直接在网页上就能查看,与此同时还能方便文件的共享访问,只需......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript学校网站(成都大学)
    HTML+CSS+JS【学校网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • CSS基础知识总结(1)
    1、CSS引入有哪几种方式?分别说说三种方式的使用方法和优缺点。三种:元素选择器,类选择器,id选择器。元素选择器就直接使用该HTML元素名称,在该元素名称下面写样式并进行应用。类选择器在CSS样式中,需要在类名的前面加上.,在HTML元素当中,我们应用起来就是元素名class="类名“。Id选......
  • 国产linux系统(银河麒麟,统信uos)使用 PageOffice 国产版在线打开 word文件并另存HTML或
    国产linux系统(银河麒麟,统信uos)使用PageOffice国产版在线打开pdf文件PageOffice国产版:支持信创系统,支持银河麒麟V10和统信UOS,支持X86(intel、兆芯、海光等)、ARM(飞腾、鲲鹏、麒麟等)芯片架构。查看本示例演示效果本示例关键代码的编写位置Vue+Springboot注意本文中展示的......
  • 如何利用 SCSS 的变量和混合(Mixin)功能来创建可复用的样式组件,并确保在不同场景下的兼
    使用SCSS的变量和混合功能可以方便地创建可复用的样式组件,并确保在不同场景下的兼容性。下面是具体的步骤:创建变量:使用$符号定义变量,例如$primary-color:#005500;。这样可以方便地在整个项目中重复使用该颜色。创建混合(Mixin):使用@mixin关键字创建混合,例如@mixi......
  • 如何在 SCSS 中实现复杂的嵌套选择器并确保代码的可维护性?
    在SCSS中实现复杂的嵌套选择器时,可以遵循以下几个原则以确保代码的可维护性:限制嵌套层级:避免层级过深的嵌套,最好不要超过三级。过多的嵌套会增加代码的复杂性和选择器的特异性,降低代码的可读性和维护性。使用父元素选择器:尽量使用父元素选择器&来限定样式的作用范围......
  • 用Html的基本骨架展现一个基本网页
    目录一.前言二.html的定义三.html的基本骨架 四.简单网页的生成一.前言    在进行了开发环境的配置后,我们就可以开始编写Html的代码了。下面则是介绍下如何用html来进行一个网页的展示以及html的定义。二.html的定义    首先我们需要知道html到底......