CSS入门笔记 - 认识盒子模型

引言 这次给大家带来了CSS-盒子模型部分的笔记,大家一同交流😊 认识盒子模型之前,先来了解一下CSS元素的分类吧,后面再细细道来~ CSS元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型: * 块状元素 * 内联元素(又叫行内元素) * 内联块状元素 常用的块状元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有: <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有: <img>、<input> 元素分类–块级元素 什么是块级元素?在html中<div>、 <p>、<h1>、<form>、<ul> 、 <li>就是块级元素。设置display:block就是将元素显示为块级元素。 如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点: * 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行) * 元素的高度、宽度、行高以及顶和底边距都可设置。 * 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。 元素分类–内联元素 在html中,<span>、<a>、<label>、 <strong> 、<em>就是典型的内联元素(行内元素)(inline)元素。 当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。 div{ display:inline; } ...... <div>我要变成内联元素</div> 内联元素特点: * 和其他元素都在一行 * 元素的高度、宽度及顶部和底部边距不可设置 * 元素的宽度就是它包含的文字或图片的宽度,不可改变。 友情提示:行内元素之间会产生间隙bug问题的场景: 当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。 如下代码: <div> <a>1</a> <a>2</a> <span>33333</span> <span>44444</span> <em>555555</em> </div> 解决方法: 1. 写在一行,之间不要有空格之类的符号。 2. 使用font-size:0 div{font-size:0;} a,span,em{font-size:16px;} 元素分类–内联块状元素 内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.……

阅读全文

CSS入门笔记 - 初识CSS

引言 本人在慕课网学习HTML+CSS基础课程,记录一些文字,方便自己回忆,也希望对大家有所帮助 上次给大家带来了html部分的笔记,大家的反馈让我非常开心😄。 这次给大家带来css部分的第一篇笔记,由于本人比较蠢,学的很慢,而且css部分内容非常的细、广,需要不断code,才能体会其中细节,因此这次暂时只能带来本人已经整理好一部分,以供大家一同进步。 另外有一个求助,Atom中Toc插件生成页面,无法在Github或者简书中使用,希望有知道解决方法的高手,能够给予帮助 CSS入门笔记 - 初识CSS 1 - 认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等用于设置页面的表现。CSS3 并不是一个完整的独立版本而是将不同的功能拆分成独立模块(例如,选择器模块,盒模型模块),这有利于不同功能的及时更新与发布也利于浏览器厂商的实际使用。 2 - 为何使用CSS? CSS帮助您将文档信息的内容 和如何展现它的细节相分离。众所周知,如何展现文档的细节即为样式(style)。您可以将样式从它的内容分离出来,以便您能够: * 避免重复 * 更容易维护 * 为不同的目的,使用不同的样式而内容相同 例如: 您的网站可能有成千上万的页面外观相似。使用CSS,您可以将样式信息存储在公共的文件中以供所有的页面共用。 当用户显示页面时,用户的浏览器将样式信息和页面内容一同加载。 当用户打印页面时,您可以提供不同的样式信息,以便于打印出来的页面更易于阅读。 总之,在HTML中,您使用标记语言来描述文档的内容而不是它的样式。您可以使用CSS来指定它的样式而不是它的内容。 3 - CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器:指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成红色,而其他的元素(如ol)不会受到影响。 声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示: p { color:red; text-align:center; } CSS 注释 注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。 CSS注释以 /* 开始, 以 */ 结束, 实例如下: /* p标签的样式 */ p { text-align:center; /* 文本居中 */ color:black; font-family:arial; } 4 - CSS样式引入 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种: >* 内联式css样式 >* 嵌入式CSS样式 >* 外部式CSS样式……

阅读全文

HTML 入门笔记 - 初识HTML

本人在慕课网学习HTML+CSS基础课程,记录一些文字,方便自己回忆,也希望对大家有所帮助 基础框架 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>标题标签</title> </head> <body> <h1>了不起的盖茨比</h1> <p>《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼,投身到那个年代的灯红酒绿之中,却在名利场中看尽世态炎凉,以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》问世。 </p> </body> </html> 了解HTML的代码注释 什么是代码注释?代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。 语法: <!--注释文字 --> 认识标签<head> 文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 <head> <title>...</title> <meta> <link> <style>...</style> <script>...</script> </head> <title>标签 在<title> 和<title> 标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。 例如: <head> <title>hello world</title> </head> <title>标签的内容“hello world”会在浏览器中的标题栏上显示出来,如下图所示 <body>标签,网页上显示的内容放在这里 在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页。 开始学习<p>标签,添加段落 如果想在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中。 语法: <p>段落文本</p> 注意一段文字一个<p>标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3个<p>标签中。如下图所示。 了解<hx(1-6)>标签,为你的网页添加标题 文章的段落用<p>标签,那么文章的标题用什么标签呢?在本节我们将使用<hx>标签来制作文章的标题。 标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。 语法:<hx>标题文本</hx> x:1-6 注意:因为h1标签在网页中比较重要,所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如:<h1>腾讯网</h1> h1-h6标签的默认样式: 标签代码: 在浏览器中显示的样式: 加入强调语气,使用<strong>和<em>标签 有了段落又有了标题,现在如果想在一段话中特别强调某几个文字,这时候就可以用到<em>或<strong>标签 但两者在强调的语气上有区别:……

阅读全文