前端学习笔记--CSS样式--列表和表格

前端学习笔记--CSS样式--文本

1.文本与文字样式主要的属性: 子标签可以继承父标签的样式: 关于颜色: 文本属性: letter-spacing: line-height: text-align: 字体:…

有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可以知道的是,行内元素和块级元素之间是能够相互转换的.趋于对网页模块化的搭建,后期行内转换为块级的例子会很多很多. html中的块级元素列举如下: div(文档分区),article(文章内容), aside(伴随内容), audio(音频播放), blockquote(块引用), canvas(绘制…

前端学习笔记——CSS选择器

学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选择器.class选择器.标签选择器 /*id选择器*/ /* #代表通过id选择器查找*/ #i1{ height: 48px; background-color: red; } /* class选择器最常用 */ /*. 代表通过class选择器查找*/ .div{ height: 48px;…

web前端学习笔记(CSS盒子的定位)

相对定位使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它. 使用relative,即相对定位,除了将position属性设置为relative之外,还需要指定一定的偏移量,水平方向通过left或者right属性来指定,竖直方向通过top和bottom来指定.以下为后面实验的基准代码. <html xmlns="http://www.w3.org/1999/xhtml…

前端学习笔记--CSS入门

1.css概述: 2.css语法: 3.css添加方法: 用单独的文件存储css样式的优点: 优先级: h3得到的样式是内嵌样式覆盖了外部样式. 4.css选择器标签选择器: 类别选择器: ID选择器: 嵌套标签: 集体标签: 全局声明: 混合引用:…

HTML 学习笔记 CSS样式（定位）

CSS定位(Positioning)属性允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素,另一个元素设置浏览器窗口本身的位置.显然这个功能非常强大. 另一方面,CSS1 中首次提出了浮动,它以 Netscape 在 Web 发展初期增加的一个功能为基础.浮动不完全…

HTML 学习笔记 CSS样式（边框）

元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式宽度和颜色 CSS 边框在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素.元素外边距内就是元素的的边框 (border).元素的边框就是围绕元素内容和内边据的一条或多条线.每个边框有 3 个方面:宽度.样式,以及颜色.在下面的篇幅,我们会为您详细讲解这三个方面. 边框与背景CSS 规范指出,边框绘…

HTML 学习笔记 CSS样式（框模型）

CSS框模型( Box Model)规定了元素框处理元素的内容内边距边框和外边距的方式 CSS框模型概述可以用下面的模型图概述…

HTML 学习笔记 CSS样式（简介和语法）

CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中是为了解决内容与表现分离的问题外部样式表可以极大的提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一样式解决了一个普遍存在的问题 HTML 标签原本被设计为用于定义文档内容通过使用<h1> <p> <table>这样的标签,html的初衷是表达这是标题这是段落这是表格这类的信息…

web前端学习笔记(CSS盒子的浮动)

在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. CSS中有一个float属性,默认为none,也就是标准流通常的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不在伸展,而是根据盒子里面的内容的宽度来确定. 准备基础代码浮动的性质比较复杂,这里先制作一个基础的页面,代码如下.后面一系列的实验将基于下面…

HTML 学习笔记 CSS样式（链接）

我们能够以不同的方法为链接设置样式. 设置链接的样式能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等).链接的特殊性在于能够根据它们所处的状态来设置它们的样式. 链接的四种状态 a:link-普通的未被访问的链接 a:visited-用户已经访问过的链接 a:hover 鼠标指针位于链接的上方 a:active 链接被点击的时刻 a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {…

HTML 学习笔记 CSS样式（字体）

css字体属性定义文本的字体系列大小加粗风格和变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列在css中有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")2.特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier") 指定字体系列 font-family 属性定义字体系列 body {font-…

HTML 学习笔记 CSS样式（文本）

CSS文本属性可以定义文本的外观通过文本属性您可以改变文本的颜色字符间距文本对齐装饰文本对文本进行缩进等等. 缩进文本把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css 提供了text-indent属性该属性可以方便的实现文本缩进. 通过 text-indent属性所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以为负值. 这个属性最常见的用途是将段落的首行缩进,下面的规则会是所有短路的首行缩进5em p {text-indent: 5em;} 注意:一…

前端学习笔记--css案例

要实现的案例: 1.分析布局 2.划分文件结构: 3.编写css代码 * { padding: 0; margin: 0; } body { font-size: 16px; color: burlywood; } #container { width: 900px; margin: 0 auto; } #header { height: 220px; margin-bottom: 5px; } #nav { /*导航*/ height: 40px; background-color: aqua…

前端学习笔记--CSS布局--文件流定位

1.概述 2.文档流定位:从上到下,从左到右代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0;/* 去掉默认样式*/ } #nav{…

学习笔记 css样式

大小 width:宽度 height:高度背景 background-color 背景色 background-image 背景图片 background-repeat 背景平铺方式 background-size 背景尺寸 background-position 背景位置字体 font-family 字体样式 font-size 字体大小 12px 14px font-style:italic; italic倾斜 font-weight:…

web前端学习笔记(CSS变化宽度布局)

一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按照一定的比例同时变化,还是一列固定,另一列变化.这两种都是很常用的布局方式.然而对于等比方式而言,相对比较简单,和我上一篇博客中1-2-1的布局方式非常类似,因此这里只是介绍一列固定另一列变宽的case. 在实际的应用中,只有单列宽度变化,而其它保持固定的布局可能会更加实用.一般在存在多个…

web前端学习笔记(CSS固定宽度布局)

一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>固定宽度布局</title> <style type="text/css"> #header,#pagefooter,#content { border: 1px solid red; margin:…

HTML 学习笔记 CSS样式（相对定位绝对定位）

CSS相对定位设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定位,他将出现在她所在的位置上然后可以通过设置垂直或者水平位置让这个元素相对于他的起点进行移动. 如果将top 设置为20px 那么框的位置就在顶部下方20px的地方如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动. #box_relative…

HTML 学习笔记 CSS样式（外边框外边框合并）

CSS外边距围绕在元素边框的空白区域就是外边距设置外边距会在元素外创建额外的空白设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS margin 属性 margin 属性接受任何长度单位可以是像素英寸毫米或者 em margin 可以设置为auto 更常见的做法是为外边距设置长度值下面的声明在h1元素的各个边上设置了1/4英寸的空白 h1 { margin:0.25in } 下面的例子为h1元素的思辨分别设置了不同的外边…

HTML 学习笔记 CSS样式（背景）

背景色可以使用background-color属性为元素设置背景色这个属性接受任何合法的颜色值. 可以使用background-image属性来喂元素设置背景图片. 背景重复如果需要在页面上对背景图进行平铺,可以使用background-repeat属性. 属性值repeat导致图像在水平垂直方向上都平铺,repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺.. 默认的背景图将从一个元素的左上角开始 . 背景定位.…

前端学习笔记--CSS布局--float定位

1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性案例: 一列三行布局: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">…

前端学习笔记-CSS

…

前端学习笔记--CSS布局--层定位

1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移动后: static往上移,占据box1的位置. 4.relative: box1相对于static 定位. 5.absolute: 初始位置: absolute相对于absolute移动后: 移动后: 6.一般设计方式: 案例: 区别:…

前端学习笔记--CSS布局--盒子模型

1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:…

web前端学习笔记

web前端学习笔记(CSS盒子的定位) 相对定位使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它. 使用relative,即相对定位,除了将position属性设置为relative之外,还需要指定一定的偏移量,水平方向通过left或者right属性来指定,竖直方向通过top和bottom来指定.以下为后面实验的基准代码. <html xmlns="http://w…

amazeui学习笔记--css（基本样式3）--文字排版Typography

amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块blockquote和定义列表(dl dt)注意一下 3.样式不能正常显示:拷贝过来的很多样式在博客中都不能正常显示二.文字排版Typography 目录字体字体定义字体辅助 Class Webkit 反锯齿字体相关链接元素基本样式标题 <h1> - <h6> 段落 &l…

amazeui学习笔记--css（基本样式）--样式统一Normalize

amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 2.Normalize.css:在默认的HTML元素样式上提供了跨浏览器的高度一致性. 二.样式统一Normalize 在统一浏览器默认样式上,Reset 一度非常流行,更有简单粗暴的通配符 reset : Copy * { margin: 0; padding: 0; border:0; } 时…

【前端学习笔记--CSS样式--列表和表格】的更多相关文章