前端之CSS-白红宇

前端之CSS

阅读量：5317 次

发布时间：2019-06-14

本文共 7345 字，大约阅读时间需要 24 分钟。

什么是CSS？

在标签上设置标签的style属性。

编写CSS的方法

一、直接在标签中写style属性。

二、在head标签中写style标签，这里就需要选择器选择所需的标签

1、id选择器，以#开头，例子如下：

    
         Title
             
     
      Treelight
     
    
     
      Alex
     
    
     
      Syvia
     
    
     
      HeMinLing

2、类选择器，以.开头

    
         Title
             
     
      Treelight
     
    
     
      Alex
     
    
     
      Syvia
     
    
     
      HeMinLing

3、标签选择器，例子如下：

    
         Title
             
     
      Treelight
     
    
     
      Alex
     
    
     
      Syvia
     
    
     
      HeMinLing
     
    Diana

4、层级选择器

5、组合选择器

6、属性选择器

优先级：

1、直接在标签中添加style属性最优。

2、在head中的style标签中，如有冲突，最后定义的属性优先。

在标签中定义多个类class="c1 c2"

7、css还可存在于文件中，然后可在html的头标签中利用link标签，示例如下：

css样式文件

.c1{
   background-color:red;}.c2{
   background-color:green;}

html文件

CSS中常用属性

一、border：设置边框的宽度、颜色、样式

二、height：标签高度，单位像素，不能使用百分比

三、width：标签宽度，单位可为像素或百分比

四、text-align:center：水平居中

五、line-height:<标签高度>：可实现垂直居中

六、color:red：字体颜色

七、font-size:num：字号

八、font-weight:bold：加粗

    
         Title
     
      Treelight

九：float:<left><right>：使得块级标签可堆叠

clear:both：使用情况如下：如果父级标签没设置高度，此时可在子级标签（设置了浮动）下加上一个样式clear:both，清除浮动，此时可撑起父级标签。

    
         Title    
     
      Treelight
     
    
     
      Alex

十、display属性：

display:inline：使得块级标签有多少占多少

display:block：使得行内标签占一行

display:inline-block：使得标签有多少占多少；可以设置高度，宽度，padding margin

display:none：使得标签消失

    
         Title    
     
      Treelight
     
    Alex

默认情况下，行内标签无法设置高度、宽度等，但以下程序使用display则可实现

    
         Title    Alex

十一、margin属性：外边距，就是标签的外边框与上一层标签之间的距离

    
         Title    
             
      
       Treelight

十二、padding属性：内边距，标签的内边框与标签内容的距离。

    
         Title    
             
      
       Treelight

写html注意事项

1、应该在最外面设置绝对宽度（像素》，然后在里面用百分比

十三、postion属性

1、fixed：另起一层，可固定在页面的一个地方

案例一：返回顶部按钮固定在右下角

    
         Document
     
     
      返回顶部

案例二：头部内容永远固定在页面的最上面

2、relative、absolute：一般一齐来用，比如一个div设置了一个position属性为relative，则此div的子div可设置属性为absolute，则子div的位置则是相对于父div的位置

案例：

    
         Title

十四、opacity：透明度，值为0-1之间

十五、z-index：层级；越大就在上面

十六、overflow：应用场景：父div中含有一个img标签，而此标签中的图片的宽、长比父div的大，则overflow设置为auto或scroll则会出现滚动条。设为hidden，则超出的范围不显示。

案例：

    
         Title

十七、hover

使用方法：在style标签中，.<classname>:hover，表示此样式，在鼠标移动到对应的classname的标签上才应用

案例：

十八、background-color：设置背景颜色

十九、background-image：url(path)：设置背景图片，默认情况下会占满整个标签。

    
         Title

二十、background-repeat:no-repeat：设置图片不重复

    
         Title

二十一、background-repeat-x background-repeat-y:no repeat：设置不在x或y方向重复

二十二、background-position-x、background-position-y：设置背景图片的位置

    
         Title

案例：用户登录框

案例：后台管理页面（左侧菜单不动，右侧的内容可动）

案例：后台管理页面（左侧菜单可随着滚动条移动）

案例：后台管理页面（左侧菜单不动，右侧的可滚动）

主要是在content中添加了overflow:auto，则此标签可流动

建议加上mini-width，则少于mini-width出现横排滚动条，防止变形。

案例：鼠标放到父标签上，其中的一个子标签可显示红色背景

案例：后台管理（用户菜单的显示和隐藏）