526互联

css基础

发布时间 2023-09-11 18:26:40作者: RepublicLine

CSS引用

如何在html中使用css?有三种方式

  • 外链式 通过在head标签里 使用link引入写好的css文件(推荐使用)
  • 内嵌式 head标签里style标签 ,在style里通过
  • 行内式 写在标签的开始位置通过style属性设置样式(不推荐使用)

选择器

选择器分为三大类:
基本选择器
复合选择器
伪类选择器

基本选择器
基本选择器 id选择器 类选择器 标签选择器 通配符选择器
权重 > > > >
语法 #id值{属性:属性值} .类名{属性:属性值} 标签名{属性:属性值} *{属性:属性值}
复合选择器
复合选择器 交集选择器 并集选择器 子代选择器 后代选择器
语法 选择器1选择器2{属性:属性值},取两个选择器的交集 选择器1,选择器2,选择器3~~选择器N{属性:属性值} 父选择器 其他选择器{属性:属性值} 父选择器>子选择器{属性:属性值}
伪类选择器
伪类选择器 :link :visited :hover :action
解释 选择器:link,针对a标签的状态 选择器:visited,针对a标签点击后的状态 :hover,鼠标悬停时状态 :action,鼠标点击的状态

CSS三大特性

1.层叠性 
    如果多个选择器设置同一个目标的不同属性,会共同作用在页面中
    如果是相同的属性,则以最后一次为准.
    不同选择器设置同一目标的相同属性，按照权重来分辨。
2.继承性
    子元素会继承父元素关于字体和颜色的样式 ,如果子元素已经被设置样式了,则不会继承父元素的样式,（类似java的方法重写）只有关于文本的属性才会被继承,宽高不会被继承.
    一层一层往上找,直到找到设置样式的祖先元素
        需要注意的地方: 
           1.a标签颜色不会继承父类
           因为他是由伪类选择器来设置的
           想要设置a标签的样式,直接设置,不要继承
           2.h系列 不要去继承父元素字体大小
3.权重性
    因为css有多种选择器,选择器之间优先级问题
    默认继承<通配符<标签选择器<类选择器<id选择器<行内式<!important

字体以及颜色设计

字体样式设置：
    color  字体颜色
    font-size 字体大小   单位px像素
    font-style 字体格式,normal 正常,italic倾斜
    font-weight 字体粗体,normal 正常,700加粗/bold   ,100~500不加粗,600~900加粗,规定700表示加粗
    font-family 文字字体

因为字体样式太多了,为了方便推出字体连写

语法格式: font: font-style font-weight font-size/line-height(行高) font-family

盒子模型

盒子模型:所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子
        也就是一个盛装内容的容器。每个矩形都由元素的 内容、内边距（padding）、边框（border）和外边距（margin）组成。
        盒子的宽度受边框宽度影响,需要 加上边框宽度*2
        边框的方向  : top上,right右,bottom下,left左

        内边距:元素内容到边框的距离
        padding:   一个值  对4条边生效
                   两个值  上下    左右
                   三个值  上   左右    下
                   四个值   上  右  下  左

浮动

类似于word中的图片设置环绕型

标准文档流
块级元素  纵向有序排列
行内块/行内 横向有序排列
float :浮动会使标签脱离标准文档流
float:left 左浮right右浮动
浮动 的特点:
1：浮动找浮动，不浮动找不浮动
2：浮动只影响后面的元素
3：浮动以元素顶部为基准对齐
4：浮动可是实现模式转换（span 设置浮动可以设置宽高）
5：让块级元素在一行显示
浮动的弊端:会导致文字环绕

元素溢出和背景图片

内容溢出
    overflow:visible默认值。内容不会被修剪，会呈现在元素框之外。
    overflow:hidden	内容会被修剪，并且其余内容是不可见的。
    overflow:scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    overflow:auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    
    
background-image:背景图片
    url(图片路径)
    no-repeat 不重复
    repeat-x横向重复
    repeat-y纵向重复

元素定位

    position:static	静态定位 (默认的定位方式)
    position:absolute	绝对定位
    position:relative	相对定位
    position:fixed	固定定位
    top上    bottom 下    left  左     right 右
    相对定位:相对于自己左上角原点
    子绝父相:子元素为绝对定位,父元素相对定位(也可以固定定位)
    绝对定位:依赖相对定位的父元素