python学习笔记-前端基础-css

CSS（Cascading Style Sheet）

层叠样式表，它是用来美化页面的一种语言

CSS选择器

css选择器是用来选择标签的，选出来以后给标签加样式

css选择器的种类
* 标签选择器
* 类选择器
* 层级选择器（后代选择器）
* id选择器
* 组选择器
* 伪类选择器

标签选择器、类选择器、层级选择器

    
    
    

    



    
    
hello world
    
i am liven

    
    
 类选择器
    
类选择器，样式可以叠加

    
     
    
    

        
哈哈哈
    
    
哈哈哈

id 选择器

id 选择器：根据id选择标签，以#开头，元素的id名称不能重复，
所以id选择器只能对应于页面上一个元素，不能复用。id名一般给程序使用，
所以不推荐使用id作为选择器

这是一个段落标签 
这是第二个段落标签
这是第三个段落标签

组选择器

根据组合的选择器选择不同的标签，以，分割开，如果有公共的样式设置，可以使用组选择器

   
   
   
这是第一个
   
这是第二个
   
这是第三个

伪类选择器

伪类选择器就是给其他选择器``添加特殊的效果，表现形式：选择器后面加上冒号再跟上伪类的名字

  哈哈哈

CSS属性

布局常用样式属性

    
    
    

    



    
    哈哈哈

    
    

        

        

    

文本常用样式属性

    
    
    

    



    
     
我是会变色的大力

CSS元素溢出

当子元素（标签）的尺寸超过父元素的尺寸时，此时需要设置父元素显示溢出子元素的方式，设置的方法是通过overflow属性来完成的
overflow的设置项：
visible： 默认值，显示子标签溢出的部分
hidden：隐藏子标签溢出的部分
auto：如果子标签溢出，则可以滚动查看其余的内容

    
    
    

    





   

       
123456
   

CSS 显示特性

display 属性是用来设置元素的类型及隐藏的，常用的属性有：
none：元素隐藏并且不占位置
inline：元素以行内元素显示
block：元素以块元素显示(与div类似，自己独占一行)

    
    
    

    



 

    
第一个
    
第二个
    百度
    百度

CSS盒子模式

所谓的盒子模式就是把HTML页面的元素看做一个矩形盒子，矩形盒子是有内容（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成

盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

CSS的三种引入方式

（1）行内式

直接在标签的style属性中添加css样式

helloworld

优点：方便、直观
缺点：缺乏可重用性

（2）内嵌式（内部样式）

在标签内加入 优点：在同一个页面内部便于复用和维护 缺点：在多个页面之间的可重用性不高

（3）外链式

将css代码写在一个单独的.css文件中，在标签中使用标签直接引入该文件到页面中

    
    
    

    




优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。
缺点：css代码由于分离到单独的css文件，容易出现css过于集中，若维护不当则极容易造成混乱