H5基础标签浅谈

Posted 2020-09-02 枫戾

这周学习开始接触CSS样式表了，能制作的网页也开始了各种高大上，各种属性与属性值也纷至沓来，编程的世界确实很精彩。

首先，咱们先来看看样式表的类型。主要分为3种：

【1.行内样式表】
（1）将CSS样式，与html代码完全糅杂在一起，不符合W3C关于“内容与表现分离”的基础规范，不利于后期维护。
（2）优先级最高，但是不推荐使用。

<div style=""></div>

【2.内部样式表】
（1）一定程度的将CSS样式与HTML代码进行了分离，但是分离不够彻底，无法实现样式复用。
（2）优先级低于行内样式表。

<style type="text/css">
             
...
</style>

【3.外部样式表】
（1）实现了CSS样式与代码的彻底分离，方便样式复用与后期维护，符合W3C规范;
（2） 优先级要求低于内部样式表。
（3）后续开发，土建使用此种方式。
rel ：声明被链接文档与当前文档的光系关系，必选。
type：被链接文档的类型，可选。
href：被链接文档的地址，必选。

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

或者：

<style type="text/css">
@import url("css/test.css");
</style>

【两种导入方式的区别】
（1）link标签是标准的HTML标签，而import不是；
（2）link可以链接各种形式的文件，而import只能导入CSS；
（3）link使用的是链接的方式，相当于在HTML与CSS文件中的桥梁，
import使用的是导入的方式，会在文档加载时，将CSS文件的代码导入到HTML文档中；
（4）link在网页边加载的时候，变链接CSS文件，而import会在HTML文档完全加载完后，在导入CSS文件；

看完了CSS样式表的类型和导入方式，咱们来看看如何使用各个选择器，和选择器的样式：

/*【选择器的命名规则】
*1.只能有字母，数字，下划线组成，不能由其他字符组成。
* 2.开头不能是数字
* */

/*【标签选择器】
* 1.写法：HTML标签名{样式属性：样式属性值；……}
* 2.作用：选中页面中所有的对应标签。
*/

li{
     color: blue;
}

/*【通用选择器】
* 1.写法：*{}
* 2.作用：选择页面中的所有标签。
* 3.优先级：最低。
*/

*{
    font-size: 20px;
    background-color: #cccccc;
}

/*【后代选择器】
* 1.写法：选择器1 选择器2 选择器3……{}
* 例如：div .li{}需满足div里面的class="li"的元素可以是div的子代，也可以是div的后代（孙代往后）
* 【子代选择器】
* 1.写法：选择器1>选择器2>选择器3……{}
* 例如：div>ul{}则，ul必须是div的直接子代，孙带以后选不中。
*/

div .li{
    font-size: 50px;
}
div>ul>#li{
    font-size: 60px;
}

/*【类选择器class选择器】
* 1.写法：.选择器名称{}
* 调用：在需要改变样式的标签上，使用class="选择器名称"调用对应选择器
* 2.作用：修改所有调用选择器的标签。
* 3.优先级：高于标签选择器。
*/

.li{
    color: red;
}

/*【ID选择器】
*1.写法：#选择器名称{}
* 调用：在需要改变样式的标签上，使用id="选择器名称*调用对应选择器
*注意事项：ID是唯一的，同一页面，只能有一个ID。
*/

#li{
    color: yellow;
}

/*【交集选择器】
* 1.写法：选择器1选择器2……{}
* 例如：.li#li{}元素必须同时具备class="li"并且id="li"才能生效
*/

.li#li{
    color: white;
}

/*【并级选择器】
* 1.写法：选择器1，选择器2……{}
* 例如：.li,#li{}元素只要具备class="li"或者id="li"，即可生效
*/

.li,#li{
    color: gold;
}

/*【选择器的优先级】
* 1.第一原则：“近者优先”，最内层选择器永远大于外层
* 例如：div ul li >div #ul ,li在ul内层，所以li标签选择器，能覆盖外层ID选择器
* 2.当作用在同一层时，ID选择器>class选择器>标签选择器
* 例如：div #li > div .li > div li 只要最后一个选择器都作用于li上，哪无论之前
* 有多少层选择器嵌套，均没有远近关系。
* 3.当作用于同一层且最后一层为同等选择器（均为class或id或标签）
* 例如：div ul .li > div .li作用范围选的更精准，则优先级更高。
* 4.当优先级完全相同时，写在后面的选择器会覆盖前面的选择器。
*/

 

 选择器说完了，咱们来说说CSS样式中的属性及其运用：

【颜色单位】

1.直接写颜色的英文名字：red,green,blue；

2.十六进制写法：#FFFFFF白色，或者#FFF，分别对应红绿蓝的比例；（最常用）

3.RGB写法：RGB(0~255,0~255,0~255)

RGBA（0~255,0~255,0~255，0~1）第四位数表示透明度，0全透明1不透明；

 

【常用的文本属性】

1、字体、字号：

 

font-weight:字体的粗细，可选属性值：bold加粗lighter细体 100~900数值（400正常，700=bold）

font-size:字体大小**px **%（浏览器默认字体大小的百分比，绝大部分默认16px）

font-family：字体族，设置字体

>>>多个字体样式之间用逗号分隔，浏览器解析时，会从左往右依次解析，选择可用字体。

>>>一般前面使用具体字体名称，最后一个使用字体族类名称。

（常用字体族名称：衬线体serif 非衬线体sans-serif（常用）等宽字体Monospace）

>>>例如：font-family：Arial,\'Micrsoft Yahei\',sans-serif

font-style:正常 (normal)斜体（italic）

font-variant：small-caps;将字母转为小号大写字母

 

(了解)font缩写形式：font-style font-variant font-weight font-size line-height font-famiy

>>>使用注意事项：

1.顺序必须严格按照上述顺序；

2.多个样式之间用空格分割，而且font-size/line-hight必须作为一对用/分割

3.font-size和font-family必须指定，其他样式不指定将采用默认样式显示；

>>>例如：font：italic bold 75%/1.8 \'Microsoft Yahei\'，sans-serif;

斜体 加粗 字号/行号 字体族（微软雅黑，非衬线字体族）

 

2、字体颜色：

color：字体颜色。

opacity ：透明度，0~1之间的数字。调整时控件以及子空间均会透明，而使用RGBA调整时，

只会使本控件透明，子控件不会发生透明度变化。

 

3、行距、对齐等：

line-height ：行高，

1.像素单位，如48px

2.不带px正常行高的倍数

2.百分数，同2.

>>>典型应用，调整控件中文字垂直居中的方式：控件的height=控件的line-height

text-align ：块级元素中文字的水平对齐方式left center right

letter-spacing :字符间距,字与字之间的间距。

text-decoration ：文本修饰 ，下划线underline，删除线line-through，上划线overline。

overflow：控制超出范围文本的显示方式（auto根据文字多少自动显示滚动条，scoll始终显示滚动条，hidden 超出范围文本隐藏）可以通过overflow-x和overflow-y分别设置水平垂直方向。

text-overflow：设置多余文字的显示方式clip裁剪，ellipse省略号

【重点】让每行多余文字显示省略号：

1.white-space: nowrap;

2.overflow：hidden；

3.text-overflow：ellipse；

text-shadow：文本阴影，四个属性值：

1.水平阴影距离：必选，数值越大，阴影右移；

2.垂直阴影距离：必选，数值越大，阴影下移；

3.阴影模糊距离：可选，数值越大，阴影越模糊，默认为0，不模糊；

4.阴影颜色：可选，默认黑色。

text-indent：首行缩进，可用像素值调整缩进距离。

text-stroke:-webkit-text-stroke: 0.5px red;描边的粗细，描边的颜色。

white-space: nowrap;中文行末不断行显示

word-break: 设置英文行末断行：浏览器默认在空格出断行，当一个单词长度超出范围时，break-all允许在单词内断行

 

【CSS常用背景属性】

background 缩写形式

 

background-color背景色

 

background-image背景图 background-image: url(图片地址相对路径);背景图和背景色同时存在时

背景图会覆盖背景色。

 

background-repeat背景图重复方式 :no-repeat不平铺，repeat平铺（默认），repeat-x水平平铺，

repeat-y垂直平铺

 

background-size背景图大小：两个属性：宽高，高度

>>>宽高的写法：第一个属性值为宽度，第二个属性值为高度；

（1）直接写像素（2）写百分比（父容器宽高的百分比）

>>>当只用一个属性值时，默认为宽高等比缩放。

>>>当有两个属性值时，会按照指定的高度宽度进行压缩/拉伸显示。

【其他属性值】

>>>contain：图片等比缩放，缩放到宽或高的某一边等于父容器的 宽高，另一边按照图片大小缩放（可能空余部分区域无法覆盖）

>>>cover:图片等比缩放，使背景图像完全覆盖背景区域。（

可能导致背景图部分区域无法显示）

 

background-position位置坐标、偏移量

>>>指定位置：left/center/right top/center/bottom

当只写一个属性值得时候，另一个默认居中。

>>>填写坐标：水平位置 垂直位置（像素或百分比形式）

（1）当只写一个属性值时，默认写的为水平方向，则垂直居中

(2) 当使用像素时：图片的左上角往各个方向移动的实际距离

水平方向：正数右移，负数左移；垂直方向：正数下移，负数上移

（左负右正，上负下正）

（3）当使用百分数时，只能用正数。代表去掉图片后剩余距离的空白比比例。

例如：background-position：30%；水平方向去掉图片后，剩余区域3：7.

 

background-clip：裁剪背景图和背景颜色显示区域。不改变定位位置，只是通过裁剪显示部分区域。

border-box：从边框外缘开始显示，

padding-box:从边框内缘开始显示，

content-box:从文字内容区开始。

不在显示区域内的背景图或背景色，会被裁剪不显示。

background-origin：设置背景图的定位方式。不改变背景图显示区域的大小，只决定左上角定位位置。

border-box：从边框外缘开始，

padding-box:从边框内缘开始，

content-box:从文字内容区开始。

 

【常见列表属性】

none:无风格。

disc：实心圆（ul默认类型）

circle：空心圆。

square：实心正方形。

decimal：数字（ol默认类型）。

 

【margin（外边距）】

* 1.写一个值：上下左右四个方向均为指定数值；

* 2.写两个数值：第一个数=上下margin，第二个数=左右margin

* 3.写三个数值：上，右，下，左边默认等于右边。

* 4.写四个数值：上，右，下，左 四个方向。

* 5.margin: 0 auto;块级盒子在父容器中水平居中。

* 【border（边框）】

* 1.三个属性值：宽度，样式，颜色，原则上不能少，顺序可随意安排。

* 2.可以通过top，right，left分别修改4个方向。

* 【padding（内边距）】

* 1.padding为内边距，会使盒模型的可视区域变大，使用时需注意盒模型实际显示的区域大小。

* 2.其他使用同margin。

* 【border-radius 圆角】

* 1.可以接受8个属性值：X轴（左上，右上，右下，左下）/Y轴

* 例如：border-radius：50px 0px 50px 50px /50px 0px 50px 50px

* 2.只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角默认=左下角。

* 例如：border-radius：50px 0px;

* =border-radius:50px 0px 50px 0px;

 

【border-image】图片边框

* 1.十个属性：

* （1）图片路径：url()

* （2）图片切片宽度：4个值，分别代表上，右，下，左，四条切线。通过四条切线

* 切割后，会把图片分成九宫格，四个角分别对应边框的四角（不会进行任何拉伸）

* ，四个边分别对应边框的四边（根据设置进行拉伸/平铺/铺满）。

* 写的时候，不能带px单位。

* （3）图片边框的宽度：4个值，分别代表上，右，下，左四条边框，

* 写的时候必须带PX单位。

* （4）边框背景重复方式：stretch（拉伸），round（铺满），repeat（平铺）

* 【铺满和平铺的区别】

* 平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；

* 铺满：会对四条边进行适当的拉伸收缩，确保可以正好完全显示。

* 2.属性值的写法：border-image：（1）（2）/（3）px （4）；

* （3）可以省略，默认宽度等于（2）.

* （2）可以只写一个值/两个值/三个值，判断方式同margin

 

【盒子模型】

欲知后事如何，且听下回分解~~~~