html第二课html图像标记与css入门
一、html图像标记
1.常用图片格式
2.图像标记
要想在网页中显示标记就需要使用图像标记标记的属性
补充
title(属性值 文本 描述 鼠标悬停时显示的内容)
border(属性值 数字 描述 设置图像边框的宽度)
src的路径选择
二、css入门
1.css核心基础
(1)css样式
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
(运行css前一定要设置style!!!!)
(2)css样式中选择器严格区分大小写,属性和值不区分大小写,按照书写习惯一般将“选择器、属性和值”都采用小写的方式。
(3)多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是为了增加新样式最好保留留。
(4)如果属性的值由多个单词组成且中间包含空格,则必须为这个属性值加上英文状态的引号。
(5)为了提升代码可读性,通常会加上css注释。
(6)在css代码中空格是不被解析的,花括号以及分号前后的空格可有可无。因此可以使用空格键tab键cnter键等对样式代码进行排版,即所谓的格式化css代码,可提高代码的可读性。
2.css样式表
导入式与链入式的区别:导入式先加载html在加载link,会导致乱码,链入式link式,css样式与html同时进行加载。
3.css基础选择器
(1)标记选择器:标记名{属性:属性值;}
(2)类选择器
.class{属性:属性值;}可以多次使用
(3)ID选择器
#id{属性:属性值;}只能使用一次
(4)通配符选择器
*{属性:属性值;}所有标记都可用,一般用于初始化。
css文本相关样式
1.css字体样式属性
属性名 含义 举例
font-family 设置字体类型 font-family:“隶书”;
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 设置所有字体属性 font:italic bold 36px “宋体”;
font-variant 变体 只对英文有效,改变大小写,小写变大写字号会变小;
2.css文本外观属性
1.color;定义文本颜色
直接输入英文单词;
#6位16进制(两位决定一个颜色)(两位转化为10进制不超过255);
rgb三通道方法rgb(0-255,0-255,0-255);
2.letter-spacing: 字体间距 属性为normal 或px em 允许负值
3…word-spacing:单词间距 中文字体无效
4.line-height:行间距 px em %
5.text-transform:文本转换
none 默认值
capitalize 首字母大写
uppercase 全部字符转换为大写
lowercase 全部字符转换为小写
6.text-decoration 文本装饰
none underline overline line-through删除线
7.text-align水平对齐方式
left right center
8.text-indent 首行缩进 建议使用em
9.white-space 空白符处理
normal
pre 预格式化
nowrap空格空行无效