一.CSS初识。
CSS通常称为CSS样式或层叠样式表,主要用于设置HTML页面中的文本内容、图片的外形及版面的布局等外观显示样式。
二.CSS样式规则。
h1{color:red; font-size:25px;}
- 选择器(h1)用于指定CSS样式作用的HTML对象。
- 属性和属性值以“键值对”的形式出现。
- 属性时指对指定的对象设置的样式属性。
- 属性和属性值之间用英文“:”链接。
- 多个键值对之间用英文“;”进行区分。
三.CSS字体样式属性
font-size:字号大小
font-family:字体
使用技巧:
1.网页职工普遍使用14px+
2.尽量使用偶数的数字字号
3.各字体之间用英文的逗号隔开
4.中文字体需要加英文的引号,英文字体必须位于中文字体前
5.如果字体名中含空格、#、$等符号,必须加英文的单引号或双引号。
6.尽量使用默认字体,保证任何浏览器都能正确显示
CSS Unicode字体
在CSS中设置字体名称直接写中文也可以,当不支持时:
方案一:使用英文代替,如:font-family:"Microsoft Yahei"
方案二:直接使用Unicode编码 font-family:"\5FAE\8F6F\96C5\9ED1"表示为微软雅黑
fonnt-weight:字体粗细
属性值:normal、bold、bolder、lighter 100-900
数字400等价于normal,700等价于bold,所以常用数字表示。
font-style:字体风格
属性值:normal 默认值,标准的字体样式
italic 显示斜体样式
oblique 显示倾斜
其中斜体的样式很少使用
font:综合设置字体样式
基本语法:选择器{font: font-style font-weight font-size font-family}
使用font属性,必须按以上格式顺序书写,不可更换顺序,各属性间用空格隔开
CSS注释:/*注释内容*/
四.类选择器
类选择器使用"."进行标识,基本语法如下:
类名{属性1:属性值1;属性2:属性值2;属性3;属性值3}
标签调用的时候用class="类名"即可
类选择器最大的优势是可以为元素对象定义单独或相同的样式
小技巧:
1.长名称或词组可以使用中横线为选择器命名
2.不建议使用"_"下划线来命名CSS选择器
3.不要使用纯数字或中文等命名,用英文字母表示
五.id选择器
使用"#"标识,后面紧跟id名,基本语法如下:
#id名{属性1:属性值1;属性2:属性值2;属性3;属性值3}
大多数HTML都可以定义ID属性,元素的ID值是唯一的只能对应文档中某一个具体的元素,用法和类选择器相同。
id选择器和类选择器的区别
W3C标准规定,在同一页面内,不允许有相同名字的id对象出现,但允许有相同名字的class。
通配符选择器
用"*"号标识,作用范围最广,能匹配页面中的所有元素,基本语法如下:
*{属性1:属性值1;属性2:属性值2;属性3;属性值3}
清楚所有HTML标记的默认边距
*{
margin:0; /*定义外边距*/
padding:0; /*定义内边距*/
}
伪类选择器
用于向某些选择器添加特殊效果。
链接伪类选择器
:link /*为访问的链接*/
:visited /*以访问的链接*/
:hover /*鼠标移动到链接上*/
:active /*选定的链接*/
使用时顺序不要颠倒。