HTML学习笔记

CSS的常用属性

1.背景

CSS的背景属性用于定义HTML元素的背景效果。

1.1. background-color

设置元素的背景颜色

body {
    background-color :#ff0000 ;
}

1.2. background-image

设置元素的背景图像，默认情况下，背景图像进行平铺重复显示,以覆盖整个元素实体。

body {
    background- image :url( ' paper .gif');
}

1.3. background-repeat

设置是否及如何重复背景图像

body {
   background- image: ur1(img/logo.jpg);
   background- repeat: no- repeat;
}

2.文本

2.1.color

body {
    color :blue;
}
h1 {
    color :#00ff00;
}
h2 {
  color:rgb(255, 0, 0)；
}

2.2.text-align 

设置文本对齐方式，center (居中)，left (左对齐)，right (右对齐)

body {
    text-align:center ;
}
h1 {
    text-align:right;
}
h2 {
    text-align:right;
 }

 2.3.text-decoration

规定添加到文本的修饰，属性值: none. underine. overline. line through
1) underline
对文本添加下划线，与HTML的u元素相同。
2) overline
对文本添加上划线。
3) line-through
对文本添加中划线，与HTML 中的s和strike元素相同。
4）none 

关闭原本应用到元素上的所有装饰。 

h3 {
    text-decoration :underline;
}

2.4.text-indent

设置文本首行缩进 

p. ident2 {
    text- indent: 2em ;
}

em一个相对值，例如页面的文本大小为17px，则2em就为17px*2 

3.字体

3.1.font-family

文本字体，该属性设置文本的字体

4.对齐方式

text-align规定元素中的文本的水平对齐方式。

属性值如下:
left
把文本排列到左边。默认值:由浏览器决定。
right
把文本排列到右边。
center
把文本排列到中间。
justify
实现两端对齐文本效果。
inherit
规定应该从父元素继承tex-align属性的值。

注意:
值justily可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔，使各行的长度恰好相等。对最后一行不生效。

5.display属性

display属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。
none
此元素不会被显示。
block
此元素将显示为块级元素，此元素前后会带有换行符。
inline
默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block
行内块元素。(CSS2.1 新增的值)
list-item
此元素会作为列表显示

6浮动

float的属性值有none、left、 right

1.只有横向浮动，并没有纵向浮动。
2.会将元素的display属性变更为block.
3.浮动元素的后一个元素会围绕着浮动元素(典型运用是文字围绕图片)
4.浮动元素的前一个元素不会受到任何影响(如果你想让两个块状元素并排显示，必须让两个块状元素都应用float)。

7.盒子模型

border. padding. margin三个属性构成了盒子模型。

 7.1.border

设置所有的边框属性。
1)可同时设置边框的宽度、样式、颜色

table,th, td {
     border: 1px solid black;
}
table {
    width:100%; height :50px;
}

 2)使用border-width、 border-style. border-color单独设置

table,td {
     border-width: 1px;
     border-style: dotted;
     border-color: green;
}

3)border-style的属性

none：默认无边框
4）border-collapse
 设置是否将表格边框折叠为单一边框。
属性值: separate (默认，单元格边框独立)、collapse (单元格边框合并)

 

table {
    border-collapse : collapse ;
}

 7.2.padding

设置元素所有内边距的宽度，或者设置各边上内边距的宠度。
如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性:

td {
     padding:15px;
}

单独设置各边的内边距: padding-top. padding-left. padding-bottom. padding-ight
默认按照上右下左的顺序设定

td .test1 {
        padding: 1. 5cm
}
td . test2 {
      padding: 0. 5cm 2. 5cm
}

注意:通过padding属性设置元素内边距时，会使元素变形。若不想影响格式效果，可以用margin属性设置元素外边距。

7.3.margin

p.margin {
      margin: 2px 4px 3px 4px;
}

单独设置各边的外边距: margin-top. margin-left. margin-bottom. margin-right
 

p.margin{
      margin-top:1 00px;
      margin- bot tom:100px;
      margin- right : 50px;
      margin-left: 50px;
}
*{
      margin: auto auto ;
}
*{
      margin:100px auto;
}

说明:
auto:自动，可以理解为居中的意思。浏览器自动计算外边距。
margin: auto auto:第一个auto表示 上下外边距自动计算,第二个auto表示左右外边距自动计算。
但是.上下外边距在自动计算时不会生效，而左右外边距会生效,表现为居中状态,效果如下:

 若要设置为上下左右居中状态，则要计算好自行设置上下的外边距,效果如下:

 

 注意:此时使用margin-top不生效。了解就好