1.CSS(网页美容师)
层叠样式表的简称,专注结构呈现
2.CSS语法规范
(1)主要构成部分
在<title>标签的后面写上<style>标签
<style>
选择器{样式}
</style>
注意:
a.选择器用于指定CSS样式的HTML标签,{}里面是具体样式
b.属性和属性值是成对出现的
c.对对象设置样式属性,如:字体大小,文本颜色
d.属性和属性值之间 用":"分开
3.代码风格
(1)书写风格
a.紧凑型格式
b.展开格式(推荐使用,更加直观)
(2)大小写风格:
使用小写,特殊情况除外
(3)空格规范
a.属性值前面,冒号后面保留一个空格
b.选择器(标签后面)和大括号中间保留一个空格
4.CSS选择器的作用(选择标签用的)
(1)基础选择器(由单个选择器组成的)
a.标签选择器(html标签名作为选择器)
1)语法(写上标签名):
2)作用:把一类标签全部选择出来
3)优点:快速为页面中的同类型标签统一设置样式
4)缺点:只能全部设置,不能差异化设置
b.类选择器(单独选择一个或者几个标签):
1)语法:
利用class属性来调用
2)口诀:样式点定义,结构类(class)调用,一个或多个,开发最常用
3)注意:
用英文符号.进行标识,后面紧跟类名
长名称或词组可以使用中横线来为选择器命名
不要使用纯数字和作文命名,尽量使用英文字母
4)类选择器可以使用多类名方式(一个标签调用多个类)
!多个类名中间,必须使用空格隔开
应用:相同样式的时候可以单独设置一个class,方便统一修改
c.id选择器
1)使用:HTML元素以id属性来设置id选择器,CSS中用"#"来定义,一般和JS搭配
2)语法:
3)口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用
!id选择器和class选择器的区别
--类选择器可以有多个名字,也可以被多次使用
--id选择器是唯一的,不得重复使用
d.通配符选择器
1)使用:使用"*"定义,选取页面中所有元素的标签
2)语法:
3)注意:
--不需要调用,自动选择所有元素
--特殊情况才使用
(2)复合选择器
5.CSS字体属性
(1)用于定义字体系列,大小,粗细和文字样式(斜体)
a.字体系列:
1)语法:
2)注意:
--各个字体之间要用逗号隔开
--一般情况下,有空格隔开的多个单词组成的字体,加引号
--尽量使用系统默认自带字体
--一般直接在<body>里面设置最常见几个字体:body{font-family:"Microsoft YaHei",tahoma,arial,"Hiragino Sans GB";}
b.字体大小
1)使用:font-size
2)语法:
3)注意:
--px(像素)使我们最常用的单位
--谷歌浏览器默认字体大小是16px
--不同浏览器默认值不同,我们尽量给一个明确值大小
-- 可以给body指定整个页面(标题标签比较特殊,需要单独指定文字大小)
c.字体粗细font-weight
1)取值
1)
2)最常使用<integer> ,直接在后面取值,表示字体的粗细,不需要加单位
--加粗=700
--正常=400
d.文字样式
1)font-style,设置文本的风格
2)语法
3)属性值:
一般使用:<em>(倾斜标签),让<em>标签的内容不倾斜
e.字体的复合写法:
1)简写语法:
2)注意:
--简写的格式,不能变,要求不能随意的调换位置(是否斜体,是否加粗,字体大小/字体间的行距,字体样式),每个属性之间用空格隔开
--不需要设置的属性可以省略(取默认值),但是必须保留font-size和font-family属性
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
