CSS快速入门(做java后端的进来看看)

清疚 2021-07-24 23:56 322阅读 0赞

# CSS #

## 概念 ##

层叠样式表

*  层叠,多个样式可以作用在同一个html的元素上

好处:

*  功能强大
 *  将内容的展示和样式的控制分离:减低耦合度,让分工更容易,提高工作效率

# CSS的使用: #

## CSS和html的结合方式 ##

三种方式:

*  内联样式表

在标签内使用style属性指定css代码

<div style="color";>hello world</div>

*  在head标签内,定义style标签,style标签的标签体内容就是css代码

<head>
    	<style> div{ color:bule } </style>
    </head>

*  外部样式表:
    
     *  1.在css中定义资源文件
     *  2.在head标签中,定义link标签来引入外部的资源文件

总结:

*  1,2,3,的作用范围越来越大
 *  1方式不常用,常用的是方式2,3

还有一种不常见的外部样式表的写法:

在head标签中定义一个style标签,在style标签中导入css的文件

<head>
    	<style> @import "a.css"; </style>
    </head>

## CSS的语法: ##

### 格式: ###

选择器{
      属性名1:属性值1;
      属性名2:属性值2;
      ...:...;
    }

什么是**选择器**:(注意分号)

筛选具有相似特征的元素

#### 选择器的分类 ####

*  基本选择器
    
     *  id选择器:选择具体id属性值(建议在同一个html中id值唯一)
    
        #id{
          
        }
    
    
    
     *  元素选择器:选择具有相同标签名称的元素
    
        标签名称{
          
        }
    
    **注意**:id选择器的优先级高于标签选择器的优先级
    
        .class属性名{
          
        }
    
    注意:类选择器的优先值高于id选择器,id选择器高于标签选择器
 *  扩展选择器
    
     *  选择所有元素:
        
            *{
              
            }
     *  并集选择器(表示了同时选择多个标签的情况)
        
            选择器1,选择器2{
              
            }
     *  子选择器(选择选择器1下的选择器2)
        
            选择器1 选择器2{
              
            }
     *  父选择器(筛选选择器2的父元素选择器1的元素)
        
            选择器1>选择器2{
              
            }
     *  属性选择器:选择元素名称,属性名=属性值的元素(一般用来选择input类型的标签)
        
            元素名称[属性名="属性值"]{
              
            }
     *  伪类选择器:选择一些元素具有的状态
        
         *  \* link:初始状态 \* visited:被访问过之后 \* active:正在访问状态(鼠标按住不松开) \* hover:鼠标悬停状态
        
            元素:状态{
              
            }
             a:link{
              color:red;
            }

### 属性 ###

#### 1.字体,文本 ####

*  fort-size:字体大小
 *  color:颜色
 *  text-align:对其方式
 *  line-height:行高(非字体的高度)

#### 2.背景 ####

*  background
    
     *  假设设置一个div的背景,先选择这个div然后设置
    
        div{
          bcakground:url("路径") no-repeat center;
        }

#### 3.边框 ####

*  border:边框属性(这是一个复合属性,可以单独设置上下左右边框的属性)

#### 4.尺寸 ####

*  width:宽度
 *  height:高度

#### 5.盒子模型:主要是用来控制布局 ####

*  padding:内边距
 *  margin:外边距

核心就是确定:你的核心是谁(你的第一视角是针对谁的)