CSS书写位置、选择器、文本样式、背景样式、元素类型、输入标签样式、列表标签、盒子模型、定位

本文链接：https://blog.csdn.net/weixin_60414118/article/details/131709620

CSS基础

中文名:层叠样式表
作用:美化html标签,包含但不限于对标签的文本,背景,大小,位置等样式的设置

书写位置:

    1.在标签的style中书写,称为内联样式,不建议使用
    2.在head标签中书写style标签,在style中书写css代码
    3.css文件中书写css代码,通过link标签对其进行引入

选择器:

基本选择器:
        统配选择器
            给所有的标签都设置样式
            *{}
            
    标签选择器
        给标签名为XXX的标签设置样式
        标签名{}

    class选择器
        给标签class属性值为xxx设置样式
        .class{}

    id选择器
        给标签id属性为xxx设置样式
        #id{}

    高级选择器:
        伪类选择器
            鼠标悬浮
            选择器:hover{}

            获取焦点
            选择器:focus{}
            
        子代选择器
            给指定的标签中的标签设置格式
            父选择器 子选择器{}
            
            父选择器>子选择器{}
            
        属性选择器
            给有指定的属性的标签设置样式
            选择器[属性名= 属性值]{}

选择器优先级

原因:因为多个选择器可以给同一个标签设置样式,当多个选择器设置的样式有冲突,听谁的
    情况1:选择器优先级不同时
        谁优先级高听谁的
        基本选择器的优先级: 通配<标签<class<id<内联样式  
    情况2:选择器优先级相同时,谁在后听谁的

文本样式:

作用:给文本设置样式

    颜色: color 
        系统提供的颜色的英文单词
        六位调色进行调色(原理:光的三原色) 语法 #FF0000(红)  #00FF00(绿)  #FFF000(黄)
        RGB函数  语法 rgb(红色,绿色,蓝色)   每个颜色取值0-255
        RGBA函数   语法rgba(红色,绿色,蓝色,透明度)  透明度0-1

    字体:
        font-family:+隶书.....
            italic斜体
            normal:取消字体斜体

    样式:
        font-style : italic  斜体
    
    大小
        font-size

    笔画粗细
        font-weight

    装饰线
        text-decoration: underline  下划线
        text-decoration: none  取消装饰线
    
    文本位置
        text-align:left/right/center

    行高
        line-heigher:

背景样式

作用:给标签设置背景

背景颜色:background-color;

背景图片:background-image:url(图片地址);

背景大小:background-size:auto(背景宽度) 100%(背景高度);

背景是否平铺:background-repeat: repeat
                no-repeat;

背景位置:background-position:right/left/center/百分数/像素  top/百分数;

元素类型

分类
    行内元素
        设置宽高无效,标签的大小,取决于其中的内容
        span,font,b,a,i...
    行内块元素
        设置宽高有效,但不独占一行
        inout,img...
    块元素
        设置宽高有效,但独占一行
        h1-h6,div...

    Display属性:
        作用:可以修改标签的元素类型
        值:inline行内元素  inline-block行内块元素   block块元素

输入标签样式

outline: none;//取消输入标签获取焦点时显示的阴影

列表标签

list-style-type: none;//取消列表前缀

盒子模型

概念:设置标签的大小

定位

作用:设定标签的位置

属性:position

常用的定位

1.浏览器窗口定位:fixed
    配合的属性:
        left//标签距离浏览器可视化窗口左边的距离
        right
        top/标签距离浏览器可视化窗口顶部的距离
        bottom
        z-index//层级,取值-99~99,默认一般为0
        注意:left和right,top和bottom不要同时使用
        参开位置:浏览器可视化窗口的位置
        特点:不会保留标签原位置,会影响其他标签的位置
2.相对定位:relative
    配合的属性:
        left//标签距离浏览器可视化窗口原位置左边的距离
        right
        top
        bottom
        z-index
    参考位置:标签的原位置
    注意:left和right,top和bottom不要同时使用
    left正值向右负值向左,其他同理
    特点:会保留标签的原位置,不会影响其他标签的位置
3.绝对定位:absolute
    配合的属性:
        left:标签距离上层最近做过定位的父类容器左边的距离
        right
        top
        bottom
        z-index
    参考位置:上层最近做过定位的父容器的位置
    特点:不会保留标签原位置,会影响其他标签的位置
    经验:
        在标签原位置的基础上,稍微进行移动,使用相对定位
            想将标签移动到其父容器的某个位置,使用绝对定位