CSS样式
css样式分为三种:内部样式、行内式(内联样式)、外部样式(外链式)
- 内部样式:
css样式放在head内
- 行内式(内联样式):
css样式放在标签内
- 外部样式(外链式):
新建一个css样式文件,如图
在head里输入link再按下Tab键链接外部的css样式
CSS选择器
①标签选择器(元素选择器)
语法:标签名{属性1:属性值1; 属性2:属性值2;… 属性n:属性值n;} 或
元素名{属性1:属性值1; 属性2:属性值2;… 属性n:属性值n;}
②类选择器
语法:.类名{属性1:属性值1; 属性2:属性值2;… 属性n:属性值n;} 注意:类名前面要加个英文的点号
③多类名选择器
语法:<标签名 class=“类名1 类名2 ..."></标签名> 注意:类名1和类名2有空格隔开,且二者为不同的类
▲ css样式显示效果跟html元素中的类名先后顺序无关,受css样式书写的上下顺序有关
④id选择器
语法:#id名{属性1:属性值1; 属性2:属性值2;… 属性n:属性值n;} 注意:id名前面的#不能漏掉,且id选择器不允许重复只能使用一次
⑤通配符选择器
匹配页面的所有元素
css样式属性
font-size: 字号大小,常用单位为em或px,一般我们使用px为多 font-family: 字体样式(宋体,微软雅黑等) font-weight: bold; 字体加粗 也可以写成 font-weight:700;
font-weight: normal; 正常字体 也可以写成 font-weight:400;
font-weight: bolder; 特粗体
font-weight: lighter; 字体变细
font-style: 字体风格
font-style: normal 正常
font-style: italic 斜体
font-style: oblique 倾斜
语法:选择器{font: font-style font-weight font-size/line-height font-family;}
语法顺序是固定的,用空格隔开
用法:例:h1{font: 400 16px "宋体"}
css外观属性
color: 文本颜色 line-height: 行间距 单位为 px、em、% text-align: 内容水平对齐方式 left、right、center text-indent: 2em 段落首行缩进两个汉字(1em表示1个汉字) text-decoration: 文本的装饰 text-decoration: none; 默认无装饰效果 text-decoration: underline; 下划线,一般在a链接使用 text-decoration: overline; 定义文本上的一条线,上划线 text-decoration: line-through; 穿过文本的一条线,删除线
明日接下去更新