H5基础标签浅谈(二)

原文链接:http://www.cnblogs.com/fengli-a/p/6482696.html

这周学习开始接触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
?
【盒子模型】
欲知后事如何,且听下回分解~~~~

转载于:https://www.cnblogs.com/fengli-a/p/6482696.html

原文地址: