小艾的CSS3笔记

本文最后更新于：2024年11月17日 晚上

css是在<head></head>之间写入的

css引入样式有三种，分别是：

  • 内部样式表：
    把CSS全部写到html内部，也就是中
  • 行内样式表：
    适合修改一些简单样式，不是特别多的修改
    直接在标签上面修改
    <div style="color: pink;">xxxxxxxxxxx<div>
  • 外部样式表：
    适合样式特别多的情况，单独建一个CSS文件
    <link rel="stylesheet" href="css文件路径">

css是由两部分组成的：

  • 选择器以及一条或者多条声明
  • 选择器是用于指定css样式的HTML标签，花括号是对该对象设置的具体样式
  • 属性和属性值以键值对出现，属性和属性值之间用“：”分开，以“；”结尾
  • css基础选择器是由单个选择器组成的包括：
    （1）标签选择器=====以标签名作为选择器
    标签名{属性：属性值；}
    （2）类选择器=====单独选择一个或者几个
    .类名{属性：属性值；}
    需要用class来调用
    <div class="类名">
    (3)id 选择器====只能调用一次
    #id名{属性：属性值；}
    <div id="id名">
    （4）通配符选择器

*{属性：属性值；} 可以把所有的标签都改变

复合选择器：由两个或者更多的基础选择器组合而成的，包括：
后代选择器，子代选择器，并集选择器，伪类选择器

  • 后代选择器（重要） ：
    元素1 元素2{样式xxxxxx}=======元素2必定是元素1 的孩子
  • 子代选择器：
    只能选择作为某元素的最近一级子元素
    元素1>元素2 {样式xxxxx}
  • 并集选择器：
    可以选择多组标签，同时为他们定义相同的样式 
    1
    2
    3
    p{
    xxxxxxxxxx
    }
  • 伪类选择器： 
    1
    2
    3
    4
    5
       给链接添加特殊效果
    a:link     （选择所有未被访问过的链接）
    a: visited      (选择所有已经被访问过的链接）
    a:hover       （选择鼠标指针位于起上的链接）
    a:active        （选择活动链接，鼠标正在点着的，还没有放开的）
  • focus 伪类选择器
    1
    2
    3
       用于选取获得光标的表单元素
    input ：focus
       {bg-color:pink}

  • CSS字体属性
    字体：标签 { font-family :”微软雅黑”;}
    字体大小： 谷歌默认显示：16px,px（像素）大小是我们网页最常用的单位
    P{ font-size :20px;}

  • 对齐文本—–只能是水平对齐

    1
    2
    div 
    {text-align:center}

  • 文本缩进

    1
    2
    3
    4
    5
    6
    7
    8
    text-index   /*给首行进行缩进*/
    div {
        text-indent:19px;
    }
    em是一个相对单位，就是相对于当前元素的一个文字的大小
    div {
        text-indent:2em
    }

  • 行间距——文字和文字行之间的距离

    1
    2
    3
    p{
        line-height: 26px
    }

HTML元素一般分为 块元素和行元素

*块元素

<h1></h1>,<p>,<div>,<ul>,<ol>,<li>等等
特点：

  • 独占一行
  • 可以设置高度宽度，以及内外边距
  • 是一个容器以及盒子，里面可以放行内或者块级元素

注意：文字类的元素内不能使用块级元素
例如<p>里面不能放<div>,<h1>~~~~<h6>等都是文字类块级标签，里面也不能放其他块级元素

*行内元素

<a>,<strong>,<b>,<em>等等
特点：

  • 相邻行内元素在一行上，一行可以显示多个
  • 宽和高直接设置是无效的
  • 默认宽度就是本身内容的宽度
  • 行内元素只能容纳文本或者其他行内元素

注意：链接里面不能再放链接了，特殊情况下<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

*行内块元素

同时具有块级元素和行内元素的特点，<img/>,<input/>,<td>
特点：

  • 一行可以显示多个
  • 可以设置宽和高以及边距

*元素显示模式转换

display:block ； =====行内元素转换为块链接 display:inline; =====块元素转换为行内元素 display:inline-block; =====转换为行内块元素

  • 背景图像固定（背景附着）
    backfground-attachment : scroll 滚动 /fixed 固定

  • 背景复合写法
    背景颜色 背景图片地址 背景平铺 背景图像滚动 背景 背景位置
    background： black url(url) no-repeat fixed center top

  • 背景颜色半透明
    background :rgba(0,0,0,0.3)
    最后一个参数是透明度大小，区间是0~1；

重点

css的三大特性

  • 层叠性
    样式冲突：遵循就近原则，以最后的为准，覆盖掉前面的
    样式不冲突，不会层叠
  • 继承性
    css中的继承：子标签会继承父标签的某些样式，如文本颜色和字号（text- ,font- ,line- ,元素开头的以及color)
    行高的继承：如果行高没有带单位，就是当前元素文字大小的n倍
  • 优先级
    当同一个元素指定多个选择器，就会有优先级的产生
    选择器如果相同，则执行层叠性
    如果是复合选择器，则会由权重叠加

css盒子模型

  • 盒子模型的组成
    border 边框
    content 内容
    padding 内边距
    margin 外边距

边框
组成：边框粗细 ，边框样式，边框颜色

边框的复合写法：
border：1px solid red; 没有先后顺序 边框可以分开写： border-top;或者 border-left; 或者 border-bottom; 或者 border-right; 如果只需要改一条边框，可以利用层叠性来改变 表格的细线边框 border-collapse:collapse; 表示相邻的边框合并在一起 边框会影响盒子实际大小

内边距
padding属性用于设置内边距
padding-left： 20px 左边距 等等
复合写法：

  • padding： 5px； 代表上下左右都是5像素
  • padding： 5px 10px； 代表上下边距是5像素 左右内边距是10像素
  • padding：5px 10px 20px ； 代表上边距5像素 左右边距10像素 下边距20像素
  • padding ：5px 10px 20px 30px； 代表上是5像素 右边距10像素 下是20像素 左是30像素
    如果一个盒子本身没有指定width /height属性，padding则不会挤开盒子

外边距
盒子和盒子之间的距离：
margin-left
margin-right
margin-top
margin-bottom
margin的复合写法和padding的一样

*外边距可以让块级盒子水平居中，但是必须满足两个条件：

  • 盒子必须指定了width
  • 盒子左右的外边距都设置为auto
    margin：auto；
    margin： 0 auto；
    margin-left：auto；margin-right：auto；

行内元素或者行内块元素水平居中给其父元素添加text-align: center就可以了

前端
css3

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！