标签：块级 MASA color 元素 width HTML background 3.1 div

一、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:fixed;top:0;left:0：position/top/left/z-index结合使用。static/fixed/absolute/relative/sticky。
float:left;：元素向左或向右浮动，浮动元素之前的元素将不会受到影响，浮动元素之后的元素将围绕它
padding：内边距，auto/x%/5px/5px 10px/5px 10px 15px/5px 10px 15px 20px
margin-bottom：单独设置上下左右的内边距，left/right/bottom/top

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>

标签：块级,MASA,color,元素,width,HTML,background,3.1,div
From： https://www.cnblogs.com/functionMC/p/17101648.html

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

一、HTML和CSS关系

1、导航栏的HTML文档结构

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

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

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

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

6、转为水平导航栏

二、HTML

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

1）块级元素：

2）行内元素：

3）通过CSS，可以进行块行的转换和嵌套

2、常用HTML元素

1）文档结构类：

2）布局类：

3）文本类：

4）表单类：

4）富内容类：

三、CSS

1、CSS规则

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

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

2、选择器

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

4、CSS常见属性

1）背景：

2）字体（单个字）：

3）文本（一段字）：

4）尺寸：

5）边框：

6）间隔：

97）列表：

8）显示：

9）定位：

10）弹性布局Flex：

11）媒体查询@media：CSS3的媒体查询功能，可以根据当前媒体类型及其特征，设置不一样的样式，相当于一个switch表达式。如下：

11）过渡：

11）动画：

相关文章

赞助商

阅读排行

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