前端CSS (二)

目录

 

常见属性

字体属性：

颜色和背景属性：

文本属性：

边框属性：

项目符号和编号属性：

块元素与内联元素：

内联元素

常见内联元素

常见块元素

块元素与内联元素相互转换

浮动：

为什么要有浮动

容器嵌套浮动

块属性：

层属性：

---

常见属性

字体属性：

字体属性的功能是设置页面字体的显示样式

• font-family 设置使用的字体
• font-style 设置字体的样式，是否斜体
• font-variant 设置字体的大小写
• font-weight 设置字体的粗细
• font-size 设置字体的大小

        

颜色和背景属性：

颜色和背景属性的功能是设置页面元素的颜色和背景颜色

color 设置元素前景色

         

background-color 设置元素背景色

        

background-imge 设置元素背景图案

         

background-repeat 设置背景图案的重复方式

           

background-position 设置背景图案的初始位置

         

background-size 设置背景大小

         

文本属性：

文本属性的功能是设置页面的显示效果

text-align 设置文本的对齐方式

          

text-indent 设置文本的首行缩进：

             

line-height 设置文本的行高：

         

a:link 设置链接未访问的状态

a:visited 设置链接访问过的的状态 

a:hover 设置链接的鼠标激活状态

          

边框属性：

 边框属性是设置页面内边框元素的显示效果

               

项目符号和编号属性：

设置页面内项目符号和编号元素的显示效果

          

块元素与内联元素：

内联元素

不会自己独立占一行，就好像一个单词，一直往后排

特点：宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变

          

常见内联元素

a    big   br   em   img  input   label   selelct   span   textarea

块元素：自己单独占一行，就像一个段落

常见块元素

ul  li  form  h1-h6  hr  p  div

块元素与内联元素相互转换

把内联元素转成块元素：display:block  -- 显示为块级元素

            

把块元转成内联元素

display:inline  -- 显示为内联元素

转为内联块元素

dipslay:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

浮动：

为什么要有浮动

两个块级元素都设置了宽度和高度，两个想要占一行，就使用浮动，来进行设置

                

设置浮动后效果

            

两者都要浮动，才能才一行。

容器嵌套浮动

如果有嵌套，浮动相对的就是父元素，没有父元素，浮动相对的就是浏览器窗口

                  

块属性：

margin：

两个容器之间的距离称为margin

    从边框开始往外的距离

padding：

        从边框开始往里的距离

设置padding会增加宽，高，不想增加的话，要加上box-sizing: border-box;

容器内部的边距称为padding

margin-top 设置顶边距

                        

margin-right 设置右边距

                    

padding-top 设置顶端填充距

                       

padding-right  设置右侧填充距

                           

层属性：

一个容器可以嵌套另一个容器

设置页面内元素的定位方：

Relative 设置相当定位

Absolute  设置绝对定位