小艾的CSS3笔记

本文最后更新于:2020年9月22日 晚上

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就可以了


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