关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

【HTML&CSS】运维、后端你该会的前端基本内容(三)

发布时间:2023-06-30 18:00:54

2.1.2、内部样式表 (内嵌式)

只需要使用一个html文件,样式代码在style标签中。

内嵌方式:在html文件head标签中添加style标签。

标签描述块/行元素单/双标签
style用于为 HTML 文档定义样式信息
style标签属性取值说明
typetext/css规定被链接文档的 MIME 类型

html文件:

2.1.3、内联样式表 (行内样式)

只需要使用一个html文件,样式代码是元素标签属性,style的属性值。

内联方式:在html文件body体中,对应标签中添加style属性声明样式。

html文件:

2.1.4、导入样式

导入样式也是样式内容在另外一个文件中,html文件和css文件分离,样式代码在 .css 文件中。

导入方式:首先在html文件head标签中添加style标签,在style标签之间加入@import语句,详细如下:


在 @import 关键字后面,利用 url() 函数包含具体的外部样式表文件的地址(或不写url函数)。

  • @import url(文件路径);
    @import url(“文件路径”);
    @import url(’文件路径‘);
    @import 文件路径;
    @import “文件路径”;
    @import ’文件路径‘;

用途特点:一个HTML文件可以导入多个样式表,CSS文件内也可以导入其他样式表

html文件:

css文件:

2.2、CSS选择器

2.2.1、格式

css样式需要写在选择器中,如图中:

H1选择器名称,选择器名称对应到html文件标签名称;

选择器样式属性和值也会赋予到对应的标签中(选择器名称决定);

样式属性名和样式属性值之间使用冒号 : 隔开,使用分号 ; 结束。

2.2.2、语法

2.2.3、如何使用选择器

选择器名称可以有三种组成:标签选择器、.类选择器、#ID选择器。

元素选择器(标签选择器):html中标签名称。

类选择器:支持多风格同时使用,多个类选择器名用空格连接。

ID选择器:在html中只能使用一次,不支持多风格同时使用。

2.2.4、CSS文本样式

文本font样式

文本名称属性名属性值语法
字体font-family字体名称,可一次性定义多个字体,如:楷体、宋体font-family:属性值1,属性值2,…
大小font-size数字px(Pixel像素)font-size:数字px;
加粗font-weight数字font-weight:属性值;
倾斜font-styleitalic:使用文字的斜体 、oblique:让没有倾斜属性的文字倾斜font-style:属性值;

文本text样式

文本名称属性名属性值语法
首行缩进2字符text-indent2emtext-indent:2em;
水平对齐text-alignleft、rightcenter、justifytext-align:属性值;
装饰效果text-decorationunderline、line-through、overline、blink(部分浏览器支持)text-decoration:属性值1 属性值2;
阴影特效text-shadowx轴偏移尺寸、y轴偏移尺寸、阴影半径、阴影颜色text-shadow:数字px 数字px 数字px 颜色;
英文字母大-小写转换text-transformcapitalize、uppercase、owercasetext-transform:属性值;

文本其他样式

文本名称属性名属性值语法
行间距line-height数字px,数字数字%line-height:属性值;
段间距margin数字pxmargin:属性值;
字母、汉字间距letter-spacing数字pxletter-spacing:属性值;
单词间距word-spacing数字pxword-spacing:属性值;
文字颜色color英文颜色名、#RRGGBB (十六进制) 、rgb()color:属性值;
文字背景颜色background-color英文颜色名、#RRGGBB (十六进)background-color:属性值;

2.2.5、CSS图片\背景样式

文本名称属性名属性值
背景颜色background-color英文颜色名#RRGGBB (十六进制) 初始值: transparent透明色
背景图片background-imageurl (图片地址)或默认none无背景图片
背景图片是否重复及其重复方式background-repeatrepeat (默认) 、repeat-X、repeat-y、no-repeat
背景图片的水平位置和垂直位置background-position水平方向:left、center、right 垂直方向:top、center、bottom
背景图片是否随内容滚动background-attachmentscroll/fixed

2.2.6、CSS复合选择器

2.2.6.1、交集选择器(无间隔符)

语法

交集选择器是并且的意思, 即…又…的意思。

2.2.6.2、并集选择器(,逗号间隔)集体声明

语法

并集选择器的意思, 只要逗号隔开的,所有选择器都会执行后面样式。

2.2.6.3、后代选择器(空格间隔)

语法

子孙后代都可以这么选择(不管是包含多少层,只要是后代),它能选择任何包含在内的标签。

2.2.7、CSS的继承和层叠特性

2.2.7.1、CSS继承

  • 子标签会继承父标签的所以样式
  • 子标签可以在父标签样式基础上加以修改
  • 子标签的样式不会影响父标签

注意:边框属性是非基础的

2.2.7.2、层叠(样式的优先级)

  • 越特殊的样式,优先级越高。
  • 行内样式>ID选择器>类选择器>标签选择器

注意:后定义>先定义


/template/Home/leiyu/PC/Static