打开MASA Blazor的正确姿势3.1：HTML和CSS基础

一、HTML和CSS关系

HTML元素定义网页的文档结构，CSS定义网页的排版样式。这句话不好理解，通过导航栏案例领会一下（以下案例非常精彩）：

1、导航栏的HTML文档结构

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

2、垂直导航栏的CSS样式①

<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li a {
  display: block;
  width: 60px;
  background-color: #dddddd;
}
</style>

3、垂直导航栏的CSS样式②

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}
</style>

4、垂直导航栏的CSS样式③

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
li a.active {
    background-color: #4CAF50;
    color: white;
}
li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>

5、垂直导航栏的CSS样式④

<style>
body {
    margin: 0;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
li a.active {
    background-color: #4CAF50;
    color: white;
}
li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>

6、转为水平导航栏

<style>
body {margin:0;}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}
.active {
    background-color: #4CAF50;
}

 
 

二、HTML

1、块级元素和行内元素（行内也称内联）

1）块级元素：
  • 独占一行，宽度自动填满父元素
  • 可以设置宽高
  • 可以设置四个方向margin和padding
2）行内元素：
  • 相邻的行内元素会显示在同一行
  • 不可以设置宽高
  • 只可以设置水平方向的margin和padding
3）通过CSS，可以进行块行的转换和嵌套

 

2、常用HTML元素

1）文档结构类：
  • !DOCTYPE html：声明为HTML5文档
  • html：页面的根元素
  • head：包含了文档的元（meta）数据
  • meta：定义网页编码格式为 utf-8
  • title：页面标题
  • link：外部资源
  • script：脚本文件
  • style：样式文件
  • body：可见的页面主体内容
<!DOCTYPE html>
<html>
  <head>
    <title>MASA Blazor</title>
    <meta charset="utf-8">
    <script>...<script>
    <style>...</style>
    ......
  </head>
  <body>
    ......
  </body>
</html>
2）布局类：
  • 区块（块级）：div
  • 列表（块级）：ul-有序列表、ol-无序列表、li-列表项
  • 表格（块/行）：table-表-块级、thead/tfoot-页眉页脚-块级、th/tbody-表头/主体-块级、tr-行-块级、td-单元格（行内）
3）文本类：
  • 标题（块级）：h1、h2、h3、h4、h5、h6
  • 大段落（块级）：p、br
  • 行内小段落（行内）：span
  • 格式化（行内）：strong/b-加粗、em/i-斜体、ins-下滑线、del-删除线、sub-下标、sup-上标
4）表单类：
  • 表单（块级）：form
  • 输入框（块级）：input-含文本、单选、复选、日期、数字等丰富类型
  • 选择框（块级）：select>option
  • 按钮（块级）：button
  • 输入框标题（行内）：lable
  • 多行文本框（行内）：textarea
4）富内容类：
  • 图片（行内）：img
  • SVG（行内）：svg>circle等
  • 视频（行内）：video
  • 音频（行内）：audio
  • 地图（行内）：map>area
  • 画布（行内）：canvas

 
 

三、CSS

1、CSS规则

1）样式定义：选择器 {key1:value1; key2:value2...}

2）盒子模型：每个HTML元素都是一个盒子

 

2、选择器

  • 所有元素：*
  • 元素选择器：如div{}。应用到所有div元素。
  • Class选择器：如①元素中标记<div class="d1">；②.d1{}。应用于所有class为d1的元素。
  • Id选择器：如①元素中标记<div id="d1">；②#d1{}。应用到id为d1的元素。
  • 常用组合选择器：
    • div,p：并集，所有div和p元素
    • div p：后代，div元素内的所有p元素
    • div>p：亲儿子，所有父级是div的p元素
    • div+p：相邻兄弟，紧跟在div后的同级p元素
    • div~p：所有兄弟，div后的所有同级p元素
    • div:link：链接未访问
    • div:visited：链接已访问
    • div:hover：链接鼠标悬停
    • div:active：链接活动状态
    • div:first-child：div的第一个子元素
    • div:last-child：div的最后一个子元素
    • div:nth-child(n)：div的第n个子元素（n用数字代替）
    • div:not(:nth-child(n))：除了div的第n个子元素（n用数字代替）

 

3、内联样式：可以通过style属性，在元素内直接定义样式

<div style="background-color:red; width:100px; height:100px">ABC</div>

 

4、CSS常见属性

1）背景：
  • opacity：透明度，0-1
  • background-color：背景颜色，十六进制-#00FF00,RGB-rgb(0,255,0),颜色名-red
  • background-image：背景图
  • background-repeat：背景图平衡方式,repeat/no-repeat/repeat-x/repeat-y
  • background-attachment：背景图位置是否固定，scroll/fixed/locall
  • background-position：背景图位置,center/right top/...，x% y%, xpos ypos
  • background:#ffffff url('img1.png') no-repeat fixed right top;：简写，注意顺序
2）字体（单个字）：
  • font-family：字体
  • font-size：大小
  • font-style：样式,normal/italic/oblique
  • font-weight：粗细，normal/bold/bolder/lighter/100/200/300.../900
  • font:italic bold 12px/30px Georgia, serif;：简写，注意顺序
3）文本（一段字）：
  • color：颜色
  • direction：方向，rtl/ltr
  • text-align：水平对齐,left/right/center/justify
  • vertical-align：垂直对齐,baseline/top/middle/bottom/text-top/text-bottom/sub/super
  • white-space：是否换行,normal/nowrap/pre/pre-wrap/pre-line
  • text-decoration：样式，none/underline/overline/line-through/blink
  • line-height：行高，x%
  • text-decoration：样式，none/underline/overline/line-through/blink
  • text-transform：大小写，none/uppercase/lowercase/capitalize
  • text-indent：首行缩进
  • text-shadow:2px 2px 5px red：文字阴影，值按顺序分别为水平偏移 垂直偏移 模糊效果 阴影颜色，还可以定义多个阴影值，用逗号分隔
4）尺寸：
  • height：高度
  • width：宽度
  • max-height：最大高度
  • max-width：最大宽度
  • min-height：最小高度
  • min-width：最小宽度
5）边框：
  • border-width：内边框宽度【内边框位于margin和padding之间】
  • border-style：内边框样式，none/dotted/dashed/solid/double
  • border-color：内边框颜色
  • border-radius：内边框圆角
  • border-bottom-color：单独设置上下左右的宽度、颜色和样式，left/right/bottom/top
  • border:5px solid red;：边框简写，注意顺序
  • border-bottom:5px dotted #ff0000;：单边的边框简写，注意顺序
  • outline-width：外边框宽度【外边框位于盒子的最外围】
  • outline-style：外边框样式，none/dotted/dashed/solid/double
  • outline-color：外边框颜色
  • outline:#00FF00 dotted thick;;：外边框简写，注意顺序
  • box-shadow:2px 2px 5px 2px red：边框阴影，值按顺序分别为水平偏移 垂直偏移 模糊半径 扩散半径 阴影颜色，还可以定义多个阴影值，用逗号分隔
6）间隔：
  • margin：外边距，auto/x%/5px/5px 10px/5px 10px 15px/5px 10px 15px 20px
  • margin-bottom：单独设置上下左右的外边距，left/right/bottom/top
  • padding：内边距，auto/x%/5px/5px 10px/5px 10px 15px/5px 10px 15px 20px
  • margin-bottom：单独设置上下左右的内边距，left/right/bottom/top
97）列表：
  • list-style-type：列表项标志的类型，none/disc/circle/square/decimal......
  • list-style-position：列表项标志的位置，inside/outside
  • list-style-image：列表项标志设置为图片
  • list-style:square inside url("sqpurple.gif");：简写，注意顺序
8）显示：
  • display:none;：隐藏元素，且被隐藏的元素不占有任何空间
  • li {display:inline;}：将元素转为行内元素
  • span {display:block;}：将元素转为块级元素
  • div {display:inline-block;}：将元素转为行内元素，但又具有块级特征，可以设置宽高
  • visibility:hidden;：隐藏元素，但被隐藏的元素仍占用原有空间
  • overflow: visible;：内容溢出，visible/hidden/scroll/auto
  • overflow-x: visible;：内容溢出，指定x或y轴方向
9）定位：
  • position:static：静态定位。定位默认值，按照元素正常的位置显示，相当于没有定位
  • position:relative;top:25px;left:10px：相对定位。元素相对于自己的正常位置，向四个方向进行偏移，通过top、bottom、left和right四个属性的组合来设置偏移量。
  • position:absolute;bottom:25px;right:10px：绝对定位。相对于第一个非静态的父级元素进行定位，如果找不到符合条件的父级元素则会相对与浏览器窗口来进行定位，通过使用top、bottom、left和right四个属性来设置元素相对于父元素或浏览器窗口不同方向上的偏移量。绝对定位的元素会脱离原来的位置，相当于自起一层，可以与页面中的其它元素重叠。使用绝对定位的元素可以有外边距，并且外边距不会与其它元素的外边距发生重叠。
  • position:fixed;right:20px;bottom:20px;：固定定位。元素相对于浏览器窗口进行定位，不会因为浏览器窗口的滚动而移动，就像是固定在页面上一样，我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。
  • position:sticky;top:0px;：粘性定位。它像是相对定位和固定定位的结合体，当页面开始滚动时它的效果与相对定位相同，当元素滚动超过一定阀值时它又会呈现出固定定位的效果。比如一些网页上的导航菜单，当页面加载完成时它在自己默认的位置，当我们向下滚动页面到一定程度时，它又会固定在页面的最顶端。特定阈值指的是top、right、bottom或left之一，换言之，指定top、right、bottom或left四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。
  • float:left;：元素向左或向右浮动，浮动元素之前的元素将不会受到影响，浮动元素之后的元素将围绕它
10）弹性布局Flex：
  • 任何元素都可以指定为弹性布局：
    • 块级元素使用{display:flex;}
    • 行内元素使用{display:inline-flex;}
    • 定义为弹性布局的元素称为容器container，容器内的子元素称为项目item
  • 定义在容器上的属性：
    • flex-direction：主轴方向，或者说是项目的排列方向，row/row-reverse/column/column-reverse
    • flex-wrap：当主轴上无法排列项目时是否换行（大多数情况下，横向排列时才有意义），nowrap/wrap|wrap-reverse
    • justify-content：项目在主轴上的对齐方式，flex-start/flex-end/center/space-between/space-around
    • align-items：项目在交轴上的对齐方式，flex-start/flex-end/center/baseline/stretch
    • align-content：项目存在warp情况下在交叉轴上的对齐方式，flex-start/flex-end/center/space-between/space-around/stretch
  • 定义在项目上的属性：
    • order：本项目在容器中排列顺序，数值越小越靠前，默认值为0
    • flex-basis：容器在分配主轴多余空间之前，本项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间，length|auto，默认值为auto，表示项目本来大小
    • flex-grow：如果主轴方向上存在剩余空间，本项目参与分配剩余空间的比例。如项目A值为1，项目B值为2，空间还剩90px，则A扩大30px，B扩大60px。默认值为0，即默认空间有多时，不参与分配剩余空间。
    • flex-shrink：如果主轴方向上的空间不够，本项目参与分配缩小空间的比例，如项目A值为1，项目B值为2，空间还差90px，则A缩小30px，B缩小60它。默认值为1，即默认空间不够时，会等比缩小。
    • align-self：本项目在交叉轴上的对齐方式，将覆盖容器上设置的align-items，nowrap时有效。auto/flex-start/flex-end/center/baseline/stretch
  • align-items和align-content区别：
    • 总体原则：nowrap时使用align-items，wrap时使用align-content
    • align-content只对wrap有效
    • items是针对每一行进行对齐，如果是多行，第一行先对齐后，再对齐第二行，行与行之间可能出现间隔不可控情况，而content是将所有行视为整体进行对齐，不会出现items的不可控情况
11）媒体查询@media：CSS3的媒体查询功能，可以根据当前媒体类型及其特征，设置不一样的样式，相当于一个switch表达式。如下：
//格式
@media screen and (max-width: 1200px) {
    body {
        background-color:blue;
    }
}
//案例：
//手机、平板或电脑类型，且页面可视区域小等于600px时，使用以下样式
@media screen and (max-width: 600px) {
    body {
        background-color:lightblue;
    }
}
//手机、平板或电脑类型，且页面可视区域小等于1200px时，使用以下样式
@media screen and (max-width: 1200px) {
    body {
        background-color:red;
    }
}
  • 媒体类型：
    • all-所有
    • screen-手机/平板/电脑
    • print-打印机
    • speech-屏幕阅读器
  • 媒体特性1-宽高：
    • height：页面可视区域高度
    • device-height：屏幕可视区域高度
    • width：页面可视区域宽度
    • device-width：屏幕可视区域宽度
    • max-height：页面可视区域最大高度
    • max-device-height：屏幕可视区域最大高度
    • max-width：页面可视区域最大宽度
    • max-device-width：屏幕可视区域最大宽度
    • min-height：页面可视区域最小高度
    • min-device-height：屏幕可视区域最小高度
    • min-width：页面可视区域最小宽度
    • min-device-width：屏幕可视区域最小宽度
  • 媒体特性2-宽高比例：
    • aspect-ratio：页面可视区域宽高比例
    • device-aspect-ratio：屏幕可视区域宽高比例
    • max-aspect-ratio：页面可视区域最大宽高比例
    • max-device-aspect-ratio：屏幕可视区域最大宽高比例
    • min-aspect-ratio：页面可视区域最小宽高比例
    • min-device-aspect-ratio：屏幕可视区域最小宽高比例
  • 媒体特性3-分辨率：
    • resolution：分辨率，**dpi
    • max-resolution：最大分辨率
    • min-resolution：最小分辨率
  • 媒体特性4-屏幕方向：
    • orientation：屏幕方向portrait|landscape
  • 还有颜色、栅格、点阵等，较少涉及，略
11）过渡：
<style> 
div {
    width: 100px; /*原始宽度*/
    height: 100px; /*原始高度*/
    transition: width 2s, height 2s, transform 2s; /*指定具有过渡效果的属性及持续时间，可指定多个属性*/
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /*针对Safari浏览器*/
}

div:hover { /*鼠标移入悬浮时开始过渡效果*/
    width: 200px; /*2s内，宽度从100px扩大到200px*/
    height: 200px; /*2s内，高度从100px扩大到200px*/
    transform: rotate(180deg); /*2s内，旋转180度*/
    -webkit-transform: rotate(180deg); /*针对Safari浏览器*/
}
</style>
11）动画：
<style> 
div
{
    width:100px;
    height:100px;
    background:red; /*原始背景*/
    animation:myfirst 5s; /*创建一个5S动画，动画的名称为myfirst*/
    -moz-animation:myfirst 5s; /*Firefox浏览器*/
    -webkit-animation:myfirst 5s; /*Safari and Chrome浏览器*/
}

@keyframes myfirst /*创建动画*/
{
    0%   {background:red;} /*开始背景为红色*/
    50%  {background:blue;} /*在前50%时间内，背景由红色过渡到蓝色*/
    100% {background:green;} /*在后50%时间内，背景由蓝色过渡到绿色*/
}

@-moz-keyframes myfirst /* Firefox浏览器 */
{
    0%   {background:red;}
    50%  {background:blue;}
    100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome浏览器 */
{
    0%   {background:red;}
    50%  {background:blue;}
    100% {background:green;}
}
</style>

 
 

posted @ 2023-02-13 18:13  functionMC  阅读(316)  评论(0)  编辑  收藏  举报