CSS学习笔记1

前端学习之页面设计的外衣——CSS学习记录。

一、CSS引用方式

        之前学习了HTML5的创建使用方法，我们可以设置简单的表格，用户注册表单，以及新闻报道页面，但实际中我们所见的这些”数据“往往都是经过加工修饰过的。这正是使用CSS来进行了美化的，那么CSS如何使用呢？

1、行内引入

可以在HTML5所有的标签内直接加入关键字 style 来引入。例：

案例1：（设置文本输入框的基本样式）

效果图：（左边为初始化的标签效果，右图为行内引入CSS样式的效果图）

2、内部引入

为了前期基础学习，简化HTML部分代码的负荷却达到美化页面的效果，常常使用内部样式引入。

       

案例2：（设置）

效果图：

3、外部引入

归纳总结：CSS的引入方式具有优先级，即行内>内部>外部，也就是说，它的执行效果只显示优先级最高的样式。

二、CSS选择器

这里介绍了常用的12中选择器。

1、通用选择器

2、id选择器

3、class（类选择器）

4、分组/并集选择器

5、交集/限定类选择器

6、元素选择器

7、后代选择器

8、子选择器

9、相邻兄弟选择器

10、兄弟选择器

11、属性选择器

12、伪类选择器

    
    
    
    
    

    


    

        变粗体
        
我是一个段落
    



    

        我是一个盒子
    



    

        

            
开心
            
你开心
            
我最开心
        
    



    

        
我是大标题
        
我是小标题
    



    

        百度
    



    

        
            
我是子元素选择器效果
            
我也想是子元素选择器的效果
            搜狐
        
    



    

        挨我最近那个是我兄弟
            
我才是真正的相邻兄弟选择器
            
对，我是假的


        我一家有很多紫色的姐妹
        
我是姐姐
        
我是二姐
        
我是妹妹
        
    



    

        
            
大猪头
            
二锅头
        
        
三把头
    

    

        百度
        谷歌
        搜狐
    

    

        
悬停到这试试
    

    

        
段落1   
        
段落2   
        
段落3
        
段落4
    

注：这个CSS样式均在head标签之中，但实际开发过程中，CSS部分代码都是存在一个CSS文件夹下，然后在HTML页面使用外部引用CSS。

---

总结

CSS最基本的操作便是引入与选择器的使用，其中选择器是为了引入部分更快速的找到需要设定的元素样式，虽然简单但也是很重要也必须掌握的部分。