CSS样式、选择器、以及字体属性基础

样式

css样式分为三种:1、行内式 2、内嵌式 3、外联式

行内式:设置在标签内部的样式
CSS样式、选择器、以及字体属性基础
运行效果:
CSS样式、选择器、以及字体属性基础
内嵌式:设置在head头部
CSS样式、选择器、以及字体属性基础
运行效果:
CSS样式、选择器、以及字体属性基础
外联式:
首先新建一个css文件,以.css结尾的文件
CSS样式、选择器、以及字体属性基础
打开该文件直接填写样式:
CSS样式、选择器、以及字体属性基础
在head头部应用link标签引用外部的css文件:CSS样式、选择器、以及字体属性基础

基础选择器

标签选择器:选择到我们想要设置的标签(不常用)

语法:
标签名{
        属性:属性值;
}

例:
CSS样式、选择器、以及字体属性基础

类选择器:给标签起一个类名,比标签选择器更精准的选择到某些标签,比较常用
CSS样式、选择器、以及字体属性基础
id选择器
把类选择器比作人名 ,那么id选择器就是人的身份证。
类选择器可以有多个相同的, 而id选择器对应某一个具体的元素。
CSS样式、选择器、以及字体属性基础
用法与类选择器相同,类以点(.)开头,id以#开头

通配符选择器:

选择当前页面所有标签,一般用来去除浏览器默认的内外边距,不建议应用于改变标签的字体属性、颜色等。

CSS样式、选择器、以及字体属性基础

字体属性

font字体:

1、
font-size:设置字体大小,单位为px,不可省略。还有其他单位,但不常用。

不同的浏览器默认字体大小不一样,一般会给一个固定的值。

2、
font-family:设置字体,常用的字体有微软雅黑,宋体等

如果要设置多个字体(浏览器会自动匹配默认字体)中间用逗号隔开,如包含空格或者是中文要加双引号。

例:font-family: Arial,“Microsoft Yahei”, “宋体”;
尽量使用默认字体。

font-weight:字体粗细
属性值:
1、 normal:默认值 不加粗
2、bold:定义加粗
3、100~900:400等同于normal 700等同于bold

font-style:字体风格
属性值:
1、normal:默认值 不倾斜
2、italic:倾斜

例:
CSS样式、选择器、以及字体属性基础

font综合写法:
选择器 {
font: font-style ;
font-weight ;
font-size/line-height ;
font-family ;
}

使用font属性时,必须按语法格式中的顺序书写,不能更换顺序,属性以空格隔开。

其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。