只需要使用一个html文件,样式代码在style标签中。
内嵌方式:在html文件head标签中添加style标签。
标签 | 描述 | 块/行元素 | 单/双标签 |
style | 用于为 HTML 文档定义样式信息 | 行 | 双 |
style标签属性 | 取值 | 说明 |
type | text/css | 规定被链接文档的 MIME 类型 |
html文件:
只需要使用一个html文件,样式代码是元素标签属性,style的属性值。
内联方式:在html文件body体中,对应标签中添加style属性声明样式。
html文件:
导入样式也是样式内容在另外一个文件中,html文件和css文件分离,样式代码在 .css
文件中。
导入方式:首先在html文件head标签中添加style标签,在style标签之间加入@import语句,详细如下:
在 @import 关键字后面,利用 url() 函数包含具体的外部样式表文件的地址(或不写url函数)。
- @import url(文件路径);
@import url(“文件路径”);
@import url(’文件路径‘);
@import 文件路径;
@import “文件路径”;
@import ’文件路径‘;
用途特点:一个HTML文件可以导入多个样式表,CSS文件内也可以导入其他样式表
html文件:
css文件:
css样式需要写在选择器中,如图中:
H1选择器名称,选择器名称对应到html文件标签名称;
选择器样式属性和值也会赋予到对应的标签中(选择器名称决定);
样式属性名和样式属性值之间使用冒号 : 隔开,使用分号 ; 结束。
选择器名称可以有三种组成:标签选择器、.类选择器、#ID选择器。
元素选择器(标签选择器):html中标签名称。
类选择器:支持多风格同时使用,多个类选择器名用空格连接。
ID选择器:在html中只能使用一次,不支持多风格同时使用。
文本font样式
文本名称 | 属性名 | 属性值 | 语法 |
字体 | font-family | 字体名称,可一次性定义多个字体,如:楷体、宋体 | font-family:属性值1,属性值2,… |
大小 | font-size | 数字px(Pixel像素) | font-size:数字px; |
加粗 | font-weight | 数字 | font-weight:属性值; |
倾斜 | font-style | italic:使用文字的斜体 、oblique:让没有倾斜属性的文字倾斜 | font-style:属性值; |
文本text样式
文本名称 | 属性名 | 属性值 | 语法 |
首行缩进2字符 | text-indent | 2em | text-indent:2em; |
水平对齐 | text-align | left、rightcenter、justify | text-align:属性值; |
装饰效果 | text-decoration | underline、line-through、overline、blink(部分浏览器支持) | text-decoration:属性值1 属性值2; |
阴影特效 | text-shadow | x轴偏移尺寸、y轴偏移尺寸、阴影半径、阴影颜色 | text-shadow:数字px 数字px 数字px 颜色; |
英文字母大-小写转换 | text-transform | capitalize、uppercase、owercase | text-transform:属性值; |
文本其他样式
文本名称 | 属性名 | 属性值 | 语法 |
行间距 | line-height | 数字px,数字数字% | line-height:属性值; |
段间距 | margin | 数字px | margin:属性值; |
字母、汉字间距 | letter-spacing | 数字px | letter-spacing:属性值; |
单词间距 | word-spacing | 数字px | word-spacing:属性值; |
文字颜色 | color | 英文颜色名、#RRGGBB (十六进制) 、rgb() | color:属性值; |
文字背景颜色 | background-color | 英文颜色名、#RRGGBB (十六进) | background-color:属性值; |
文本名称 | 属性名 | 属性值 |
背景颜色 | background-color | 英文颜色名#RRGGBB (十六进制) 初始值: transparent透明色 |
背景图片 | background-image | url (图片地址)或默认none无背景图片 |
背景图片是否重复及其重复方式 | background-repeat | repeat (默认) 、repeat-X、repeat-y、no-repeat |
背景图片的水平位置和垂直位置 | background-position | 水平方向:left、center、right 垂直方向:top、center、bottom |
背景图片是否随内容滚动 | background-attachment | scroll/fixed |
语法
交集选择器是并且的意思, 即…又…的意思。
语法
并集选择器和的意思, 只要逗号隔开的,所有选择器都会执行后面样式。
语法
子孙后代都可以这么选择(不管是包含多少层,只要是后代),它能选择任何包含在内的标签。
注意:边框属性是非基础的
注意:后定义>先定义
Copyright © 2023 leiyu.cn. All Rights Reserved. 磊宇云计算 版权所有 许可证编号:B1-20233142/B2-20230630 山东磊宇云计算有限公司 鲁ICP备2020045424号
磊宇云计算致力于以最 “绿色节能” 的方式,让每一位上云的客户成为全球绿色节能和降低碳排放的贡献者