CSS基础（一）

CSS

概念

CSS (Cascading Style Sheet)层叠样式表

样式

内部样式

（放在style标签中，而包裹样式的style标签放在标签中）

行内样式 （内联样式）

外部引入样式

  • link引入

    <link rel="stylesheet" type="text/css" href="./css/index.css"/>

  • import引入

    在<head>...<head/>标签中

内联样式（也叫行内样式）

在标签中用style=""引入

border-right:solid 1px #808080 为实线右边框

页面中的常用单位

  • px 像素 绝对单位

常用样式属性

  • 颜色
  • 字体
  • 行高 line-height
  • 字体大小
    • em是一个字体的单位，是一个相对单位，也是相对最近的父元素，字体大小跟着父级变。 1em=16px
    • pt是android开发的单位，9pt=12px 即3:4
  • 加粗 font-weight:bold
  • 倾斜 font-style:italic
  • 首行缩进 text-indent:60px
  • 水平对齐 text-align"center
  • 两端对齐 text-align:justify
  • 垂直居中 height:50px;line-height:50px 即高度等于行高
  • 文字修饰 text-decoration:underline 下划线
  • 消除窗口滚动条 html和body设置为 margin:0
  • 控制背景图不重复 background-repeat: no-repeat;
  • 控制背景图居中 background-position: center center;
  • 背景图位于背景色之上，覆盖背景色

布局与选择器

布局

注意：一个空div，默认宽度100%，高度为0，当添加内容时，高度被撑开

在浏览器的页面上，字体的默认大小是16px，而它的行高是21px

元素宽高的百分比，是相对于父元素而言的。若父元素高度为0，则子元素的高度即使设置成100%，大小也仍然是0。html元素大小是响度与浏览器窗口而言的。

选择器

  • ID选择器

    • id表示身份，用#id引用该id，在页面中元素的id不能冲恢复，id选择器只能选择单个元素

  • 标签选择器

    • 根据标签名称，选择对应的所有标签

  • 类（别）选择器

    • 选择拥有该类的多个元素，用.class名引用

  • 通用选择器

    • 针对页面上所有的标签都生效

  • 子选择器

    • 还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素（第一层元素） 例如.food>li{border:1px solid red;} 是选择的food里面第一层li

  • 后代选择器

    • 包含选择器，即加入空格,用于选择指定标签元素下的后辈元素

    注意：子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

  • 伪类选择器

    • 关于伪类选择符，到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

  • 伪对象选择器

    • ::after 在后面添加(两个冒号是为了区别伪类选择器) 伪对象添加的内容无法选中 content内是行内元素
    /* content中插入文本内容，需要插入引号 */
.bo1::after{
    content:"666...";
    color:red
}


/* content中插入图片，不需要加引号，给url就行  */
/* 插入的图片，无法通过width和height设置宽高 */
/* 图片在引入之前，大小需要设置好 */
.box2::after{
    content:url(./img/a.jpg)
    /*即使转块后，也不能控制大小*/
}
    • ::before是在前面添加内容
    .box4::before{
     content:url(./img/a.jpg)
}
    • ::first-letter 定义对象的第一个字符的样式
    .box5::first-letter{
    color:red;
    font-size:24px;
}
    • ::first-line 定义对象内第一行的样式
    .box6::first-line{
    color:red;
    font-size:24px;
}
    • ::selection 设置选中之后的样式（前面4个，单冒号，双冒号即可，这个必须双冒号），只能改变字体颜色和背景色
    .box7::selection{
    color:pink;
    background:yellow;
}

  • 分组选择器

    • 为多个标签元素设置同一个样式

选择器的权重

  • 一般情况下
    • 行内样式优先生效 > id选择器 > class类选择器 > 标签选择器 > 通用选择器
  • 样式冲突的情况下
    • 谁的权重值高（权重之和），谁就先生效
    • 行内样式权重值为1000
    • ID选择器权重值为100
    • 类选择器权重值为10
    • 标签（元素）择器权重值为1
    • 通配符的权重值为1
    • 通用选择器权重值为0

伪类的权重是10

技巧：选择器选择的范围越小越精确，优先级就越高

选择器最高层级!important

为某些样式设置具有最高权值

css属性

幽灵节点bug

a标签默认是有边距的，可以给父元素设置font-size为0，去掉幽灵节点，之后再重新设置font-size即可

https://www.w3school.com.cn/cssref/index.asp#text

透明

opacity 透明属性 取值区间 0 -1 值越小，越透明

其中opacity为0，表示完全透明，但是在页面中看得到，占占据位置

opacity为1 表示元素全部出现 可以配合transition做过渡动画

transition 过渡动画属性

  • 配合hover事件一起使用才有效
  • 若需要鼠标滑过进入动画效果，可以给自己元素加
  • 若是需要鼠标滑过 进入 和退出效果 ，给父元素加

颜色

rbga()透明

a表示alpha 透明度 取值0-1值 值越小就越透明

文本溢出属性

容器的文本溢出

overflow属性的值

  • visible 默认值，内容不会被修剪，会呈现在元素框之外
  • hidden 内容会被修剪，并且其余内容是不可见的
  • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容(水平和垂直滚动条都会有)
  • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容（哪个方向超过，哪个方向就出现滚动条）
  • inherit 规定应该从父元素继承 overflow 属性的值

水平垂直方向溢出

overflow-x

overflow-y

CSS属性继承思想

继承父级元素及父辈元素身上的属性，子元素身上默认也有这个属性

css文本属性 可继承 但是字体颜色遇到a标签，必须给a标签

背景属性

列表属性 可继承

边框属性

其他属性 width height float overflow

空白空间

white-space

  • normal 默认，空白会被浏览器忽略
  • nowrap 文本不会换行，文本一行显示，直到遇到 <br> 标签为止
    • 配合overflow:hidden 文本不换行，超出隐藏
  • pre 空白会被浏览器保留，同时文本一行显示
  • pre-wrap 保留空格的同时，换行
  • pre-line 合并空白，但是保留换行，正常换行
  • inherit 规定应该从父元素继承 white-space 属性的值

省略号显示

text-overflow:

  • ellipsis 超出显示省略号

单行文本超出时 不换行 隐藏 产生省略号

  • 给定容器宽度 ：width value
  • 强制文本在一行内显示 不换行 white-space:nowrap
  • 溢出的内容隐藏：overflow:hidden
  • 溢出时显示省略号 text-overflow:ellipsis

注意

display：block去掉图片下面的边距

当使用margin-top的时候，要给父元素设置overflow:hidden

当子元素浮动的时候，父元素需要设置高度

当为img的时候，原父元素是盒模型不用减去img标签的padding值

列表属性

去掉列表的小黑点或数字 list-style:none

  • lsit-style-image 使用图片作为列表符号，大小不可控

float

浮动

float:none/left/right

给元素添加浮动之后，元素就会飘起来，自己的位置就不要了

但是文本内容并不会去占用浮动元素空出来的位置

作用：

  • 可以让竖着的元素，横向排列，专门用来做布局的
  • 给图片加浮动，实现图文混排效果

margin

要想保住margin:0 auto水平居中，必须给盒子加宽度，且宽度必须有效

给子元素添加margin-top后，会导致整个父元素下移

解决方案：

  • 给父元素添加一个属性 overflow:hidden

鼠标事件

:link表示鼠标点击之前，也称为原始状态
:hover表示鼠标悬停状态
:active表示鼠标点击状态
:visited表示鼠标点击之后状态

文本属性

字体

font-family

  • 中文字体名要加引号，多个英文字体要加引号

字体简写形式（顺序不能改）

  • font:font-style font-weight font-size/line-height font-family

首行缩进

  • text-indent:32px(字体默认是16px，32px就是缩进2字符)
    • 首行缩进可以取负值，负值表示往左边移动
  • text-indnet:2rem（永远同步缩进2个字符）

字边距

  • leter-spacing:20px

text-transform控制英文大小写转换

  • uppercase 大写英文字母
  • lowercase 小写英文字母
  • capitalize 首字母大写

font-variant

  • small-caps 把段落设置为小型大写字母字体
text-decoration 文本的装饰效果
  • underline 下划线
  • overline 上划线
  • line-through 删除线

border边框属性

input边框去掉边框线：

input{
	border: 0px;
	outline: none; /*去掉聚焦时的外边框线*/
}
border-width

  • 注意：border-width不支持百分比

  • border-width支持这几个关键字

    • thin 1px

    • medium(默认值) 3px

      • border-style:double 至少3px才有效果

    • thick 5px

border-style

  • double 双线

    image-20200702010141704

solid 实线

  • 构建三角形

    • 直角三角形

    image-20200702011534411

    • 等腰三角形
    • image-20200702012946013

  • 原理所在

    image-20200702011840436

    ​ image-20200702012135107

  • 梯形构建圆角

    image-20200702012611470

dashed 虚线

dotted 点线

  • Chrome/Firefox下的点 是方形的

  • IE 下的点 是圆形的

    image-20200702005733555

border-color

border-color默认使用color作为边框色image-20200702010817824

background背景属性

image-20200702112054723

image-20200702114448367

background-size 背景大小的参数
  • length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
  • percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
  • cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
  • contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
background-attachment的参数
  • scroll 背景图片随着页面的滚动而滚动，这是默认的
  • fixed 背景图片固定
  • local 背景图片会随着元素内容的滚动而滚动
  • inherit 指定 background-attachment 的设置应该从父元素继承

background-position默认是相对左上方定位

background-position
  • 第一个值是，水平上的对齐方式（left/center/right）即向右
  • 第二个值是，垂直方向上的对齐方式（top/center/bottom） 即向下
  • 两个值都是center，可以只写一个
  • 向左方向，向上方向是负值

image-20200702011313325

布局方式

标准流

标准流通常为顺序布局（即块级元素布局独占一行，内联元素布局排在一行）

浮动

定位

position中的可选参数

  • static是position属性中的默认值，元素按照标准流的方式进行正常排列

  • relative是相对定位，可以通过left、top、right、bottom来改变元素的位置

    • 后写的元素会覆盖先写的元素，后写的带有定位属性的层级 大于 先写的元素的层级

    • 如果设置left和top，则定位是相对于左上角坐标而言，右边为X轴（正轴），下方为Y轴（正轴）

      image-20200701230655089

    • 如果设置为right和bottom，则定位是相对于左上角坐标而言，左边为X轴（正轴），上方为Y轴（正轴）

      image-20200701231254358

  • absolute是绝对定位，可以通过left、top、right、bottom来改变元素的位置。设置成absolute后，高度变为0，就会脱离文档流。

    • absolute定位后，如果设置以下属性

      • left和top，则是相对于，从左起往右的为X轴（正轴），从上往下的为Y轴（正轴）

        image-20200701231538957

      • right是相对于右上角开始定位，则从右到左的为X轴（正轴）

        image-20200701231710517

      • left和bottom是以左下角为顶点，从左到右是X轴（正轴），从下到上的为Y轴（正轴）

        image-20200701232122887

      • right和bottom是以右下角为顶点，从右往左是X轴（正轴），从下往上是Y轴（正轴）

        image-20200701232505943

    注意：如果给body设置高度后（超过一页显示的最大高度），absolute定位，设置bottom为0，不会出现在网页最底部，因为它是相对于当前窗口进行定位的，body宽度过高就会出现滚动条，在当前窗口的底部，并不代表在滑动纵向滚动条后，还在最底部。

  • fixed是固定定位，元素会脱离正常的文档流，不受制于标准流和父元素的约束。常用于对联广告和登录弹窗

  • inherit 继承父元素中的定位属性

定位和盒子模型的边距的区别

  • 盒子模型的边距：是通过改变内边距或者内边距，来实现元素的移动。
  • 定位：通过元素的位置移动，来改变出现在网页的相对位置中。

z-index

所有带有定位属性的元素都是带有层级的，并且先写的 带有定位属性的元素会被后写的带有定位属性的元素所覆盖。

z-index可以设置元素的叠加顺序，但是依赖定位属性（z-index只作用于带有定位属性的元素）

z-index如果为负值，则元素会被普通流中的元素覆盖

子元素即使比其他元素层级低，也和父元素享有同样的层级值

参数
  • auto：z-index为zuto的元素不参与层级比较
  • number：z-index大的元素会覆盖z-index小的元素

line-height

行高的测量：第一行文字的头部距离第二行文字头部之间的距离

  • line-height:设置数字，表示行高是当前字体尺寸的几倍
  • 行高等于高度，即文本垂直居中
posted @ 2020-08-12 16:24  若梦plus  阅读(207)  评论(0)    收藏  举报