Web--CSS基础

文章目录

• • 定义方式
  • 选择器
  • 文本
  • 字体
  • 背景
  • 边框
  • 元素展示格式
  • 内边距与外边距
  • 盒子模型
  • 位置
  • 浮动
  • flex布局
  • 响应式布局

定义方式

• 行内样式表
  直接定义在style属性中，作用于当前标签

  <img src = "/imges/logo.jpg" alt = "" style = "width = 400">
  

• 内部样式表
  定义在style标签中，通过选择器影响对应的标签

  • 作用范围：可以对同一页面中的多个元素产生影响

• 外部样式表
  定义在css样式文件中，通过选择器影响相应的标签，可以用link标签引入某些页面

  • 作用范围：可以对多个页面产生影响

  <link rel = "stylesheet" href = "css地址" type = "text/css">
  

注释：
不能使用//
只有 /* 注释 */

选择器

• 标签选择器
  选择所有div标签：

  div{
  	width : 200px
  	height : 200px
  	background-color : gray
  }
  

• ID选择器
  选择ID为rect-1的标签

  #rect-1{
  	width : 200px
  	height : 200px
  	background-color : gray
  }
  

• 类选择器
  选择所有rectangle的标签

  .rectangle{
  	width : 200px
  	height : 200px
  	background-color : gray
  }
  

• 伪类选择器
  伪类用于定义元素的特殊状态

1. 链接伪类选择器：
   • :link链接访问前的样式
   • :visited链接访问后的样式
   • :hover鼠标悬停时的样式
   • :active鼠标点击后长按时的样式
   • :focus聚焦后的样式

     .effect:hover{
     	transform : scale(1.1);//变大多少倍
     	transition : 200ms;//渐变，经过多长时间变化
     }
     

   2. 位置伪类选择器：

      • :nth-child(n)选择是父标签第n个子元素的所有元素

   3. 目标伪类选择器：

      • :target:当url指向改元素时生效

• 复合选择器
  由两个及以上基础选择器组合而成的选择器

  • element1, elemment2:同时选择元素element1和元素element2
  • element.class:选择包含某类的element元素
  • element1 + element2选择紧跟element1的element2元素
  • element1 element2选择element1内所有element2元素（祖先结点有element1的element2元素）
  • element1 > element2选择父标签是element1的所有element2元素

• 通配符选择器

• *: 选择所有标签

• [attribute]: 选择具有某个属性的所有标签

• attribute = value选择attribute值为value的所有标签

• 伪元素选择器
  将特定内容当做一个元素，选择这些元素的选择器称为伪元素选择器。

  • ::first-letter:选择第一个字母
  • ::first-line:选择第一行
  • ::selection:选择已被选中的内容
  • ::after:可以在元素后插入内容
  • ::before可以在元素前插入内容

样式渲染优先级

• 权重大小，越具体的选择器权重越大：!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
• 权重相同时，后面的样式会覆盖前面的样式
• 继承自父元素的权重最低

文本

• text-alignCSS 属性设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似，但是是水平方向的。

  • center居中
  • left左对齐
  • right右对齐
  • justify两端对齐

• 文字对齐方式具有继承性，父标签具有对齐方式，子标签也会继承相应的对齐方式

• line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

  • 长度单位：

    单位	描述
    px	设备上的像素点
    %	相当于父元素的百分比
    em	相当于当前元素的字体大小
    rem	相当于根元素的字体大小
    vw	相当于视窗宽度的百分比
    vh	相当于视窗高度的百分比

• letter-spacing CSS 的 letter-spacing 属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。letter-spacing 的正值会导致字符分布得更远，而 letter-spacing 的负值会使字符更接近。

• text-indent 属性能定义一个块元素首行文本内容前的缩进量

• text-decoration 简写 CSS 属性设置文本上的装饰性线条的外观。它是 text-decoration-line、text-decoration-color、text-decoration-style 和较新的text-decoration-thickness 属性的缩写。
  去掉链接的下划线

  a{
  	text-decoration : none;
  }
  

• text-shadow 为文字添加阴影。可以为文字与 decoration 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。

字体

• font-size CSS属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位，定义该值可能改变其他元素的大小。
• font-style CSS属性允许你选择font-family字体下的italic或oblique样式
• font-weight CSS 属性指定了字体的粗细程度。一些字体只提供 normal 和 bold 两种值。
• font-family CSS 属性 font-family 允许你通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。

背景

• background-color CSS属性中的background-color会设置元素的背景色，属性的值为颜色值或关键字"transparent"二者选其一。
• background-image CSS background-image 属性用于为一个元素设置一个或者多个背景图像。
  • 渐变色：
    linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))
• background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
• background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
• background-position CSS 属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。
• background-attachment CSS 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

边框

• border-style 是CSS简写属性，用来设定元素所有边框的样式
  将四个参数写全，是按照上、右、下、左的顺序来写的
  缺省的参数会取对边的样式

• border-width 属性可以设置盒子模型的边框宽度

• border-color CSS 属性 border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color、border-right-color、border-bottom-color、border-left-color。

• border-radius
  CSS属性border-radius允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。

• border-collapse
border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

块内上下居中方式
给里面的元素添加

position: relative;
top: 50%;
transform: translateY(-50%);

元素展示格式

• display

  • block

    • 独占一行
    • width、height、margin、padding均可控制
    • width默认100%

  • inline

    • 可以共占一行
    • width与height无效，水平方向的margin与padding有效，垂直方向的margin与padding无效
    • width默认为本身内容宽度

  • inline-block

    • 可以共占一行
    • width、height、margin、padding均可控制
    • width默认为本身内容宽度

• white-space
  CSS white-space 属性用于设置如何处理元素内的空白字符。

• over-flow
overflow 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的区块格式化上下文时。

内边距与外边距

• margin
margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性
  • 可以接受1~4个值（上、右、下、左的顺序）
  • 可以分别指明四个方向：margin-top、margin-right、margin-botton、margin-left
  • 可取值：
    • length : 固定值
    • percentage: 相对与包含块的宽度，以百分比值为外边距。
    • auto : 让浏览器自己选择一个合适的外边距。有事，在一些特殊情况下，该值可以是元素居中。
  • 外边距重叠
    • 块的上边距和下边距有时合并为单个边距，其大小为单个边距的最大值，如果相等就取其中一个，这种行为成为边距折叠。
    • 父元素与后代元素：父元素没有上边距和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。

• padding

  padding CSS 简写属性一次性设置元素所有四条边的内边距区域。

  • 可以接受1~4个值
  • 可以分别指明四个方向：padding-top、padding-right、padding-botton、padding-left
  • 可取值
    • length作为定值的内边距尺寸。必须是非负值。
    • percentage相对于包含块的行内尺寸（水平语言中的宽度，由 writing-mode 定义）的百分比。必须是非负值。相当于上级宽度百分比

盒子模型

box-sizing
每个元素真是的宽度为width = content + padding + border
CSS中的box-sizing属性定义了user agent 应该如何计算一个元素的总宽度和总高度。

• content-box:是默认值，设置border和padding均会增加元素的宽高
• border-box：设置border和padding不会改变元素的宽高，而是基调内容区域

位置

position
CSS position属性用于指定一个元素在文档中的定位方式。
定位类型：

• 定位元素是其计算后位置属性为relative，absolute，fixed或sticky的一个元素（换句话说，出static以外的任何东西）
• 相对定位元素是计算后位置属性为relative的元素
• 绝对定位元素是计算后位置属性为absolute或fixed的元素
• 粘性定位元素是计算后位置属性为sticky的元素

取值：

• static:该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
• relative:该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
• absolute:元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
• fixed:元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。
• sticky:元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。 该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为。

浮动

• float
  CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）。
  由于float意味着使用块布局，它在某些情况下修改display值的计算值：

  • display为inline或inline-block时，使用float后会统一变成block

  取值：

  • left：表明元素必须浮动在其所在的块容器左侧的关键字
  • right：表明元素必须浮动在其所在的块容器右侧的关键字

• clear
  clear CSS 属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。比如，你可能希望某个段落与浮动元素保持相邻的位置，但有希望这个段落从头开始强制独占一行。此时可以使用clear

  取值：

  • left:清除左侧浮动
  • right清除右侧浮动
  • both清除左右两侧浮动

实战：
效果：

html源码：

<div class="card">
        <div class="backgroundimg">
            <img src="./images/personbg.jpg" alt="" style="width: 100%; height: 100%; object-fit: cover;">
        </div>
        <div class="userbody">
            <div class="haedimg">
                <img src="./images/personheadimg.jpg" alt="">
            </div>
            <div class="person-info">
                <div class="person-info-text">
                    <div class="person-info-text-username">
                        新岛真
                        <span class="lv">LV</span><span class="num">5</span>
                    </div>
                    <div class="person-info-text-reputation">
                        <span class="text-introduce">
                            <span>724</span> <span>关注</span>
                        </span>
                        <span class="text-introduce">
                            <span>33.8万</span> <span>粉丝</span>
                        </span>
                        <span class="text-introduce">
                            <span>9324.5万</span>
                            <span>获赞</span>
                        </span>
                    </div>
                    <div class="person-introduce">
                        铁拳制裁
                    </div>
                </div>
                <div class="person-info-button">
                    <button>+关注</button>
                    <button>发消息</button>
                </div>
            </div>
        </div>
 </div>

CSS源码

.card {
    width: 366px;
    height: 247px;
    box-shadow: 2px 2px 5px lightgray;
    border-radius: 5px;
}

.backgroundimg {
    width: 366px;
    height: 85px;
}

.userbody {
    width: 366px;
    height: calc(100% - 85px);
    box-sizing: border-box;
}

.haedimg {
    width: 70px;
    height: 100%;
    float: left;
    text-align: center;
}

.haedimg>img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 10px
}

.person-info {
    width: calc(100% - 70px);
    height: 100%;
    float: left;
}

.person-info-text {
    width: 100%;
    height: calc(100% - 71px);
    /* background-color: brown; */
    box-sizing: border-box;
}

.person-info-text-username {
    width: 100%;
    height: 30px;
    font-size: 16px;
    color: #222222;
    font-weight: bold;
    margin: 10px 0px 0px 0px;
    padding: 5px 0px 0px 0px;
    /* background-color: azure; */
}

.lv {
    font-size: 9px;
    margin: 0px;
    padding: 0px;
    background-color: #EE672A;
    color: aliceblue;
    border-radius: 2px;
}

.num {
    font-size: 11px;
    margin: 0px;
    padding: 0px;
    background-color: #EE672A;
    color: aliceblue;
    border-radius: 2px;
}

.person-introduce {
    width: 100%;
    height: calc(100% - 55px);
    /* background-color: aquamarine; */
    box-sizing: border-box;
    padding: 5px 0px;
    font-size: 13px;
    color: #9499A0
}

.person-info-button {
    width: 100%;
    height: 61px;
    /* background-color: aqua; */
}

.text-introduce>span:nth-child(1) {
    font-size: 12px;
    color: #222222;
    font-weight: 500;
}

.text-introduce>span:nth-child(2) {
    font-size: 12px;
    color: #9499A0;
}

.person-info-button {
    margin: 0px;
    padding: 5px 0px;
    /* background-color: #EE672A; */
    box-sizing: border-box;
}

.person-info-button>button {
    width: 102px;
    height: 30px;
    border: none;
    border-radius: 5px;
    margin: 5px 0px;
}

.person-info-button>button:nth-child(1) {
    background-color: #00A1D6;
    color: white;
}

.person-info-button>button:nth-child(2) {
    background-color: white;
    border: #CCD0D7 solid 1px;
    color: #6D757A;
}

.person-info-button>button:nth-child(1):hover {
    background-color: #00B5E5;
    transition: 700ms;
}

.person-info-button>button:nth-child(2):hover {
    border-color: #00b5e5;
    color: #00B5E5;
    transition: 700ms;
}

flex布局

CSS 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。
定义在父节点上的属性

• flex-direction
  CSS flex-direction 属性指定了内部元素是如何在弹性容器中布局的，定义了主轴的方向（正方向或反方向）。
  取值：
  • row：flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
  • row-reverse:表现和 row 相同，但是置换了主轴起点和主轴终点
  • column:flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
  • column-reverse:表现和column相同，但是置换了主轴起点和主轴终点

• flex-wrap
  CSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。
  取值：

  • nowrap:默认值，不换行
  • wrap：换行，第一行在上面
  • wrap-reverse: 换行，第一行在下方

• flex-flow
  CSSflex-flow属性是flex-direction和flex-wrap的简写。默认值为row nowrap

• justify-content
  CSSjustify-content属性定义了浏览器之间，如何分配顺着弹性容器主轴的元素之间及周围的空间。
  取值：
  • flex-start:默认值，左对齐
  • flex-end:右对齐
  • space-between:左右两段对齐
  • space-around:在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半
  • space-evenly: flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距，主轴结束位置到最后一个flex项的间距，都完全一样

• align-items
  CSSalign-items属性将所有直接子节点上的align-self值设置为一个组。align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。
  取值：
  • flex-start: 元素向主轴起点对齐
  • flex-end:元素向主轴终点对齐
  • center：元素侧轴居中
  • stretch：弹性元素被侧轴方向被拉伸到容器相同的高度或宽度。没有空隙
    

• align-content
  CSS的align-content属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
  取值：
  • flex-start:所有行从垂直周起点开始填充。第一行的垂直周起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行
  • flex-end:所有行从垂直轴末尾开始填充。最后一行的垂直周终点和容器的垂直周终点对齐。同时所有后缀行与前一个对齐
  • center：所有行朝向容器的中心填充。每行相互紧凑，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。只有一行的时候居中效果会消失，而item仍然可以居中
  • stretch:拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。
  • space-between
  • space-around
    

定义在flex子元素

• order
  定义flex项目的顺序，值越小越靠前

• flex-grow
  CSS属性flex-growCSS设置flex项主尺寸的flex增长系数。
  负值无效，默认为0

• flex-shrink
  CSSflex-shrink属性指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值
  负值无效，默认为1

• flex-basis
  CSS属性flex-basis指明flex元素在主轴方向上的初始大小
  取值：
  width值可以是[HTML_REMOVED];该值也可以是一个相对于其父弹性盒子容器主轴尺寸的百分数。负值是不被允许的。默认为auto

• flex
flex-grow、flex-shrink、flex-basis的缩写
  常用取值：
  • auto: flex: 1 1 auto
  • none: flex: 0 0 auto

响应式布局

• media查询
  当屏幕宽度满足特定条件时应用css
  例如
  当屏幕宽度大于768时，将背景颜色换成淡蓝

  @media(min-width: 768px) {
  	.container{
  		width: 968px;
  		background-color: lightblue;
  	}
  }
  

将屏幕尺寸分成12份，将对应不同相应使用不同份量

因此有实现此功能的库 Bootstrap