Html+CSS - 基础笔记梳理

vine
651 阅读13分钟

备战秋招，复习基础。如有错误，欢迎批评指正，共同进步！

Html

标签语义化：便于开发者阅读和开发，便于搜索爬虫，便于解析，便于维护

CSS

内嵌 内联 外联

参考资料：真的知道css三种存在样式（外联样式、内部样式、内联样式）的区别吗？

  • 内联（行内/行级）样式：
<body>
    <div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div>
</body>
  • 内部（内嵌/页级）样式:
<head>
    <meta charset="utf-8" />
    <title>测试</title>
    <style type="text/css">
        div {
            width: 65px;
            height: 20px;
            border: 1px solid;
            background: greenyellow;
        }
    </style>
</head>
  • 外联样式：
<link rel="stylesheet" type="text/css" href="*.css" />

link语法格式中，rel指的是关联(relation)，type指的是类型，href指的是链接文件路径。

link的作用主要用来引入CSS和网页图标，指示告知搜索引擎，网页之间的关系等。

<style>@import url("*.css");</style>

@import语法格式务必写在style标签中，后直接加文件路径即可。

@import作用在CSS文件和页面中，可以在一个CSS文件中引入其他的CSS文件，例如在index.css文件中引入其他CSS文件的样式，整合在一起后，再在index.html中调用一次即可，在实际项目中经常使用，方便管理和维护。  

二者加载顺序影响

link和@import都没有放置顺序的要求，但是不同的放置位置可能会造成效果显示的差异。对于link，无论放到哪个位置，都是一边加载数据，一边进行优化，视觉感受很好；而对于@import，放置到哪里，才从哪里开始加载CSS样式，即先加载数据，然后加载样式，如果网速不佳，可能会造成只有数据出来，而样式一点点加载的效果。并且在同一个页面中，调用两种方式，link永远比@import优先级高。

在项目中使用的时候，一般在页面中调用方式为link，并且放在head标签中；使用@import除了在CSS文件中，在页面调用时，一般加载第三方的样式会使用到，并且需要放置在页面的底部，不会影响自己的网站。

link是xhtml的标签，加载css和rss没有兼容问题。引入css会在页面载入时同时加载。支持使用js控制dom去修改样式。 @import是css标签，低版本不兼容。在页面完全载入后加载。不支持js控制dom去修改。

三者的优先级为：内联样式>内部样式>外联样式

通过js代码动态添加targetObj.style.width的优先级是最高的，它是添加到内联样式中

src和href

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。 <script src ="js.js"></script> 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加 <link href="common.css" rel="stylesheet"/> 那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

选择器

选择器：采用正则表达式的形式进行样式指定

属性选择器

声明属性与属性值[att=val] 如：

<style type="text/css">
[id=section1]{
    background-color:yellow;
}
</style>

通配属性选择器：

[att*=val] 如果元素用att表示的属性的属性值中包含用val指定的字符，则使用该样式。

[att^=val] 以val开头

[att$=val] 以val结尾

a[href$=\/]:after, a[href$=htm]:after, a[href$=html]:after{
    content:"web"，
    color:red;
}

伪类选择器

伪类：CSS中已经定义好的选择器，不能随便更名。a:link a:visited a:hover a:active

伪类选择器：针对CSS中已经定义好的伪元素使用的选择器。

使用方法：

选择器：伪元素{属性：值}
选择器.类名：伪元素{属性：值}

伪元素选择器

  • first-line伪元素选择器：用于向某个元素的第一行文字使用样式。

    p:first-line{color:#FFF000}

  • first-letter伪元素选择器：用于向某个元素中的文字的首字母或第一个字使用样式。

    p:first-letter{color:#FFF000}

  • before伪元素选择器：用于在某个元素之前插入一些内容。

    li:before{content:前缀文字}

  • after伪元素选择器：用于在某个元素之后插入一些内容。

    li:after{content:后缀文字}

结构性伪类选择器

允许开发者根据文档树的结构来指定元素的样式。

  • root选择器：将样式绑定到页面的根元素中。在HTML页面中就是指包含整个页面的部分。

    :root{background-color:yellow;}

  • not选择器：对某个结构元素使用样式，但排除这个结构元素下面的子结构元素。

    body *:not(h1){background-color:yellow;}

  • empty选择器：当元素中内容为空白时使用的样式。

    :empty{background-color:yellow;}

  • target选择器：对页面中某个target元素（该元素的id被当作页面中的超链接来使用）指定样式，只在用户点击页面超链接，且跳转到target元素后起作用。(是目标元素样式，不是链接元素样式！！！)

    :target{background-color:yellow;}

  • first-child / last-child选择器：单独指定第一个子元素、最后一个子元素的样式。

    li:first-child{background-color:yellow;}

    li:last-child{background-color:yellow;}

  • nth-child / nth-last-child选择器：对指定需要的子元素（连同父元素下所有子元素一起计数）使用样式。

    li:nth-child(2){background-color:yellow;}

    偶数：li:nth-child(even){background-color:yellow;}

    奇数：li:nth-child(odd){background-color:yellow;}

    循环：li:nth-child(4n+1){background-color:yellow;}

    唯一：li:nth-child(1):nth-last-child(1){} → li:only-child{}

  • nth-of-type / nth-last-of-type选择器：只针对同类型子元素计数

    h2:nth-of-type(odd){background-color:yellow;}

UI元素状态伪类选择器

指定样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。

常用：:hover :active :focus :disabled :checked

`::selection` → 当元素处于选中状态时的样式

通用兄弟元素选择器

指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。

<子元素>~<子元素之后的同级兄弟元素>{...}

其他选择器

例子 描述
.intro 选择 class="intro" 的所有元素。
#firstname 选择 id="firstname" 的所有元素。
* 选择所有元素。
p 选择所有<p> 元素。
div,p 选择所有 <div> 元素和所有 <p> 元素。
div p 选择 <div> 元素内部的所有 <p> 元素。
div>p 选择父元素为 <div> 元素的所有 <p> 元素。
div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。

选择器优先级

参考资料：深入理解CSS选择器优先级

内联 > ID选择器 > 类选择器 > 标签选择器

  • 计算规则：优先级是由 A 、B、C、D 的值来决定的

    • 如果存在内联样式，那么 A = 1, 否则 A = 0;
    • B 的值等于 ID选择器 出现的次数;
    • C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
    • D 的值等于 标签选择器 和 伪元素 出现的总次数 。

    例如： #nav-list .item { color: #f00;}优先级是 (0, 1, 1, 0) .nav-list .item { color: #0f0;}优先级是 (0, 0, 2, 0)

  • 比较规则是: 从左往右依次进行比较，较大者胜出，如果相等，则继续往右移动一位进行比较。如果4位全部相等，则后面的会覆盖前面的。

    #nva-list .item 大于 .nav-list .item

  • 外部样式覆盖内联样式：!important

盒模型

盒的类型：使用display属性定义。

类型 特性
block <div> <p> 一行一个
inline <span> <a> 一行几个 不指定宽高
inline-block 一行几个，可以指定宽高，默认底部对齐
inline-table 表格和文字同一行
list-item 多个元素作为列表，开头有列表标记
none 不显示

  • 盒内容过多：overflow：hidden隐藏 scroll滚动条固定 auto自动滚动条

    text-overflow：ellipsis溢出文字显示省略号

  • 盒阴影：box-shadow:[inset内阴影] x y 模糊半径 color

  • 盒宽高：限制元素总宽度 box-sizing: ← conent-box 不包括补白与边框（内容宽度） border-box 包括补白与边框

css+html写表格

<head>
...
<style type="text/css">
.table{
    display:table;
    border:solid 3px #00aaff;
}
.caption{  ← 整个表格的标题
    display:table-caption;
    text-align:center;
}
.tr{ ← 代表表格中的一行
    display:table-row;
}
.td{ ← 代表单元格
    display:table-cell;
    border:solid 2px #aaff00;
    padding:10px;
}
.thead{ ← 代表表格中的表头部分
    display:table-header-group;
    background-color: #ffffaa;
}
</style>
</head>
<body>
<div calss="table">
    <div class="caption">字母表</div>
    <div class="thead">
        <div class="tr">
            <div class="td">1st</div>
            <div class="td">2nd</div>
        </div>
    </div>
    <div class="tr">
        <div class="td">A</div>
        <div class="td">B</div>
    </div>
    <div class="tr">
        <div class="td">C</div>
        <div class="td">D</div>
    </div>
</div>
</body>

position

值 描述
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

背景与边框样式

  • 指定背景显示范围 background-clip： border含边框 padding不含边框
  • 指定图像绘制起点background-origin： border padding content
  • 背景图像尺寸background-size： contain自适应全显示 cover自适应填满
  • 平铺背景background-repeat： space自动调整间距 round自动调整尺寸
  • 线性渐变background: linear-gradient(方向to bottom或角度30deg, red, [起始位置20%], yellow, [结束位置70%]);
  • 放射渐变background-image:radial-gradient([at 坐标xy,] orange, red);
  • 圆角边框border-radius:半径 半径
  • 图片边框border-image:url(border.png) A B C D repeat/stretch

变形和动画

变形

  • 缩放 transform:scale(0.5)
  • 倾斜 skew(30deg,30deg)
  • 移动 translate(50px, 50px)
  • 旋转 rotate(45deg)
  • 变形基准点 transfor-origin:left botton

3D变形

变形矩阵 \left[ \begin{matrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{matrix} \right] \begin{matrix} \\ · \\ \\ \end{matrix} \left[ \begin{matrix} x \\ y \\ 1 \end{matrix} \right] → transform:matrix(a, b, c, d, e, f);

动画

  • Transition功能：将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值。

    transition:属性 时间 过渡方式→ transition: background-color 1s linear;

  • Animation功能：通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

@keyframs mycolor{
    0%{
        background-color:red;
    }
    40%{
        background-color:darkblue;
    }
    70%{
        background-color:yellow;
    }
    100%{
        background-color:red;
    }
}
div:hover{
    animation-name: mycolor;
    animation-duration: 5s;
    animation-timing-function: linear;
}

布局

css3前主要使用float和position布局

多栏布局

各栏宽度相等

div#div1{
    column-count: 2; 栏数目
    column-width: 20rem; 栏宽度
    column-gap: 3rem; 栏间距
    column-rule: 1px solid red; 间隔线
}

盒布局

允许内部各列不同宽

在外部容器设置
#container{
    display: box;
}

弹性盒布局

使宽度自适应改变

在外部容器设置
#container{
    display:flex;
    flex-direction: row/column; 元素横向/纵向排列
    flex-wrap:wrap/nowrap; 换行/不换行
    justify-content 在main轴的布局 cneter居中布局所有子元素 space-between space-around
    align-items 在cross轴的布局 baseline基线对齐 stretch高度最接近容器高度
    align-content 指定各行对齐方式 取值和 justify-content 一样
}
会使子元素的float clear vertical-align属性失效

常用子元素属性：

  • flex:1; 子元素使用该属性，会使所有元素充满容器。1表示分配空白部分占比。
    • flex-grow:：当父控件还有剩余空间的时候，是否进行放大(grow)其中数值代表的是放大比例，值为0的时候表示不放大；
    • flex-shrink：当父控件空间不够的时候，是否进行缩小(shrink)其中数值代表的是与控件大小有关的缩小比例；
    • flex-basis：当子空间含有这个属性的时候，代表了子空间占主轴的大小，主轴就是flex的主方向row是横向，column是竖向
  • order:1 元素显示顺序
  • align-self 单独指定某个子元素的对齐方式

@media查询

针对不同的媒体类型定义不同的样式。

.example {
    padding: 20px;
    color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .example {background: pink;}
}

SCSS

转自(uinika.github.io/web/scss.ht…)

  • 定义变量 $primary-color:#333;
body{
    color: $primary-color:
}
  • 引入 @import
/*===== SCSS =====*/
// _reset.scss
html, body, ul, ol {
  margin:  0;
  padding: 0;
}

// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

/*===== CSS =====*/
html, body, ul, ol {
  margin: 0;
  padding: 0; }

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef; }
  • 混合 @mixin
/*===== SCSS =====*/
@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

/*===== CSS =====*/
.box {
  border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; }
  • 继承 @extend
/*===== SCSS =====*/
%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-common;
}

.success {
  @extend %message-common;
  border-color: green;
}

/*===== CSS =====*/
.message, .success{
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
  border-color: green; }
  • 操作计算 width: 600px / 960px * 100%;
  • 引用父级选择器"&"
/*===== SCSS =====*/
#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

/*===== CSS =====*/
#main {
  color: black; 
}
#main a {
  font-weight: bold; 
}
#main a:hover {
  color: red; 
}
  • 命名空间
/*===== SCSS =====*/
.demo {
  // 命令空间后带有冒号:
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

/*===== CSS =====*/
.demo {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

LESS

转自(less.bootcss.com/)

  • 定义变量 @base:#333;
  • 导入
@import "library"; // library.less
@import "typo.css";
  • 混合
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered(); → 加()为混入，加{}为嵌套
}
  • 嵌套 & 父选择 & 运算 与scss类似
  • @media查询
/*===== LESS =====*/
.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

/*===== CSS =====*/
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}
  • 转义
/*===== LESS =====*/
@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

/*===== CSS =====*/
@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}
avatar
文章
阅读
粉丝