CSS学习日记

---

layout: post
title: CSS学习日记
subtitle: JavaWeb学习
date: 2017-11-12
author: ZL
header-img: img/css.jpg
catalog: true
tags:
- CSS
- HTML
- JavaWeb

---

CSS学习日记

相关概念

• CSS：Cascading Style Seets层叠样式表
• div：HTML标签独立一行结合CSS使用
• Span：HTML标签，不独立行，结合CSS使用

语法规范

选择器{
  属性名：属性值;
  属性名：属性值;
  属性名：属性值;
}

引入方式

1. 行内引入

    
    


    

        1234567890
    

2. 内部引入

    
    
    


    

        1234567890
    

3. 外部引入

    
    
    


    

        1234567890
    

css选择器

通过选择器选择到想要的位置进行属性设置

id选择器是具体的选择

元素选择器和类选择器都是多选

• ID选择器

#id属性名{
  属性名1:属性值1;
  属性名2:属性值2;
  属性名3:属性值3;
}

    
    

    


    

        1234567890
    
    

        ancdefghijk
    

• 元素选择器

元素名{
  属性名1:属性值1;
  属性名2:属性值2;
  属性名3:属性值3;
}

    
    

    


    

        1234567890
        
yyyyyyyyyyyyyyyyyyyyyyyy
    
    
xxxxxxxxxxxxxxxxxx

• 类选择器

.类名{
  属性名1:属性值1;
  属性名2:属性值2;
  属性名3:属性值3;
}

    
        
        
        
    
    
        

            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
        
        

            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
        
        

            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
        
        

            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
        
        

            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
        
    

• 层级选择器

  

  css层级选择器

• 属性选择器

  

  CSS属性选择器

PS

• 清除浮动

  clear：both；

• 去掉超链接的下划线

  a{
  text-decoration:none;
  }

• 让快级元素成为内联元素

  display：inline

• 让div居中

  margin：auto

• 快级元素内容居中

  text-align：center

border，padding，margin

border：边框的宽度
padding：内容距离外框的距离
margin：外框距离外外框的距离