css文本语言:
其包含在style标签内部,style标签位于title标签和/head标签之中。
选择器:
选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现。
每一组属性都以分号结尾表示结束
属性和属性值之间使用:分开
标签选择器:
语法:p {
color: green;
}
标签选择器是指使用HTML标签名作为选择器,按标签每次分类,为页面中某一类标签指定统一的CSS格式。
作用:标签选择器可以把某一类标签全部选择出来,比如所有的<div>标签和所有的<span>标签
优点:能快速为页面中同类型的标签统一设置样式
缺点:不能设计差异化样式,只能选择全部的当前标签。
- 2.类选择器:
代码:
.类名 {
属性1: 属性值1;
}
例如:
将所有拥有red类的HTML元素均为红色。
.red {
color: red;
}
结构需要用class属性来调用class类:
<div class = "red">变红色</div>
如果想实现差异化选择,就可以使用类选择器
注意:
- 类选择器使用.进行标识,后面紧跟类名
- 可以理解为为这个标签归类
- 长名称或词组可以使用中横线来为选择器命名 例: star-sing
- 不要使用纯数字、中文等命名,尽量使用英文字母来表示
- 命名要有意义,能够表达这个类有什么作用
- 命名规则: 参看Web前端开发规范手册
多类名:
给一个标签指定多个类名,从而达到更多选择目的。
- 使用方式:<div class = "red font20">亚瑟</div>
class属性中的类名必须使用空格分开,这个标签就可以分别拥有这些类名的样式
- 使用场景:
可以把一些标签元素相同的样式放到一个类里去
这些标签就可以和调用这个公共的类,然后再调用自己独有的类
从而节省css代码,统一修改方便
多类名选择器在后期布局比较发展的情况下,还是较多使用的
- 3.id选择器:
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义
注意:id属性只能在每个HTML文件中出现一次,口诀:样式 #定义,结构id调用,只能调用一次,别人切勿使用
-id选择器和类选择器的区别:
类选择器->人的名字
id选择器->身份证,唯一不重复
两个选择器最大的区别在于使用次数上
类选择器在修改样式中使用较多,id选择器一般用于页面唯一性的元素上,经常和js搭配使用
- 4.通配符选择器:
CSS中通配符选择器使用*定义,它表示选取页面中的所有元素。
语法:
* {
属性1: 属性值1;
……
}
注意:
通配符选择器不需要调用,自动给所有的元素使用样式
特殊情况才使用,后面讲解使用场景,以下是清除所有元素标签的内外间距:
* {
margin: 0;
padding: 0;
}
- 基础选择器总结:
标签选择器: 选出所有相同的标签 不能差异化选择 使用较多 p { color: red;}
类选择器: 可以选出一个或者多个标签 可以根据需求选择 使用非常多 .nav { color: red;}
id选择器: 一次只能选择一个标签 id属性在每个HTML文档中值出现一次 一般和js搭配 #nav { color: red;}
通配符选择器:选择所有标签 选择的太多,有部分不需要 特殊情况使用 * {color: red;}
字体属性:
1.字体系列
CSS只用font-family属性定义文本的字体系列。
p {
font-family: "微软雅黑";
'Microsoft YaHei'是微软雅黑的英文名
}
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体,加引号
- 尽量使用系统默认自带字体,保证任何用户的浏览器中都能正确显示
- 常见字体: body{font - family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'}
2.字体大小
CSS使用font-size属性定义字体大小
p {
font-size: 20px;
}
- px(像素)大小是我们网页最常用的单位
- 谷歌浏览器默认的文字大小是16px
- 不同的浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
- 可以给body指定整个页面文字的大小
3.字体粗细
CSS使用font-weight属性设置文本字体的粗细
p {
font-weight: bold;
}
属性值:
normal 默认不加粗
bold 定义粗细(加粗)
100-900 400等于normal,700等于bold,注意这个数字后面不跟单位
- 学会让加粗标签不加粗(例如h和strong等),或者其他标签加粗
- 在实际开发中,我们更喜欢使用数字表达粗细
4.文字样式
CSS使用font-style属性设置文本的风格
p {
font-style: normal;
}
属性值:
normal 默认值,浏览器显示标准的字体样式
italic 浏览器会显示斜体的字体样式
- 平时我们很少给文字加斜体,分而要给斜体标签(em,i)改为不倾斜字体
5.字体复合属性
字体属性可以把以上文字样式综合来写,这样可以更节约代码:
body {
font: font-style font-weight font-size/line-height font-family;
}
- 必须严格按照顺序来写,不然代码不会执行,各个属性以空格隔开
- 不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性不起作用
6.总结:
font-size 字体大小 一定要跟上 单位->px
font-family 字体 按照团队约定来写字体
font-weight 字体粗细 加粗->700/bold 默认->400/normal
font-style 字体样式 倾斜->italic 不倾斜->normal
font 字体连写 有顺序:style weight size/height family 用空格分开不去 size family必须同时出现