Html+CSS - 基础笔记梳理

时间 2019-11-24

标签 html+css html css 基础笔记梳理栏目 CSS 繁體版

原文原文链接

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

Html

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

CSS

内嵌内联外联

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

内联（行内/行级）样式：

<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指的是连接文件路径。git

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

<style>@import url("*.css");</style>
复制代码

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

@import做用在CSS文件和页面中，能够在一个CSS文件中引入其余的CSS文件，例如在index.css文件中引入其余CSS文件的样式，整合在一块儿后，再在index.html中调用一次便可，在实际项目中常用，方便管理和维护。正则表达式

两者加载顺序影响浏览器

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

在项目中使用的时候，通常在页面中调用方式为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;
  }
}
复制代码