关于一些html和css2的知识点

前端开大语言三种:1)HTML(hypertext markup language)结构2)css(Cascading Style Sheets)样式  3)js(Javascript)行为  脚本语言

属性:属性值  用来描述标签的一些特征的关键词

 

关于css样式的引入方式 一共有三种

1)行间样式表(写在标签的开始标记上)

2)内部样式  写在<style></style>标签之间

3)外部样式表  用<link>标签引入

关于盒模型的一些属性

overflow属性

属性值

visible  默认值,内容不会被修剪,会呈现在元素框之外

hidden  内容会被修剪,并且其余内容是不可见的

scroll  内容会被修剪但是浏览器会显示滚动条以便查看其余的内容

auto  如果内容被修剪,则浏览器会显示滚动条,以便查看其余的内容.

inhert规定应该从父元素继承overflow属性值.

 

margin属性  外边距

margin是可以设置负值的

外边距:margin(也是一个复合属性)可以跟一个值,两个值,三个值,四个值

顺序是   margin-top,margin-right,margin-bottom,margin-left

 

关于margin有两个常见的问题

1.上下边距重叠问题

两个上下相邻的元素,如果上个元素设置了margin-bottom,下面的元素设置了margin-top,并不会将两个值加起来,而是取其中较大的

的值进行显示

2.当两个元素为父子关系时(嵌套),给子元素添加(margin-top)值得时候,该值会传递父级.

关于对这个问题的解决方案有五种

1)给父级添加overflow:hidden

2)给父级增加border:1px solid transparent(这是一个透明色);

3)给父级增加display:inline-block;

4)给父级position:absolute;

5)给父级增加padding-top:1px;

border边框的属性

border-style属性值:

none:定义无边框

hidden 与"none相同",不过用于表示除外,对于表hidden解决了边框冲突

dotted定义点状边框.在大多数浏览器中呈现为实线

dashed定义虚线.在大多数浏览器中呈现为实线

double定义为双线.双线的 宽度等于boder-width的值

groove定义3d凹槽边框吗,取决于boder-color

另外还有  ridge3d垄状边框。其效果取决于 border-color 的值。

inset 定义 3D inset 边框。其效果取决于 border-color 的值。

outset 定义 3D outset 边框。其效果取决于 border-color 的值。

inherit 规定应该从父元素继承边框样式。

 

关于文本的一些设置

 

font-size:字体大小  一般为偶数,单位px, em, rem

 

网页中颜色的设置

用英文单词作为属性值,也可以用rgb(),rgba()和十六进制色彩值表示

 

属性值

值 描述

xx-small

x-small

small

medium

large

x-large

xx-large

把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。

默认值：medium。

smaller 把 font-size 设置为比父元素更小的尺寸。

larger 把 font-size 设置为比父元素更大的尺寸。

length 把 font-size 设置为一个固定的值。

% 把 font-size 设置为基于父元素的一个百分比值。

inherit 规定应该从父元素继承字体尺寸。

 

color设置文本的字体颜色

 

color_name 规定颜色值为颜色名称的颜色（比如 red）。

hex_number 规定颜色值为十六进制值的颜色（比如 #ff0000）。

rgb_number 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。

inherit 规定应该从父元素继承颜色。

 text-align文字对齐方式

left把文本排列在左边.默认值:由浏览器决定.

right 把文本排列到右边

center 把文本排列在中间

justify实现两端对齐的文本对齐文本效果

inherit规定应该从父元素继承 text-align属性值

font-weight文字着重

 

 

normal 默认值。定义标准的字符。

 

bold 定义粗体字符。

 

bolder 定义更粗的字符。

 

lighter 定义更细的字符。

 

100

 

200

 

300

 

400

 

500

 

600

 

700

 

800

 

900

 

定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

 

inherit 规定应该从父元素继承字体的粗细

 

text-decoration文本修饰

 

none 默认.定义标准的文本.

underline 定义文本下的线

overline定义文本的上的一条线

lin-through 定义穿过文本下的一条线

blink 思念故意闪烁的文本

inherit规定应该懂父元素继承text-decoration属性的值

 

word-spacing单词间距(有空格为解析单位)

normal 默认。定义单词间的标准空间。

length 定义单词间的固定空间。

inherit 规定应该从父元素继承 word-spacing 属性的值。

 

letter-spacing  字符间距

 

font-family字体(通常中文默认是宋体)

line-height行高

text-indent首行缩进(em缩进字符)

font-style 文字样式

normal 默认值。浏览器显示一个标准的字体样式。

italic 浏览器会显示一个斜体的字体样式。

oblique 浏览器会显示一个倾斜的字体样式。

inherit 规定应该从父元素继承字体样式。