百万年薪python之路 -- 前端CSS基础介绍

一. CSS介绍

CSS定义

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。

语法结构

div{
    color: green;
    backgroud-color: black;
}
选择器{css样式:演示对应的值;}

CSS的引用方式

#方式一:(内部样式表)
    head标签中写以下内容:
        
#方式二:(行内样式(内联样式))
    

        少壮不努力,老大徒伤悲.
    
#方式三:(常用的) 外部样式
    第一步: 创建一个css文件
    第二步: 在html文件中引入:
    第三步: css文件中的样式的写法:
            div{color:green;xx:xx;.....}

二. 选择器

1. 基本选择器

元素选择器:(标签名)
    p {color:"red";}
    
id选择器:按照id属性来找对应的标签
    # id属性对应的值{css属性:属性值;}
    示例:
    
    ---body部分内容----
    

    
类选择器:
    .class属性对应的值{css属性:属性值}
    示例:
        
    ---body部分内容----
    

2. 组合选择器

后代选择器

选择器 空格 子选择器{属性名:属性值;}
示例:



    
    
    



静夜思
床前明月光

    疑是地上霜
    

        举头望明月
        

            低头思故乡
        
    

诗人

    李白

儿子选择器

.c1>a{  /* c1里面的儿子a标签 (子孙a标签不受影响)*/
    color:red;
}
示例:同上

毗邻选择器

.c1+a{  /* 与c1同级的下面的a标签,上面的a标签不会受影响*/
    color:red;
}
找的是紧挨着class属性为c1的标签的下面的标签
示例:同上

弟弟选择器

.c1~p{  /* 与c1同级的下面的所有a标签,上面的a不受影响 */
    color:green;
}
示例:同上

属性选择器

通过标签的属性来找到对应的标签
写法:
    [xxx]{color:red;}   找到xxx属性的所有标签
    [xxx='p2']{color:red;}  找到有xxx属性的并且属性值为p2的所有标签
    p[title]{color:red;}    找到所有有title属性的p标签
    p[title = 'p2'] {color:red;}    找到所有有title属性的并且属性值为p2的p标签
    示例:
        
        
        
            
            
            
        
        

        
p1
        
p2
        
p3
        
        

组合选择器

写法:
    div,p{
        color:red;
    }
解释:div选择器和p选择器找到所有标签设置共同的样式.
示例:



    
    
    



div1
p1

伪类选择器

示例代码:



    
    
    



百度

伪元素选择器

first-letter:文本内容首字母设置

示例:



    
    
    



    少壮不努力,老大徒伤悲

before示例

    
    
    




    少壮不努力,老大徒伤悲

after示例

    
    
    




    少壮不努力,老大徒伤悲

CSS权重

权重越高,对应选择器的样式会被优先显示
组合选择器,各选择器的权重相加
权重不进位,11类选择器组合到一起,也没有一个id选择器的优先级大,小就是小
默认css样式是可以继承的,继承的权重为0
权重相同的选择器,谁后写的,用谁的

示例代码

    
    
    




    少壮不努力,老大徒伤悲.

    

        努力啊!兄弟!
    

ps: 特别注意的是 a标签设置样式,需要选中设置,不能继承父级标签的样式

示例代码:

    
    
    



    百度