前端Day09笔记

一、什么是css？
    层叠样式表，用来美化html，例如美化结构的颜色、大小、位置、动画......
    
二、css样式的引入模式
    1.行内样式
        1）什么是行内样式？
            就是将css写入html的标签中，作为标签属性style的属性值，样式的结构是key：value的形式，例如style="color:red;font-size:16px;"
        2）代码演示
            <h1 style="color:red;font-size: 60px;">我是一个标题</h1>
        3）行内样式的缺点
            a.行内样式和html结构写在一起，可能会导致整个页面极其混乱
            b.行内样式只能对单个标签起作用（不能复用），相同的样式需要反复的书写
        4）行内样式的优点
            对于简单的样式书写方便
    2.内嵌样式
        1）什么是内嵌样式
            书写在style标签中（style标签可以存放在任意位置，但基本上会把这个标签放到head里面
        2）代码演示
            <style>
                h1{color: red;font-size: 50px;}
                p{color: blue;font-size: 60px;}
            </style>
            注释：
                h1选择器
                {}样式代码块
                color:样式属性
                red:样式值
                选择器：选中你要修改样式的标签
        3）优缺点
            优点：css样式和html结构分离，方便后期维护
    3.外联样式
        1）什么是外联样式
            创建一个以css后缀结尾的文件，将css样式写入这个文件中，然后在html所在的文件中新建一个link标签，将css文件关联到该html文件中
        2）代码演示
            在当前工作路径下先新建一个index.css文件
            link标签引入：
            <link rel="stylesheet" href="./index.css">
            注释：
                link标签用于引入外部资源
                rel="stylesheet"表示当前link标签关联的是一个样式表（样式文件）
                href 文件的路径
        3）优缺点
            优点：结构和样式彻底分离成两个文件，并且可以复用，在实际开发中，这种写法最多
            
三、基础选择器
    1.什么是选择器？
        选中对应的标签来修改样式
        
    2.标签选择器
        1）结构：标签名{css}
        2）作用：通过标签名找到页面中所有这一类标签，设置样式
        3）注意点：
            a.找的是一类标签，不能单独找到某一个
            b.标签选择器无论嵌套关系有多深，都能找到对应的标签
            
    3.类选择器
        1）结构：.类名{css}
        2）作用：    找到页面中所有带有该类名的标签设置样式
        3）注意点：
            a.所有的标签都有class属性，class属性的属性值就叫做类名
            
            b.一个类选择器可以选中多个标签
            c.一个标签可以有多个类名,类名之间可以通过空格隔开
            d.类名的命名规则：不能以数字或中划线开头，由数字、字母、下划线、中划线组成，取名要有意义
            
    4.id选择器
        1）结构：#id属性值{css}
        2）作用：找到页面中带有该id属性值的标签，设置样式
        3）注意点：
            a.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！！！
            b.一个标签上只能有一个id属性值
            c.一个id选择器只能选中一个标签（一对一）
        
四、继承
    有一些样式，父元素(标签)设置该样式以后，子元素(标签)会进行继承。如果说子元素本身自己设置了该样式，那它会先使用自己的样式，如果本身没有就会去继承父元素的样式，例如color,font-size这两个属性是会继承给子元素的css样式非常多,我们再用的时候如果不确定继承还是不继承的前提，边用边看，如果继承了，但不希望继承那就改子元素单独的样式
    
五、选择器的优先级
    1.选择器生效的样式具有优先级顺序
    2.优先级权重公式：
        标签选择器<类选择器<id选择器<行内样式<！important
    3.比较方法：
        相同的样式发生冲突，优先使用权重靠前的那个，如果权重相同，写在最后的样式会生效
        
六、简单样式介绍
    1.background-color
        背景色，取值为颜色（具体颜色的英文表达、十六进制、rgb、rgba）
    2.width
        固定宽度，取值为像素单位
    3.height
        固定高度，取值为像素单位
    4.min-width
        最小宽度，取值为像素单位，当前元素宽度不能小于设定值
    5.min-height
        最小高度，取值为像素单位，如果说内容超出了设定值 自动被内容撑高
    6.max-width
        最大宽度，取值为像素单位，当前元素的宽度不能大于设定值
    7.max-height
        最大高度，取值为像素单位，如果说内容低于设定值，内容有多高当前元素就多高，如果说超出当前高度也不会再变高了
    8.color
        颜色属性，取值为：rbg、rgba、十六进制、颜色的英文表示
        
七、元素的显示模式
    1.块级元素
        1）特点：
            a.元素默认占据一行
            b.元素宽高有效
        2）标签举例：
            h1-h6  div p ul li ol li...
    2.行内元素（行元素、内联元素）
        1）特点：
            a.元素不会占据一行
            b.元素宽高是无效的
        2）标签举例：
            strong em span a ..
    3.行内块元素   img input button...
        1）特点：
            a.宽高有效
            b.元素不会占一行
        2）标签举例：
            img input button...