前端开大语言三种: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 的值。
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 21.0px Helvetica }
span.Apple-tab-span { white-space: pre }
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
关于文本的一些设置
font-size:字体大小 一般为偶数,单位px, em, rem
网页中颜色的设置
用英文单词作为属性值,也可以用rgb(),rgba()和十六进制色彩值表示
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 21.0px Tahoma }
span.Apple-tab-span { white-space: pre }
属性值
值 描述
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设置文本的字体颜色
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 21.0px Tahoma }
span.Apple-tab-span { white-space: pre }
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文字着重
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 21.0px Tahoma }
span.Apple-tab-span { white-space: pre }
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单词间距(有空格为解析单位)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 21.0px Tahoma }
span.Apple-tab-span { white-space: pre }
normal 默认。定义单词间的标准空间。
length 定义单词间的固定空间。
inherit 规定应该从父元素继承 word-spacing 属性的值。
letter-spacing 字符间距
font-family字体(通常中文默认是宋体)
line-height行高
text-indent首行缩进(em缩进字符)
font-style 文字样式
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 21.0px Tahoma }
span.Apple-tab-span { white-space: pre }
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 21.0px Helvetica }