笔记4

来源：互联网发布：js组件开发设计编辑：程序博客网时间：2024/06/10 07:21

5.2table的布局

页面的布局可以通过table来实现，一个单元格就是一个布局区域单位。该单元区域的大小可以通过height和width来实现，每一个但与格斗需要进行独立的编写和修改。当需要单元格合并时，就可以结合rowspan和colspan这两个属性来完成。

如果布局比较复杂的时候，可以使用table的嵌套来完成

table表格中布局就是页面的一个整体上的结构，从上往下，从做往右，对页面进行整体规划，一般来说每一行的高度是一致的。

table一般用于政府网站或者老式网页的布局。优势在于容易编写，但缺点比较大，因为代码较多的原因，读取较慢，且不方便维护和修改。

6.div

6.1写法

div的显示有一个特点，它会在新的一行进行显示，是一个块级标签，跟<p>标签极其相似。

块级标签会占满一整行，而内联标签则会从左至右依次排列。

7.标签的总结

块级标签的特点是会在新的一行进行显示，内联标签则相反，不会另起一行，重新显示。

块级标签有div，h1~h6，p，hr，ul，ol，dl，tr，option，caption，dd，dl...li

内联标签有img，input，a，td，textarea，span，label，select，button....

内联标签一般情况下不能嵌套块级标签

CSS基础知识

1.基本概念

· CSS 指层叠样式表 (Cascading Style Sheets)

2.为什么要用css

HTML描述了要呈现的内容，而css则定义了这写内容的呈现形式，比如字体、颜色等。使用css能够将页面内容和呈现的行势有效的分离，有利于分工合作，也有利于快速更换不同的呈现形式。

内连样式的有效优先级要高于内部样式的有效优先级。

使用样式表可以有三种样式

（1）内联样式

<pstyle="font-size:24px;color:green">内联样式的演示</p>

将样式定义在style属性中，内部和表现形式耦合，不利于维护，分工合作变的困难

（2）内部样式

</head>
<table></table>
<style>
    p{
        font-size:36px;
        color:red;
    }
</style>

<body>

<p>内部样式的演示1</p>
<p>内部样式的演示2</p>

在<head>标签中通过<style>标签来定义

内容和表现形式的耦合程度降低了，但是都还在html文件中，没有实现完全分离

定义的样式只能在当前页面中使用

（3）外部样式表

首先定义一个css文件

p{
font-size:36px;
color:red;
}

接下来再将其引用到需要使用该样式的html文件中

<linkrel="stylesheet"type="text/css"href="css/E101-01-01.css">

外部样式的引用能够使所需内容和表现的形式彻底分离开，有利于分工合作及维护。可以在多个HTML文件中引用

1.2颜色

所有的颜色都可以由红色（red）、绿色（green）和蓝色（blue）三种无法被还原出来的颜色调配而成，这三种颜色俗称三原色。

在CSS中用8个位数表示一种颜色，即可以表示出2⁸种颜色，也就是256种颜色。所以总共可以表示的颜色有256*256*256种。

在CSS中有多种颜色的表示形式：

（1）十六进制：

<pstyle="color:#800000">十六进制颜色</p>

（2）RGB颜色

<pstyle="color:RGB(255,0,0)">十六进制颜色</p>

（3）透明度颜色RGBA：在RGB颜色的基础上增加了透明度分量（Alpha），取值在0（完全透明）~1.0（完全不透明）之间。

<pstyle="color:RGBA(255,0,0,0.5)">RGBA颜色</p>

（4）HSL颜色：在RGB颜色之外，还有一种由色调、饱和度和明度三个分量构成的颜色

<pstyle="color:HSL(255,50%,50%)">HSL颜色</p>

（5）HSLA颜色：同RGBA类似，在HSL基础上加入透明度分量Alpha

<pstyle="color:HSLA(255,50%,50%,0.4)">HSL颜色</p>

（6）预定义颜色：由CSS提供，直接输入该颜色的英文就可以得到

<pstyle="color:red">颜色</p>

1.3尺寸单位

常见的单位：

cm：厘米

mm：毫米

in：英寸（inch）

px：像素（pixel）

%：百分比

em：相对长度单位，相对于当前对象内文本的字体尺寸

vw:相对于视口的宽度

vh:相对于视口的高度

px:绝对单位，%：相对单位

2.1字体相关属性

font-family：字体名称

font-size：字体大小

font-style：字形（斜体等）

font-variant：字体变化（如大写）

font-weight：字体粗细

可以简写，书写顺序

font-style font-variant font-weight font-size font-family

前面三个属性可以省略使用默认的数值，后两个属性必须需设置，这样比较方便

2.2文本相关属性

主要包括了颜色、对齐方式、修饰效果等。

color：颜色，前景色

none：默认没有装饰效果

text-decoration 文字的修饰

nuderline：文字下划线

line-through：删除线

overline：文字上划线

text-shadow：增加阴影，比如text-shadow: -5px 5px yellow的含义就是定义一个黄色的背影，其水平方向向左移5px，垂直方向向下移5px

direction：文字对齐方向

ltr：从左往右；rtl：从右往左

text-align：水平对齐方式

left左对齐

right 右对齐

center：居中对齐

justify：两端对齐

vertical-align: 垂直对齐方式

top：靠上对齐

bottom：靠下对齐

middle：垂直居中对齐

text-indent：文本的缩进

letter-spacing：字符的间距

word-spacing：字（单词）的间距

line-height：设置行高，实际上是调整行间距

阅读全文

1 0